[data grid] Deep filter in data grid master details

[achoud444]

Summary

I am mui data grid table with master details. Now I want to use filter with parent table and it should work on the child table as well which works fine with the below code.

const initialState = useKeepGroupedColumnsHidden({
        apiRef,
        initialState: {
            filter: {
                filterModel: {
                    items: [],
                    quickFilterValues: ["firs"],
                    quickFilterLogicOperator: GridLogicOperator.Or
                }
            }
        },
    });
    const initialStateContentPanel = useKeepGroupedColumnsHidden({
        apiRef,
        initialState: {
            filter: {
                filterModel: {
                    items: [],
                    quickFilterValues: ["firs"],
                    quickFilterLogicOperator: GridLogicOperator.Or
                }
            }
        },
    });

However when it finds something in the child table not in parent then it does not return anything. It should work as row grouping in which whatever we find in the grouped rows it returns. Kindly help

Here is the link what I want.

I want to search on the top table and it should also return and filter the child table when I type something. For example if I search for Mathews it should filter in the child table and return

Examples

No response

Motivation

No response

Search keywords: Deep filter in data grid master details

[michelengelen]

Hey @achoud444 what you are trying to achieve is currently not possible. Did you consider using tree data or row grouping feature. Here are demos on how this would look like and work:

• Quick filter with row grouping
• Quick filter with tree data

[michelengelen]

Another way to achieve this would be to add a hidden column with all data from the nested data grid (stringified). here is a comment on a different issue with a demo on how this could look like: https://github.com/mui/mui-x/issues/12620#issuecomment-2032359018

[achoud444]

Hey, @michelengelen,

I have tried using the but Row Grouping: After grouping the rows, I am unable to access or utilize other common fields within the grouped rows. Tree Data: I am not sure how to implement tree data in this context.

[achoud444]

Another way to achieve this would be to add a hidden column with all data from the nested data grid (stringified). here is a comment on a different issue with a demo on how this could look like: #12620 (comment)

I'm considering adding a hidden column but I'm uncertain about its efficiency with large datasets.

How well can the data grid handle large amounts of data? For example, is there an estimated number of rows it can efficiently manage?

[michelengelen]

Hey @achoud444 The grid can handle a tremendous amount of data. We have customers using it with datasets that are 5M+

The bottleneck in this case would probably be the parsing of the data to the hidden column.

[michelengelen]

I have tried using the but Row Grouping: After grouping the rows, I am unable to access or utilize other common fields within the grouped rows.

what do you mean by that? It should be possible to use any customization available for the rows as always. Could you elaborate?

Tree Data: I am not sure how to implement tree data in this context.

it really depends on the data structure, but for most cases it should be possible to use it.

[achoud444]

@michelengelen Please check this.

I want to keep created at only in the grouped row and also the buttons for download in the same row

[michelengelen]

@achoud444 this is something we cannot support ... at least not that I am aware of. @MBilalShafi do you have an idea if we can somehow make this work?

[achoud444]

@michelengelen Hi! Can I resize the Master(child) table columns to align with the parent columns when the parent is resized?. Code

[michelengelen]

Technically you could listen on the event we use to adjust the column size, but I think this might prove to be quite the performance implication.

I am exploring right now if you can pass in a custom row renderer for the grouping row which could allow you to use a cell renderer for the "common cells" you mentioned

[MBilalShafi]

I want to keep created at only in the grouped row and also the buttons for download in the same row

@achoud444 You can use renderCell to only render the action buttons in the group rows. For the created at column, since every child row has its own value, which value do you want to show in the group row?

renderCell: (params) => {
  if (params.rowNode.depth === 0) {
    // Group node
    return <ActionButtonsComponent />
  }
  return null
}

I did something similar in this CSB example: https://codesandbox.io/p/sandbox/festive-sunset-xr33js

Let me know if it helps.

[achoud444]

@MBilalShafi Can I do same for the createdAtdate since it is same for the Company?

[michelengelen]

Hey @achoud444 ... yes, you can do the same, but you would need to return the value or formattedValue from the renderCell function if it is not a grouping row!

Thanks for providing the initial demo @MBilalShafi ... I didn't have enough time to finish it! 💙

[achoud444]

@michelengelen When I use hardcoded value it reflects but when I use params.value it does not work.

{
    field: "createdAt",
    headerName: "Created at",
    type: "string",
    renderCell: (params) => {
      if (params.rowNode.depth === 0) {
        return (
          <span>
            {"ashish"}  //when I use params.value it does not work
          </span>
        );
      }
      return params.value;
    },
  },

[michelengelen]

@achoud444 this is strange. Could you share the code you are using?

[achoud444]

@michelengelen please have a look link

[michelengelen]

It's not public ... please open it up so I can have a look! 🙇🏼

[achoud444]

@michelengelen Please check now

[michelengelen]

Ah, thats because for the grouping rows (those have the params.rowNode.depth === 0) there is no value.

This is the place where you would need to add your custom component to display in the grouping row

[achoud444]

@michelengelen Do you have an example to do that? And why we do not have any staright forward way to do that?

[michelengelen]

Yes, the example was provided by @MBilalShafi here: https://github.com/mui/mui-x/issues/13505#issuecomment-2185005207

You can use the same pattern, but just return params.value or params.formattedValue from the function when params.rowNode.depth !== 0.

[michelengelen]

This is quite the straight forward approach to do something like this. Otherwise we would bloat the API for the colDef quite a bit if we consider every edge case as a property!

[achoud444]

@MBilalShafi @michelengelen Sorry If I am not able to explain clearly. But If you can see in this example, The actionfield is fine because I want to do action in company level but if you can see the createdAtfield is also same for the movies so I also want them to come in the same row as action and however it is blank

[MBilalShafi]

Hey @achoud444 I understand what you mean. I prepared a demo to achieve that: https://codesandbox.io/p/sandbox/great-waterfall-c2sm2j

I am assuming that all children of a given parent row should have the same value for createdAt field, so I am reading the first child row and using its value in the parent row. The trick is to use an API method getRowGroupChildren to get the children of each parent row and use them to extract the necessary value.

Let me know if this fulfills your requirements.

Sidenote: I used rowNode.type === 'group' instead of rowNode.depth === 0 as the latter may cause issues in multi-level grouping.

[achoud444]

@MBilalShafi thanks it does work for me. But How's a mere mortal supposed to know this? 😆

[MBilalShafi]

@achoud444 We do have documentation section for the API method getRowGroupChildren, but I agree we could add a recipe here for more users trying to achieve a similar thing.

I'll convert this issue to a recipe request.