How to add class on MUI datatable head and respective td for column?

Question

I am using MUI DataTable Reactjs in one of my project. https://www.npmjs.com/package/mui-datatables

I have to apply some CSS on specific column, like changing background color of a column. So i am trying to add a class on head and respective td in other rows.

Is there any way to add class with existing below code, because almost all table i have created like this code?

Below is the code for creating column head.

const columns = [
  "Date",
  {
    name: "Description",
    options: {
      filter: false,
      customBodyRender: value => {
        return <a href={value[0]}>{value[1]}</a>;
      }
    }
  },
  "Articles",
  {
    name: "Amount",

  },
  {
    name: "",
    options: {
      filter: false,
      customBodyRender: value => {
        return (
          <a href={value[0]}>
            <img src={download} alt="" />
          </a>
        );
      }
    }
  }
];

and table is generating td with below data.

const data = [
  [
    "Nov 26",
    ["http://www.google.com", "Payouts for November 19-25, 2018"],
    "56.898",
    "74.164,75",
    ["http://www.google.com", "Downlaod"]
  ],
  [
    "Nov 26",
    ["http://www.google.com", "Payouts for November 19-25, 2018"],
    "56.898",
    "74.164,75",
    ["http://www.google.com", "Downlaod"]
  ],


];

Table Component:

 <MUIDataTable
        title={"Payout history"}
        data={data}
        columns={columns}
        options={options}
      />

Answer 1

I think you are looking for the customHeadRender option instead of customBodyRender. customBodyRender will allow you to customize all rows in a column, but you'll need customHeadRender to customize the header for that column.

The following example uses customHeadRender, so it may be of some help: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js. You can add classes just as would to any node in react, e.g. <td classNames={classes.myClass}>{value}</td>.

Additionally, you might want to consider using class overrides on already existing classes in the table head. Here is an example of custom styling using theme overrides: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js.