T
TanStack•13mo ago
blank-aquamarine

Placeholder column span

Hi, I have a question about placeholder headers. I have an array of ColumnDef, containing two simple accessor columns, followed by a group column. When rendering the first (top) header group, I get two "placeholder" headers (one for each ungrouped column), followed by the group header. I would like/expect to get a single placeholder header, with colSpan: 2 to span both of the ungrouped columns. I only want to render a single th element here, not two. Is this possible, without manually grouping the ungrouped columns? I'm sorry if this is a stupid question, and thanks for reading.
1 Reply
ambitious-aqua
ambitious-aqua•2mo ago
I know this is old, but I recently worked through the solution to this. What I did was return null if the cell is a placeholder, then get the previous cell and set colSpan=2 if the previousCell was a placeholder: 
{row.getVisibleCells().map((cell, index) => {
  if (cell.getIsPlaceholder()) return null;

  const visibleCells = row.getVisibleCells();
  const previousCell = index > 0 ? visibleCells[index - 1] : null;

  return (
    <TableCell
      key={cell.id}
      colSpan={previousCell?.getIsPlaceholder() ? 2 : 1}
      >
      // your cell handling
    </TableCell>
  )
})}
{row.getVisibleCells().map((cell, index) => {
  if (cell.getIsPlaceholder()) return null;

  const visibleCells = row.getVisibleCells();
  const previousCell = index > 0 ? visibleCells[index - 1] : null;

  return (
    <TableCell
      key={cell.id}
      colSpan={previousCell?.getIsPlaceholder() ? 2 : 1}
      >
      // your cell handling
    </TableCell>
  )
})}

Did you find this page helpful?