reactjsdatatablereact-data-table-component

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.

Solution

  • 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