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 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.

This tutorial is part 2 of 3 in this series.

This tutorial is part 2 of 3 in this series.

Keep reading about 

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

In this tutorial, I want to show you how to use React Table Library to create a Tree Table or Tree List . In the previous example, you installed React Table Library to create a table component…

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.