CODEWITHSUNDEEP
reactjsdatatablereact-data-table-component
Mahmoud Ali
Mahmoud Ali

Reputation: 156

React DataTable customization

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. enter image description here

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

Upvotes: 0

Views: 23457

Answers (2)

Muffin Man
Muffin Man

Reputation: 81

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

Upvotes: 4

diedu
diedu

Reputation: 20775

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

Upvotes: 3

Related Questions