Replies: 1 comment 5 replies
-
@LoicUV Thanks for the good idea via meta! I experimented a bit based on your solution and got it to work automatically, but didn't test on large nesting: <thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
const columnRelativeDepth = header.depth - header.column.depth;
if (
!header.isPlaceholder &&
columnRelativeDepth > 1 &&
header.id === header.column.id
) {
return null;
}
let rowSpan = 1;
if (header.isPlaceholder) {
const leafs = header.getLeafHeaders();
rowSpan = leafs[leafs.length - 1].depth - header.depth;
}
return (
<th
key={header.id}
colSpan={header.colSpan}
rowSpan={rowSpan}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
);
})}
</tr>
))}
</thead> My logic is that columns have the smallest depth, relative to the nested columns. And if the column depth is more than 1 greater than the column depth, it means that there is a placeholder and we don't display this header. The P.S. I couldn't figure out how to use the built-in rowSpan either. Do you have any new information about it? |
Beta Was this translation helpful? Give feedback.
5 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi folks 👋
I'm having a bit of trouble understanding how
rowSpan
works for headers, especially when working with header groups.The column group demo renders header groups by looping over
table.getHeaderGroups()
, creating a<tr>
for each group, looping over group headers and returningnull
inside<th>
when the headerisPlaceholder
value istrue
, which results in empty header cells depending on the structureIdeally it should look like (at least in my use case)
To achieve that I'd have to
<th>
with a value of the depth found<th>
for the headers that are already "covered" by the rowSpan of the parentDoes someone know how to achieve this in a simpler way ?
Couldn't it possible to manually declare a rowSpan in columnDef, which would be taken into account when building the groups ?
I found here that header supports
rowSpan
, but I'm not sure how it's calculated, it always seem to be 0.What do you think ?
Edit :
I managed to make it work by adding a custom
rowSpan
in column meta in combination with the following render logic :But it feels kinda wrong and displays some header twice if you don't supply a
rowSpan
when needed.Here's a codesandbox if you want to tinker with it.
Beta Was this translation helpful? Give feedback.
All reactions