React DataTable customization

Question

Is it possible to style the headers of the react-data-table-component? I tried this

  columns: [
    {
      name: "Name",
      selector: "name",
      sortable: true,
      style: {
        background: "orange",
      },
    },
  ],

But it styles all the cells underneath that header, not the header itself.

Please let me know if there is documentation that I study this component API from.

add a minimal example with code. https://stackoverflow.com/help/minimal-reproducible-example — Prakash S, Sep 29 '21 at 03:23

score 3 · Accepted Answer · answered Sep 29 '21 at 05:34

3

I didn't find any mechanism to customize only the header cells, but you could style them with CSS selectors by passing an id in each column object and using the rdt_TableCol class

  columns: [
    {
      name: "Name",
      selector: "name",
      id: "name",
      sortable: true,
      style: {
        background: "orange",
      },
    },
  ],

and in a CSS file

[data-column-id="name"].rdt_TableCol {
  background-color: orange;
}

https://codesandbox.io/s/style-header-cell-rdt-c1y35

of course, this method is susceptible to internal changes in the lib, make sure to fix the version and revisit the code if you upgrade the version

answered Sep 29 '21 at 05:34

diedu

19,277
4
32
49

That's a Great Idea Thank you so much! – Mahmoud Ali Sep 29 '21 at 18:28
Can this work with CSS modules? if it would what would the syntax to it be? – Mahmoud Ali Sep 29 '21 at 18:33
@MahmoudMuhammed just importing the css file should work https://stackoverflow.com/a/40065474/1868008 – diedu Sep 29 '21 at 20:04
It worked! Thank you so much ❤️ – Mahmoud Ali Sep 29 '21 at 20:13

score 2 · Answer 2 · answered Nov 21 '22 at 02:16

In the DataTable props you can assign a style to the customStyles property like so:

import { tableCustomStyles } from './tableStyle.jsx';
            
<DataTable
   customStyles={tableCustomStyles}
/>

And then in the tableStyle.jsx file you can customize all properties of the table like this:

const tableCustomStyles = {
  headCells: {
    style: {
      fontSize: '20px',
      fontWeight: 'bold',
      paddingLeft: '0 8px',
      justifyContent: 'center',
      backgroundColor: '#FFA500'
    },
  },
}
export { tableCustomStyles };

Here is the API reference: https://react-data-table-component.netlify.app/?path=/docs/api-custom-styles--page

And here is the styles.ts file from the repo that shows some of the properties you can manipulate: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts

React DataTable customization

2 Answers2