[question] Deep Filtering in Master-Detail Data Grid using Main Toolbar

[dendycodes]

[question] Deep Filtering in Master-Detail Data Grid using Main Toolbar

[MBilalShafi]

In order to understand your use case better, please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[cherniavskii]

Hey @dendycodes
Interesting use case!

When a user applies a filter on the main data grid (e.g., by Course), the filtering should not only consider the main grid data but also the data from the detailed rows (child grid or expanded details).

Could you expand a little bit more on this?
What filter criteria would you want to apply to the nested data grid when filtering the root data grid by course?
Are the data for the nested data grid part of the row object?

[dendycodes]

Hi @cherniavskii

In the main row, we have details pertaining to learners. In the sub-table, I wish to display a list of courses that each learner has either successfully completed or is still in the process of completing.

The data for the nested data grid is not a part of the main row object. Instead, the master-detail grid represents a completely different table, which is fetched using the main row's learnerID or id.

I aim to filter learners based on the courses. For example, if a learner is enrolled in "Course A," I would like to be able to filter and display only those learners who are enrolled in "Course A."

[MBilalShafi]

Hi @dendycodes, thanks for providing the details.
I am a bit lost with the scenario tbh.

Could you explain a bit more about how exactly you want the filters to work? For example, you add a filter on First name column from the root grid. Shouldn't that work only on the first name column as it's a column filter?

Or do you more specifically refer to the quick filter? In that case, you may want to use controlled filterModel by saving the filterModel.quickFilterValues for the root grid in a variable and pass it on to the nested grids.

Does it make sense?

[dendycodes]

Hi @MBilalShafi,

Currently, the filter options available in the root grid are limited to its own columns. However, I would like to enhance this functionality by including columns from the nested grid within the root grid’s filter options. This way, users will be able to apply filters based on the data present in the columns of the nested grid.

I would greatly appreciate your guidance on how to achieve this integration, ensuring a seamless user experience.

Thank you in advance for your time and support.

[dendycodes]

Hi @MBilalShafi here is the minimal production case - https://codesandbox.io/s/data-grid-community-forked-wdv522?file=/src/App.tsx

For example, I have two tables: 1) the main table, and 2) the nested table.
The main table contains three columns: 'ID', 'Learner Name', and 'Age'. The nested table includes two columns: 'ID' and 'Course Name'.

The feature I need to build will enable users to filter learners by 'Course Name' in combination with 'Learner Name' and 'Age' from the main table.

In other words, how can I add 'Course Name' as a filter option to the main table?

[MBilalShafi]

There isn't a direct way to achieve this since the external grid doesn't recognize the course name column.

IMO, this seems a more valid use-case of rowGrouping rather than master detail. I was wondering if you could use rowGrouping here instead of master-detail to achieve the behavior you are trying to achieve, I've tried to update the codesandbox example: https://codesandbox.io/s/data-grid-community-forked-cx3w4k?file=/src/App.tsx

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.