时间戳

首页 > 解决方案 > React DataTable 自定义

reactjs - React DataTable 自定义

问题描述

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

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

但它样式化了该标题下的所有单元格，而不是标题本身。 在此处输入图像描述

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

标签： reactjsdatatablereact-data-table-component

解决方案

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

  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内部变化的影响，请确保修复版本并在升级版本时重新访问代码

推荐阅读