React Table（Tanstack）有条件地将类应用于th元素

Question

我正在使用 @tanstack/react-table v8.5.13。我想在这里做一些非常简单的事情，但似乎无法在文档中找到如何做的方法。

我的表有两个标题（标题和下面定义的子标题）

const columnHelper = createColumnHelper<ITableData>();

const columns = [
  columnHelper.group({
    id: 'Header',
    header: () => <Button variant='outlined'>Show all</Button>,
    columns: [
      columnHelper.accessor('header_sublevel', {
        header: () => <span>Secondary Header</span>,
        cell: (info) => info.getValue()
      })
    ]
  })
];

我正在通过这样做来渲染数据。

export default function MyTableComponent {
  const data = useAppSelector(state => state.table.data);
  const table = useReactTable<IListPrice>({
    data: listPriceData,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

  return (
    <div
      ref={virtualizedTableContainerRef}
      style={{ padding: '1rem' }}
      className='virtualized-table-container'
    >
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {table.getFooterGroups().map((footerGroup) => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map((header) => (
                <th key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(header.column.columnDef.footer, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
      <div className='h-4' />
    </div>
  );

我想要什么？我正在尝试将一个类添加到 th 元素的第二行以便设置它们的样式。下面是在生成的 HTML 代码中呈现的内容。

到目前为止我试过什么？我能想到的一种解决方案是取决于我可以应用类的标题的深度，但似乎有点矫枉过正。想法？

header 上没有可用的 getHeaderProps 方法，而该方法曾经在 react-table 的 v7 中可用。它在 v8 中被移动或删除了吗？

Answer 1

有人找到解决方案吗？在 v7 中有如下方法：getHeaderProps()、getRowProps()、getCellProps()，但在 v8 中一切都消失了......