How can I style React-Table?

Question

I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?

Solution 1

For React-Table v6, you can basically do it in 2 ways if you want to use css files.

1. Start with the css file from the npm package and override pieces you want to change

2. Start with your own css file and style everything that needs to be styled

Ad 1:

import "react-table/react-table.css"
import "./your_own_styles.(s)css"

Ad 2:

import "./your_own_styles.(s)css"

To get an idea what you can use in your own css file you can have a look at this gist: https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0

Or start by copying the react-table/react-table.css from the react-table npm package (in your node_modules).

Solution 2

Definitely do not change the node_modules. You can either style inline or attach styles.

https://reactjs.org/docs/faq-styling.html

Comments

[acidjunk]

If have to add: when this question was asked React-Table 6 was the stable version. Now it's React-Table7 in which you write most of the needed components like TR/TD and headers yourself so styling them would be different. React-Table7 als has Material-UI integration.