How to: React Table with fixed Header

 by Robin Wieruch
 - Edit this Post

This tutorial is part 3 of 3 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 and gave it a theme. Now, we will enable users to have their header sticky to the top:

...
import { useTheme } from '@table-library/react-table-library/theme';
const App = () => {
const data = { nodes };
const theme = useTheme({
Table: `
height: 100%;
`,
});
return (
<div
style={{
height: '150px',
}}
>
<Table data={data} theme={theme}>
...
</Table>
</div>
);
};

As you can, everything that's needed for a fixed table header is a container component around the table 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 its useTheme plugin for theming your table with a custom style. In the previous example, you have already installed React…

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.