reactjs - React Table (Tanstack) feltételesen alkalmazzon osztályt a th elemre

A @tanstack/react-table v8.5.13 verzióját használom. Próbálok itt valami igazán egyszerűt csinálni, de úgy tűnik, nem találok módot rá a dokumentációban.

Az asztalomnak két fejlécje van (egy fejléc és egy alkifejléc, amit lent definiáltunk)

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()
      })
    ]
  })
];

Így jelenítem meg az adatokat.

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>
  );

Mit akarok? Megpróbálok egy osztályt hozzáadni a th elemek második sorához, hogy stílust alkalmazhassak rájuk. Az alább látható a generált HTML kódban megjelenő tartalom.

Mit próbáltam eddig? Egy megoldás, ami eszembe jutott, hogy a fejléc mélységétől függően alkalmazhatnék osztályt, de úgy tűnik, ez túlzás lenne. Vélemények?

A getHeaderProps metódus nem elérhető a fejlécen, ami a react-table v7-ben még elérhető volt. Áthelyezték vagy eltávolították a v8-ban?