How to: React Table with Theme

 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 its useTheme plugin for theming your table with a custom style. In the previous example, you have already 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 };
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 we can adjust the table's style 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 last example, we styled the header rows and the row components. Since 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, BaseCell. In the end, this should give you all the entry points to style all the different components for 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.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with its usePagination plugin for a pagination feature. In the previous example, you have already installed React Table Library…

In this tutorial, I want to show you how to use React Table Library with its useRowSelect plugin for a select feature. In the previous example, you have already installed React Table Library to…

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.