Documentation

Table Height

The height and maxHeight props control how Simple Table handles vertical overflow. Understanding these props is essential for building tables that integrate well with your layout.

Current height: 400px

CodeSandbox

How Height Works

The height and maxHeight props are optional and determine how the table handles vertical space:

With height specified

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. The table will always be the specified height, even if there are few rows.

With maxHeight specified (adaptive height)

Works the same as height except that the table will shrink if there are fewer rows. This provides adaptive behavior where the table grows up to the maximum height but remains compact when displaying less data. Virtualization is still enabled for performance. If both height and maxHeight are defined, height will be ignored.

Without height or maxHeight (table overflows parent)

When neither prop 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

`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. Note: If both height and maxHeight are defined, height will be ignored.
`maxHeight` string \| number	Optional	Sets the maximum height of the table container with adaptive behavior. Works the same as height except that it will shrink if there are fewer rows. Enables virtualization while allowing the table to be smaller when content doesn't fill the maximum height. If both height and maxHeight are defined, height will be ignored.

Advanced: headerHeight and footerHeight

The headerHeight and footerHeight props are rarely needed and should almost never be used. They are only useful for pagination tables with custom footers where the table needs to know the footer height before rendering to properly calculate when the body will scroll. In most cases, the table handles these calculations automatically.

Common Patterns

Fixed Height Table

The table has a fixed height and handles its own scrolling:

React TSX

Copy

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

Adaptive Height Table (maxHeight)

Use maxHeight when you want the table to shrink with fewer rows but grow up to a maximum height. Perfect for tables with variable data amounts:

React TSX

Copy

1<SimpleTable
2  defaultHeaders={headers}
3  rows={data}
4  
5  maxHeight="600px"
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  
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    
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    
7    // No height prop - table overflows parent
8  />
9</div>

Pro Tip

For most applications, specifying either height or maxHeight is recommended. Use height for consistent sizing or maxHeight for adaptive behavior. Both enable virtualization for large datasets and keep the header visible while scrolling through data.