Add column.colSpan prop

[amanmahajan7]

colSpan?: (args: ColSpanArgs<TRow, TSummaryRow>) => number | undefined;

export type ColSpanArgs<R, SR> = {
  type: 'HEADER' | 'FILTER';
} | {
  type: 'ROW';
  row: R;
} | {
  type: 'SUMMARY';
  row: SR;
};

It can be used as

colSpan(args) {
  if (args.type === 'ROW') {
    if (key === '2' && args.row === 2) return 3;
    if (key === '4' && args.row === 4) return 6; // Will not work as colspan includes both frozen and regular columns
    if (key === '0' && args.row === 5) return 5;
    if (key === '27' && args.row === 8) return 3;
    if (key === '6' && args.row < 8) return 2;
  }
  if (args.type === 'HEADER' && key === '8') {
    return 3;
  }
  return undefined;
},

[ekeuus]

Why not go for a non-manually calculated api? #2350

[amanmahajan7]

@ekeuus colSpan is a generic api that can handle any type of row so not just header. We can even have both apis if makes sense. Thank your for the header groups PR. We will review it soon

[amanmahajan7]

Had to split into two hooks as we need to calculate colspan for all the rows in the viewport. This is needed to ensure a column that spans a column in the viewport is also visible

[amanmahajan7]

Do not render cells in the colspan range

[amanmahajan7]

Same as previous useViewportColumns hook. I moved the last useMemo to the new useViewportColumns hook as it needs rows

[amanmahajan7]

Ensure all the columns within the colspan range are either frozen or not

[nstepien]

Maybe now is a good time to update the PR title