Comcast / Comcast/react-data-grid

How to group rows without it being based on a column key?

Open
#2,536 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.7k
Forks
2.2k
Avg merge
1d 2h
Merged PRs (30d)
33

Description

I want to group rows based on certain fields in rows without those fields being used as columns in the grid.

For e.g in [this](https://codesandbox.io/s/group-million-test-9d7er?file=/src/Grid.js) I want to group by row field country & year but I don't want the country & year to be a part of the columns and take up space.

This was possible in earlier data-grid versions that you can check [here](https://codesandbox.io/s/rdg-grouping-forked-esjg0?file=/src/index.js).

What I need it to look like is shown below, here the multilevel grouping is taking place in 1 column but if we want to do that in react-data-grid currently it will occupy multiple columns to achieve the same result.

![image](https://i.imgur.com/FBOjftX.png)

Workarounds that I can think of for this might be if we can reduce the column width to be small and then for the rows where grouping happens we use column-span to take the rest of the space in the row for the group label? Not sure how to implement this though.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.