如何在反应表中添加标题

时间:2018-12-07 15:54:42

标签: javascript reactjs react-table

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

current table

这就是我需要的样子。

table needed

这是我对该表的配置。

    [
  {
    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: []
  }
]

1 个答案:

答案 0 :(得分:1)

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

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

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