Documentation

Table Height

The height prop controls how Simple Table handles vertical overflow. Understanding this prop is essential for building tables that integrate well with your layout.

Current height: 400px

CodeSandbox

How Height Works

The height prop is optional and determines how the table handles vertical space:

With height specified (recommended for most cases)

Simple Table creates a scrollable container at the specified height. The header remains fixed while the body scrolls. This is ideal when you have many rows and want to keep the table contained within a specific area of your layout.

Without height (table overflows parent)

When no height is specified, the table expands to show all rows and will overflow its parent container. This is useful when you want to handle scrolling yourself (e.g., page-level scrolling) or when embedding the table in a container that manages its own overflow.

Height Configuration

Property	Required	Description	Example

`height` string \| number	Optional	Sets the height of the table container. When specified, Simple Table handles vertical scrolling internally. When omitted, the table expands to fit all rows and overflows the parent container.

Common Patterns

Fixed Height Table

Most common use case. The table has a fixed height and handles its own scrolling:

React TSX

Copy

1<SimpleTable
2  defaultHeaders={headers}
3  rows={data}
4  rowIdAccessor="id"
5  height="400px"
6/>

Viewport-Relative Height

Use viewport units for responsive heights that adapt to screen size:

React TSX

Copy

1<SimpleTable
2  defaultHeaders={headers}
3  rows={data}
4  rowIdAccessor="id"
5  height="60vh"
6/>

Fill Parent Container

Use percentage height when the parent container has a defined height:

React TSX

Copy

1// Parent must have a defined height
2<div style={{ height: '500px' }}>
3  <SimpleTable
4    defaultHeaders={headers}
5    rows={data}
6    rowIdAccessor="id"
7    height="100%"
8  />
9</div>

Parent-Controlled Overflow

Omit height when you want the parent to handle scrolling:

React TSX

Copy

1// Table expands to full height, parent handles overflow
2<div style={{ height: '400px', overflow: 'auto' }}>
3  <SimpleTable
4    defaultHeaders={headers}
5    rows={data}
6    rowIdAccessor="id"
7    // No height prop - table overflows parent
8  />
9</div>

Pro Tip

For most applications, specifying a height is recommended. This ensures consistent layout, enables virtualization for large datasets, and keeps the header visible while scrolling through data.