Allow colSpan to work for grouped rows

This issue has been tracked since 2022-11-20.

Use case

I would like a grouped row to be able to span more than one column. Currently the colSpan function is only called for header rows, regular (non-grouped) rows, and summary rows.

Proposed solution

ColSpanArgs should be changed to the following type definition and should be called for grouped rows, just like RowHeightArgs.

export type ColSpanArgs<TRow, TSummaryRow> =
  | { type: 'HEADER' }
  | { type: 'GROUP'; row: GroupRow<TRow> }
  | { type: 'ROW'; row: TRow }
  | { type: 'SUMMARY'; row: TSummaryRow };

For context on the use-case I am trying to solve, what I really want to be able to achieve is to have more room to display content in the grouped cell, so I wanted it to span one additional column which is also frozen, just like the grouped cell.

image

EDIT This is the workaround I ended up implementing.
I made the group column as small as possible and created a custom grouper to move the icon to the right side of the cell.
Then put the label over the actual content.

I spent an hour or two attempting to open a PR, but when there were multiple grouped columns there was no way to solve it without knowing more information about the grouped row (e.x. in the colSpan function, we would not only need to know if a row was a grouped row, we also would need to know if the current row is the row with the actual group content or is a child row of some other group to accurately return the colspan of 1 for child and grandchild grouped rows)

image

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date