[Feature request] Grid multi-levels grouping - access to inner rows in grouping row

[karczk]

I'm using ...

• React Grid
• React Chart
• React Scheduler

Description

I want to render checkbox to check/uncheck all nested rows. An example to give the idea (custom grouping row component), grouping by A property, then by B and finally by C.

I use TableGroupRow with custom cellComponent to render grouping row (with checkbox). Unfortunately there is no access to inner groups or rows when group is expanded. Please provide a tree structure with inner groups (better) or flatten rows (all nested) data. It should be a part of row object (cellComponent props) and available regardless of the expanded state.

How it is now.
Inner rows can be read only when group is collapsed, two approaches:

1. Template feature: Grid group rows display children quantity #1705 (comment)
2. Hack, direct access to collapsed rows using row property (symbol). When group is expanded then property is not available.

The mentioned hack refers to Symbol(Symbol(group)_collapsedRows), please note that collapsedRows comes from solution no. 1 (template extends row object)

[ushkal]

Hi @karczk ,

Thank you for this suggestion. We’ll consider implementing it in our future releases.

[karczk]

@ushkal I was able to find the workaround, but it's an ugly hack ;) Requested feature is still needed to simplify everything.

Scenario:
grouping by country -> city -> team (build-in grid feature)

Component:

<TableGroupRow
    cellComponent={props => /* investigation */ } />

Case:
Let's investigate city group when grouped value equals to "Warsaw".

Problem to resolve:
How to know whether checkbox should be checked/unchecked/in indeterminate state?

Expected result:

Solutions

1. Check nested rows directly: broken, available only when group is collapsed. New feature requested in here (discribed in my first post).
2. Read grouping path and figure out the nested rows. Undocumented, may be broken with the new version but working:

How to get current column (key):

props.column.name
-> "city"

How to get path (keys):

takeWhile(grouping.map(x => x.columnName), x => x !== props.column.name, true) // true includes the last one
-> ["country", "city"]

How to get path values (hack 🙈):

props.row.compoundKey.split("|")
-> ["Poland", "Warsaw"]

How to get the nested rows:

With some computation (keys.reduce((prev, curr, index) => /* code */, allRows)) we can find nested rows (we have columns and rows in scope). Issues:

• reverse engineering: getCellValue and criteria should be used if implemented
• path values are not strongly typed (e.g. null, other types than string)
• api is undocumented (compoundKey) and it's for react key..., may be broken with the new version

[ushkal]

@karczk Your approach is correct. However, to achieve the maximum performance, I recommend you extract these calculations to the Getter so that they will be recalculated only when the grouping changes.