tanstack-table-header-rowspan

$3

Rowspan thing for headless React Table from Tanstack. See the discussion https://github.com/TanStack/table/discussions/5051.

Works for both header and footer:
!demo

$3

Just call it when you render your header (or footer) elements, pass the header object there and get attributes
to apply on your element.

It handles nested groups and columns automatically.

$3

$3

``tsx




{table.getHeaderGroups().map((headerGroup) => (

{headerGroup.headers.map((header) => {
// notice the function name we pick here
const rowSpan = tableHeaderRowSpan(header);
if (!rowSpan) {
// it's necessary to skip redundant cells
return null;
}
return (
className={'border border-black/20 bg-gray-100 px-2'}
colSpan={header.colSpan}
rowSpan={rowSpan}
style={{
width: header.getSize(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
);
})}

))}


`

$3

`tsx





{table.getFooterGroups().map((footerGroup) => (

{footerGroup.headers.map((header) => {
// notice the function name we pick here
const rowSpan = tableFooterRowSpan(header);
if (!rowSpan) {
// it's also necessary to skip redundant cells
return null;
}
return (
colSpan={header.colSpan}
rowSpan={rowSpan}
className={'border border-black/20 bg-gray-100'}
>
{flexRender(header.column.columnDef.header, header.getContext())}

);
})}

))}

`

$3

`tsx




{table.getHeaderGroups().map((headerGroup) => (

{headerGroup.headers.map((header) => {
const rowSpan = flexTableHeaderRowSpan(header);
return (
className={clsx(
'group-first/row:border-t border-b border-e first:border-s border-black/20 bg-gray-100 px-2',
'flex items-center justify-center',
rowSpan.topBorderMightBeNeeded && 'border-t',
)}
style={{
...rowSpan.styles('2rem'), // you have to put the height of single header row here
width: header.getSize(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}

);
})}

))}


`

$3

`tsx





{table.getFooterGroups().map((footerGroup) => (

{footerGroup.headers.map((header) => {
// notice the function name we pick here
const rowSpan = flexTableFooterRowSpan(header);
return (
data-test-rowspan={header.column.columnDef.meta?.testRowSpan}
className={clsx(
'border-t group-last/row:border-b border-e first:border-s border-black/20 bg-gray-100',
'flex items-center justify-center',
rowSpan.bottomBorderMightBeNeeded && 'border-b',
)}
style={{
...rowSpan.styles('2rem'),
width: header.getSize(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}

);
})}

))}

``