React DataTable自定义

Question

是否可以设置react-data-table-component标头的样式？我试过了

  columns: [
    {
      name: "Name",
      selector: "name",
      sortable: true,
      style: {
        background: "orange",
      },
    },
  ],

但它设置了该标题下的所有单元格的样式，而不是标题本身。

​

请让我知道，如果有我学习这个组件API的文档。

Answer 1

我没有找到任何只定制标题单元格的机制，但是您可以通过在每个列对象中传递一个id并使用rdt_TableCol类来使用CSS选择器设置它们的样式

  columns: [
    {
      name: "Name",
      selector: "name",
      id: "name",
      sortable: true,
      style: {
        background: "orange",
      },
    },
  ],

并在CSS文件中

[data-column-id="name"].rdt_TableCol {
  background-color: orange;
}

https://codesandbox.io/s/style-header-cell-rdt-c1y35

当然，此方法很容易受到库中内部更改的影响，请确保修复版本并在升级版本时重新访问代码