Как добавить класс на MATI datatable заголовок и соответствующий тд для столбца?

Question

Я использую MUI DataTable Reactjs в одном из моих проектов. https://www.npmjs.com/package/mui-datatables

Я должен применить немного CSS к конкретному столбцу, например, изменить цвет фона столбца. Поэтому я пытаюсь добавить класс на голове и тд в других строках.

Есть ли способ добавить класс с существующим кодом ниже, потому что почти все таблицы, которые я создал, как этот код?

Ниже приведен код для создания заголовка столбца.

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>
        );
      }
    }
  }
];

и таблица генерирует TD с данными ниже.

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"]
  ],


];

Компонент таблицы:

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

Answer 1

Я думаю, что вы ищете customHeadRender вариант вместо customBodyRender, customBodyRender позволит вам настроить все строки в столбце, но вам нужно customHeadRender настроить заголовок для этого столбца.

В следующем примере используется customHeadRender, так что это может помочь: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js. Вы можете добавлять классы так же, как и в любой другой узел, например: <td classNames={classes.myClass}>{value}</td>,

Кроме того, вы можете рассмотреть возможность использования переопределений классов для уже существующих классов в заголовке таблицы. Вот пример пользовательского стиля с использованием переопределений тем: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js.