javascript - 如何向 react 表添加标题

Question

我正在使用react-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

似乎在列中，每个对象都可以有一个字段标题和一个字段列，该字段列有一个包含具有相同结构的对象的数组。因此，在您的情况下，您需要类似的东西，所以您需要的只是分割对象，例如:

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

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