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 (<divstyle={{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.