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}>
<Cell>{item.name}</Cell>
<Cell>
{item.deadline.toLocaleDateString(
'en-US',
{
year: 'numeric',
month: '2-digit',
day: '2-digit',
}
)}
</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.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 for creating a Tree Table or Tree List . In the previous example, you have already installed React Table Library to create a…

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.