[data grid] Deep filter in data grid master details about mui-x HOT 26 OPEN

@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.

from mui-x.

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.

from mui-x.

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.

from mui-x.

@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?

from mui-x.

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

from mui-x.

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! 💙

from mui-x.

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

from mui-x.

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

from mui-x.

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)

from mui-x.

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.

from mui-x.

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?

from mui-x.

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.

from mui-x.

@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

from mui-x.

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

from mui-x.

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.

from mui-x.

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

from mui-x.

@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;
    },
  },

from mui-x.

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

from mui-x.

@michelengelen please have a look link

from mui-x.

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

from mui-x.

@michelengelen Please check now

from mui-x.

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

from mui-x.

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

from mui-x.

Yes, the example was provided by @MBilalShafi here: #13505 (comment)

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

from mui-x.

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!

from mui-x.

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

from mui-x.