如何在反应表中添加标题

Question

I am using react-table and need to add custom titles to a single table. I cannot figure out how to do this by looking over the examples and docs. Here is what my table currently looks like.

Here is what I need it to look like.

And here is my config for the 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

Seems like in columns every object can have a field header and a field columns that haves an array with objects with the same structure. So in your case you would need something like, so what you need is just to split your objects like:

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

If it doesn't solve your problem, you could add the elements separately then adjust with CSS.