React 数据表自定义

Question

是否可以设置 react-data-table-component 的 header 的样式？我试过这个

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

但它为 header 下面的所有单元格设置样式，而不是 header 本身。

如果有我研究此组件的文档API，请告诉我。

Answer 1

我没有找到任何仅自定义 header 单元格的机制，但您可以通过在每一列中传递 id 来使用 CSS 选择器设置它们的样式 object 并使用 rdt_TableCol class

  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

当然，这种方法容易受到lib内部变化的影响，如果升级版本，请确保修复版本并重新访问代码

React 数据表自定义

React DataTable customization

reactjs

datatable

react-data-table-component