How to: React Table with Theme

In this tutorial, I want to show you how to use React Table Library with its useTheme plugin to theme your table with a custom style. In the previous example, you installed React Table Library to create a table component.

First, import the useTheme hook:

import { useTheme } from '@table-library/react-table-library/theme';

And second, create a theme with it and pass it as plugin prop to the Table component:

const THEME = {};

const App = () => {
  const data = { nodes: list };

  const theme = useTheme(THEME);

  return (
    <Table data={data} theme={theme}>
      ...
    </Table>
  );
};

That's it. With just a few lines, you created a custom theme for your table. However, the theme is empty, so let's see how you can style the table with it:

const THEME = {
  HeaderRow: `
    font-size: 14px;

    background-color: #eaf5fd;
  `,
  Row: `
    font-size: 14px;

    &:nth-child(odd) {
      background-color: #d2e9fb;
    }

    &:nth-child(even) {
      background-color: #eaf5fd;
    }
  `,
};

Essentially, the theme is a dictionary where you can style the different components of a table. In the example above, we styled the header rows and the row components. As both components share some of the same style, you could extract this style to a common denominator too:

const THEME = {
  BaseRow: `
    font-size: 14px;
  `,
  HeaderRow: `
    background-color: #eaf5fd;
  `,
  Row: `
    &:nth-child(odd) {
      background-color: #d2e9fb;
    }

    &:nth-child(even) {
      background-color: #eaf5fd;
    }
  `,
};

The following components are available as keys for styling: Table, HeaderRow, Row, HeaderCell, Cell, BaseRow, and BaseCell. This should give you all the entry points you need to style all of the components of your table. If you have feedback, please open up an issue on the GitHub repository. If you want to see more themes, check out the library's documentation.