How to: React Table with fixed Header

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.