如何将标题添加到 react-table

Question

我正在使用 react-table，需要将自定义标题添加到单个 table。我无法通过查看示例和文档来弄清楚如何做到这一点。这是我的 table 目前的样子。

这是我需要的样子。

这是我对 table 的配置。

    [
  {
    Header: '',
    columns: []
  },
  {
    Header: '',
    columns: []
  },
  {
    Header: 'Avg Sales',
    columns: []
  },
  {
    Header: 'Project to Date',
    columns: []
  },
  {
    Header: '',
    columns: [
      {
        Header: '',
        accessor: 'spacer',
        width: 35
      }
    ]
  },
  {
    Header: 'Activity & Inventory',
    columns: []
  },
  {
    Header: '',
    columns: [
      {
        Header: '',
        accessor: 'spacer',
        width: 35
      }
    ]
  },
  {
    Header: 'Additional Data Entered',
    columns: []
  }
]

Answer 1

似乎在列中，每个 object 都可以有一个字段 header 和一个字段列，其中包含具有相同结构的 object 数组。所以在你的情况下你需要类似的东西，所以你需要的只是像这样拆分你的 objects：

[{
  Header: 'Title 1',
  columns: [...], //subgroup 1
 },
 {
  Header: 'Title 2',
  columns: [...], //subgroup 2
 },
]

如果不能解决您的问题，您可以单独添加元素，然后使用CSS进行调整。

如何将标题添加到 react-table

how to add title to react-table

javascript

reactjs

react-table