0

我在我的一个项目中使用MUI DataTable Reactjs。 https://www.npmjs.com/package/mui-datatables

我必须在特定列上应用一些 CSS，例如更改列的背景颜色。所以我试图在头上添加一个类，并在其他行中添加相应的 td。

有没有办法用现有的下面的代码添加类，因为我创建的几乎所有表都是这样的代码？

下面是创建列头的代码。

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}
      />
4

1 回答 1

3

我认为您正在寻找customHeadRender选项而不是customBodyRender. customBodyRender将允许您自定义列中的所有行，但您需要customHeadRender自定义该列的标题。

以下示例使用customHeadRender，因此可能会有所帮助：https ://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js 。您可以像添加到 react 中的任何节点一样添加类，例如<td classNames={classes.myClass}>{value}</td>.

此外，您可能需要考虑在表头中已经存在的类上使用类覆盖。这是使用主题覆盖的自定义样式示例：https ://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js 。

于 2019-05-24T01:54:19.063 回答