react-table v-7中如何添加具有不同值的subRow？

Question

如何在react-table v-7中添加具有不同列的子标题？需要能够配置子行

需要能够在react-table v-7 add subheader中配置带有不同列的subrowshow吗？

https://codesandbox.io/s/tannerlinsleyreact-table-expanding-k4rhe

function Table({ columns: userColumns, data }) {
  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ expanded }],
  } = useTable(
    {
      columns: userColumns,
      data,
    },
    useExpanded // Use the useExpanded plugin hook
  )

  return (
    <>
      <pre>
        <code>{JSON.stringify({ expanded }, null, 2)}</code>
      </pre>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    )
                  })}
                </tr>
              )
          )}
        </tbody>
      </table>
      <br />
      <div>Showing the first 20 results of {rows.length} rows</div>
    </>
  )
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        // Build our expander column
        Header: () => null, // No header, please
        id: 'expander', // Make sure it has an ID
        Cell: ({ row }) =>
          // Use the row.canExpand and row.getExpandedToggleProps prop getter
          // to build the toggle for expanding a row
          row.canExpand ? (
            <span
              {...row.getExpandedToggleProps({
                style: {
                  // We can even use the row.depth property
                  // and paddingLeft to indicate the depth
                  // of the row
                  paddingLeft: `${row.depth * 2}rem`,
                },
              })}
            >
              {row.isExpanded ? '👇' : '👉'}
            </span>
          ) : null,
      },
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'firstName',
          },

          {
            Header: 'age',
            accessor: 'id',
          },
          {
            Header: 'color',
            accessor: 'color',
          },
        ],
      },

    ],
    []
  )
  const subColumns = React.useMemo(
    () => [
      {

      },
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'id',
          },

          {
            Header: 'age',
            accessor: 'id',
          },
          {
            Header: 'color',
            accessor: 'color',
          },
        ],
      },

    ],
    []
  )



  const data = [
    {firstName:'cat',subRows:[
      {id:3,age:10, color:'red'}
    ]},
    {firstName:'dog',lastName:'black',subRows:[
      {id:3,age:10, color:'black'}]}
  ]

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

如何在react-table v-7中添加具有不同列的子标题？

Answer 1

为什么不使用

 const myColumns = [{
        'Header': 'HEADER',
        'columns': [
          {
            'Header': 'FIRST COLUMN',
            'accessor': 'id',
          },
        ],
        //...more rows
      }];