[DataGridPro] Add support for master/detail #3387

m4theushw · 2021-12-10T01:55:18Z

Preview: https://deploy-preview-3387--material-ui-x.netlify.app/components/data-grid/group-pivot/#master-detail

Closes #211

How does it work?

The master/detail implemented here works in two steps:

The first step is to adjust the height of the row whose we want to show the detail to include the height of the panel too. That way, the final row height is: base row height (defined via rowHeight prop) + detail panel height (defined via getDetailPanelHeight prop). Doing this, we don't need to worry about scrollToIndexes nor fixing the virtualization, because, in theory, it would already have #3218. The rendering of the detail panel is done later. To fill the space left for the panel, a bottom margin is applied to the row.

The second step is to render all of the detail panels. This is achieved by rendering all of them inside a div placed on top of the render zone, which can be understood as a "layer". Each panel is absolute positioned so the top corresponds to the bottom position of the row it belongs to. That way, it creates the impression that the panel is rendered immediately below the row, when it's not. I chose this approach because the alternative would be to render the panel inside the GridRow, which could cause some flickering when the virtualization renders new rows. The idea of adding another layer ensures that the open detail panels are rendered once and never again, no matter how much the user scrolls.

Changelog

🎁 Add support for master/detail ([DataGridPro] Add support for master/detail #3387) @m4theushw

github-actions · 2021-12-14T08:03:42Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2021-12-16T13:08:31Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

m4theushw · 2021-12-16T22:37:06Z

I still want to add some very complex demos (e.g. combine with column pinning and use a form as the detail), but this can be done while the PR is reviewed. Don't focus too much in the changes done to support variable row height, this is not the main concern here. The changes I made are likely to change depending on #3218.

m4theushw · 2021-12-16T22:40:21Z

packages/grid/_modules_/grid/hooks/features/rows/useGridRowsHydration.ts

+
+        const heights = apiRef.current.unstable_applyPreProcessors(
+          GridPreProcessingGroup.rowHeight,
+          { base: rowHeight }, // We use an object to make simple to check if a size was already added or not


Allowing other hooks to pre-process the row height unblocks #2144.

github-actions · 2021-12-21T10:01:41Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette

Nice documentation, I enjoyed the DataGrind inside a DataGrid. It should probably have its own page because it does not have that much relation with the tree data.

docs/src/pages/components/data-grid/group-pivot/ControlMasterDetail.tsx

docs/src/pages/components/data-grid/group-pivot/NestedDetailPanels.tsx

docs/src/pages/components/data-grid/group-pivot/group-pivot.md

packages/grid/_modules_/grid/hooks/features/detailPanel/gridDetailPanelSelector.ts

alexfauquette · 2021-12-21T16:41:16Z

packages/grid/_modules_/grid/components/cell/GridDetailPanelToggleCell.tsx

+  const ownerState: OwnerState = { classes: rootProps.classes, isExpanded };
+  const classes = useUtilityClasses(ownerState);
+
+  const contentCache = useGridSelector(apiRef, gridExpandedRowsContentCache);


What about adding a function disableDetailPannel which takes the row as an input and returns a boolean?

I would avoid having to cache its value and decouple the action management (allowing/preventing google) and the rendering of the panel.

Do you mean to add a hasDetailPanel(row) method to the API? Similar to isColumnPinned(field).

Not exactly. For now, developers have access to two parameters:

getDetailPanelContent

getDetailPanelHeight

And if you do not want to have a detail panel for some row, the getDetailPanelContent must return null or undefined. With this method, you have to evaluate all the getDetailPanelContent(row) to know if the detail panel is a valid component. I'm proposing to let developers provide a third prop disableDetailPannel(row).

I thought about it for two reasons:

Using React.isValidElement seems a bit hacky.

I imagine for developers, knowing if the row has a detail panel will be easy. It will probably be a condition such as: "the row status is open"

packages/grid/_modules_/grid/hooks/features/detailPanel/useGridDetailPanel.ts

HunteRoi · 2021-12-23T21:39:39Z

I'm eager to be able to use this feature, guys!!

Do you have an ETA for it or should I ask Santa for a late gift? 😄

github-actions · 2022-02-02T10:19:03Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

DanailH

It looks awesome and the docs and examples are perfect, really great job! Should we aim to merge this and have it in this week's release?

packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx

github-actions · 2022-02-03T11:41:34Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2022-02-03T12:09:37Z

Yeah, the arrow is better but it's already taken. We need to be prepared for the worst scenario: detail panel + row grouping. In this case using the same icon for both doesn't work. We could change to "+" and "-".

Not sure what the best option is here

Use the best icon and document on the doc how to change it in a "Use with the Tree Data or the Row Grouping" section
Use a sub-optimal icon to make sure it is never incoherent

m4theushw · 2022-02-03T13:05:38Z

@flaviendelangle I changed to a "+" and "-" icon. I don't agree that we should tell users to change the icon if they want to use master detail and tree data. Kendo UI uses the same combination that we're now using: arrow for grouping and "+" for master detail.

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/

joserodolfofreitas

It's looking great!

corneliugaina · 2022-07-15T08:37:37Z

Any update about this feature ? Will it be available in v5.x or the upcoming major release ?

flaviendelangle · 2022-07-15T09:30:33Z

The feature has been available for quite some time
Here is the documentation

I would be interested to know why you did not find it

corneliugaina · 2022-07-15T13:09:45Z

Ok I'm glad it's released and available in datagrid pro, thanks you and mui team !
We were two searching for this and finally been able to find it by looking at released changes, then saw that a props was added to the feature recently (getDetailPanelHeight in 5.13).

For the story,

At first, I stumbled between every documentation page (Rows, Editing, Components) having in mind words like "Edit panel" / "Detail panel" (like in material-table ) and never thought to search in Group&Pivot sub-categories, in my opinion the name 'Master detail' is not very explicit (even if this makes sense now), and maybe should be in or 'Rows' or an independent page. Maybe I'm wrong and it really belongs to Group & Pivot category because it shares some UI parts.

Also, in mui table the equivalent feature has a different name, collapsible table .

Finally, It will be great if such feature appears on main demo , since we often look at it to describe a custom feature, based on what is already available on mui-x datagarid. But I understand that too much on demo can be overhelming, it's just supposed to be a demo not an exhaustive datagrid capabilities.

flaviendelangle · 2022-07-15T13:20:30Z

Thanks for your feedback !

@joserodolfofreitas I think that will interest you

I think there are two three things here:

The "Master detail panel" is a feature named differently based on the project and it would be nice for the search to handle these aliases
The doc page is in "Group & Pivot" which makes no sense, in [docs] Split Rows doc page #5195 I am moving it to "Rows"
The main demo does not use this feature, every major feature should probably be visible without diving into the documentation (related to [docs] Improve main demo to show new functionalities #5292)

niralivasoya · 2023-07-19T18:44:14Z

@flaviendelangle @m4theushw, can we close the opened row detail when we click on the other row? Is this possible with detailPanelContent in DataGridPro?

m4theushw · 2023-07-20T18:48:34Z

@niralivasoya Yes, you need to update the detailPanelExpandedRowIds prop to keep only one panel open when receiving a rowClick event. See https://mui.com/x/react-data-grid/master-detail/#controlling-expanded-detail-panels and https://mui.com/x/react-data-grid/events/#with-the-prop-of-the-event

m4theushw added component: DataGridPro new feature New feature or request labels Dec 10, 2021

m4theushw self-assigned this Dec 14, 2021

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 14, 2021

This was referenced Dec 14, 2021

[DataGridPro] Export the tree data grouping column field constant #3434

Closed

[DataGrid] Blank space when scrolling horizontally #3436

Closed

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 16, 2021

m4theushw mentioned this pull request Dec 16, 2021

[DataGrid] Variable row height #3218

Merged

2 tasks

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 16, 2021

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 16, 2021

add master/detail

0f7ce90

m4theushw force-pushed the master-detail branch from 4755866 to 0f7ce90 Compare December 16, 2021 21:27

m4theushw marked this pull request as ready for review December 16, 2021 21:45

m4theushw added 2 commits December 16, 2021 19:31

add default value for the icon slot

3949477

add master/detail to the list of features

4899310

m4theushw requested review from flaviendelangle, alexfauquette and DanailH December 16, 2021 22:32

m4theushw commented Dec 16, 2021

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 21, 2021

alexfauquette reviewed Dec 21, 2021

View reviewed changes

Merge branch 'master' into master-detail

e978a71

m4theushw added 2 commits December 24, 2021 10:34

Merge branch 'master' into master-detail

3480772

set type to number in the quantity column

903e651

Merge branch 'master' into master-detail

c8553b2

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 1, 2022

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 2, 2022

Merge branch 'master' into master-detail

411e463

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 3, 2022

DanailH approved these changes Feb 3, 2022

View reviewed changes

packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 3, 2022

m4theushw added 2 commits February 3, 2022 09:10

Merge branch 'master' into master-detail

463cbc1

add slots & change icon

f5e1b49

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 3, 2022

yarn prettier

1367067

m4theushw requested a review from flaviendelangle February 3, 2022 13:05

flaviendelangle approved these changes Feb 3, 2022

View reviewed changes

m4theushw merged commit 6a77b23 into mui:master Feb 3, 2022

m4theushw deleted the master-detail branch February 3, 2022 15:21

joserodolfofreitas approved these changes Feb 3, 2022

View reviewed changes

oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user labels Feb 3, 2022

m4theushw mentioned this pull request Feb 8, 2022

[DataGrid] Add support for margin between rows #3848

Merged

m4theushw mentioned this pull request Mar 11, 2022

[docs] Document the new editing API #4060

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPro] Add support for master/detail #3387

[DataGridPro] Add support for master/detail #3387

m4theushw commented Dec 10, 2021 •

edited

Loading

github-actions bot commented Dec 14, 2021

github-actions bot commented Dec 16, 2021

m4theushw commented Dec 16, 2021

m4theushw Dec 16, 2021

github-actions bot commented Dec 21, 2021

alexfauquette left a comment

alexfauquette Dec 21, 2021

m4theushw Dec 24, 2021

alexfauquette Dec 27, 2021

HunteRoi commented Dec 23, 2021

github-actions bot commented Feb 2, 2022

DanailH left a comment

github-actions bot commented Feb 3, 2022

flaviendelangle commented Feb 3, 2022

m4theushw commented Feb 3, 2022

joserodolfofreitas left a comment

corneliugaina commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

corneliugaina commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022 •

edited

Loading

niralivasoya commented Jul 19, 2023

m4theushw commented Jul 20, 2023

[DataGridPro] Add support for master/detail #3387

[DataGridPro] Add support for master/detail #3387

Conversation

m4theushw commented Dec 10, 2021 • edited Loading

How does it work?

Changelog

github-actions bot commented Dec 14, 2021

github-actions bot commented Dec 16, 2021

m4theushw commented Dec 16, 2021

m4theushw Dec 16, 2021

Choose a reason for hiding this comment

github-actions bot commented Dec 21, 2021

alexfauquette left a comment

Choose a reason for hiding this comment

alexfauquette Dec 21, 2021

Choose a reason for hiding this comment

m4theushw Dec 24, 2021

Choose a reason for hiding this comment

alexfauquette Dec 27, 2021

Choose a reason for hiding this comment

HunteRoi commented Dec 23, 2021

github-actions bot commented Feb 2, 2022

DanailH left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 3, 2022

flaviendelangle commented Feb 3, 2022

m4theushw commented Feb 3, 2022

joserodolfofreitas left a comment

Choose a reason for hiding this comment

corneliugaina commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

corneliugaina commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022 • edited Loading

niralivasoya commented Jul 19, 2023

m4theushw commented Jul 20, 2023

m4theushw commented Dec 10, 2021 •

edited

Loading

flaviendelangle commented Jul 15, 2022 •

edited

Loading