How to: React Table with fixed Header

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in this series.

In this tutorial, I want to show you how to use React Table Library with a fixed header. In the previous example, you have already installed React Table Library to create a table component. Now, we will enable users to have their header sticky to the top.

const App = () => {
const data = { nodes };
return (
<Table data={data}>
{(tableList) => (
<>
<Header>
...
</Header>
<div style={{ maxHeight: '150px', overflow: 'auto' }}>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
{(tableItem) => (
<>
<Cell>{tableItem.name}</Cell>
<Cell>
{tableItem.deadline.toLocaleDateString(
'en-US',
{
year: 'numeric',
month: '2-digit',
day: '2-digit',
}
)}
</Cell>
<Cell>{tableItem.type}</Cell>
<Cell>{tableItem.isComplete.toString()}</Cell>
</>
)}
</Row>
))}
</Body>
</div>
</>
)}
</Table>
);
};

As you can, everything that's need for a fixed table header is a container component around our body component. With this, the rows of the table will scroll in a vertical direction while the header stays sticky at the top of the table.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with its useSort plugin for a sort feature. In the previous example, you have already installed React Table Library to create a…

In this tutorial, I want to show you how to use React Table Library with a search feature. In the previous example, you have already installed React Table Library to create a table component. Now…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.