Using TableWrapper to avoid dynamic height computation

The TableWrapper is a component that provides a wrapper around a table element. TableWrapper is used to avoid the dynamic height calculation and inconsistency in heights for the parent container of the table component.

TableWrapper should be used only with Tables used in the listing layout as shown below. Container should be the parent component of TableWrapper.

<Container>
  <Header />
  <SubHeader />
  <TableWrapper>
    <Table columnData={columnData} rowData={rowData} />
  </TableWrapper>
</Container>

Example - CodeSandbox link

Using TableWrapper with table contains pagination

TableWrapper height is adjusted to contain pagination element using the hasPagination prop. hasPaginationprop accepts a boolean value. It can be calculated using totalCount and defaultPageSize values as shown below.

<Container>
  <Header />
  <SubHeader />
  <TableWrapper hasPagination={totalCount > defaultPageSize}>
    <Table columnData={columnData} rowData={rowData} />
  </TableWrapper>
</Container>

Example - CodeSandbox link