Как добавить класс на заголовок данных MUI и соответствующий тд для столбца? - PullRequest
Новая
       16

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

0 голосов
/ 18 мая 2019

Я использую 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}
      />

1 Ответ

0 голосов
/ 24 мая 2019

Я думаю, что вы ищете вариант 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.

...