From a40c49e1b083a39829900d73a1f99ce705911406 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Fri, 8 Dec 2023 13:51:04 +0100 Subject: [PATCH 1/4] added a new demo to the autosizing docs page --- .../ColumnAutosizingGroupedRows.tsx | 41 +++++++++++++++++++ .../column-dimensions/column-dimensions.md | 7 ++++ 2 files changed, 48 insertions(+) create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx new file mode 100644 index 0000000000000..7dbe8f1f1f693 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGridPremium, + useGridApiRef, + useKeepGroupedColumnsHidden, +} from '@mui/x-data-grid-premium'; +import { useMovieData } from '@mui/x-data-grid-generator'; + +export default function ColumnAutosizingGroupedRows() { + const data = useMovieData(); + const apiRef = useGridApiRef(); + + const columns = React.useMemo(() => { + return data.columns.map((col) => ({ ...col, width: 50 })); + }, [data.columns]); + + const initialState = useKeepGroupedColumnsHidden({ + apiRef, + initialState: { rowGrouping: { model: ['company'] } }, + }); + + React.useEffect(() => { + apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + if (params.childrenExpanded) { + apiRef.current.autosizeColumns({ includeOutliers: true }); + } + }); + }, [apiRef]); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md index c2d518212974c..40e4f001494a7 100644 --- a/docs/data/data-grid/column-dimensions/column-dimensions.md +++ b/docs/data/data-grid/column-dimensions/column-dimensions.md @@ -113,6 +113,13 @@ Column autosizing is compatible with the [Dynamic row height](/x/react-data-grid When autosizing columns with long content, consider setting the `maxWidth` for the column to avoid it becoming too wide. ::: +### Autosizing with grouped rows [](/x/introduction/licensing/#premium-plan 'Premium plan') + +When using [row grouping](/x/react-data-grid/row-grouping/) you can utilize the `autosizeColumns` method to adjust the column width of the expanded rows dynamically. +The demo below shows how you can subscribe to the `rowExpansionChange` event. The provided handler function then calls the `autosizeColumns` method from the gridApi. + +{{"demo": "ColumnAutosizingGroupedRows.js", "disableAd": true, "bg": "inline"}} + ## API - [DataGrid](/x/api/data-grid/data-grid/) From 8906d9b74c69bbf6af442be5c7d958770ba09b0d Mon Sep 17 00:00:00 2001 From: michel Date: Wed, 13 Dec 2023 14:37:28 +0100 Subject: [PATCH 2/4] generated docs --- .../ColumnAutosizingGroupedRows.js | 41 +++++++++++++++++++ .../ColumnAutosizingGroupedRows.tsx.preview | 7 ++++ 2 files changed, 48 insertions(+) create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js new file mode 100644 index 0000000000000..7dbe8f1f1f693 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGridPremium, + useGridApiRef, + useKeepGroupedColumnsHidden, +} from '@mui/x-data-grid-premium'; +import { useMovieData } from '@mui/x-data-grid-generator'; + +export default function ColumnAutosizingGroupedRows() { + const data = useMovieData(); + const apiRef = useGridApiRef(); + + const columns = React.useMemo(() => { + return data.columns.map((col) => ({ ...col, width: 50 })); + }, [data.columns]); + + const initialState = useKeepGroupedColumnsHidden({ + apiRef, + initialState: { rowGrouping: { model: ['company'] } }, + }); + + React.useEffect(() => { + apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + if (params.childrenExpanded) { + apiRef.current.autosizeColumns({ includeOutliers: true }); + } + }); + }, [apiRef]); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview new file mode 100644 index 0000000000000..e43fd3af6d856 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file From c837e176fe047c5b3370cc59bc64dfab22abf810 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 14 Dec 2023 08:23:26 +0100 Subject: [PATCH 3/4] Update docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx Co-authored-by: Andrew Cherniavskii Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- .../data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx index 7dbe8f1f1f693..f3f84feeb385f 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx @@ -20,7 +20,7 @@ export default function ColumnAutosizingGroupedRows() { }); React.useEffect(() => { - apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + return apiRef.current.subscribeEvent('rowExpansionChange', (params) => { if (params.childrenExpanded) { apiRef.current.autosizeColumns({ includeOutliers: true }); } From 90d1efc914d073e5d887b890351b055d4768068a Mon Sep 17 00:00:00 2001 From: michel Date: Thu, 14 Dec 2023 08:27:19 +0100 Subject: [PATCH 4/4] Update event subscription in ColumnAutosizingGroupedRows.js Added a return statement to the subscribeEvent function in the docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js file. This change is to ensure that the subscription is correctly cleaned up when the component is unmounted. --- .../data-grid/column-dimensions/ColumnAutosizingGroupedRows.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js index 7dbe8f1f1f693..f3f84feeb385f 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js @@ -20,7 +20,7 @@ export default function ColumnAutosizingGroupedRows() { }); React.useEffect(() => { - apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + return apiRef.current.subscribeEvent('rowExpansionChange', (params) => { if (params.childrenExpanded) { apiRef.current.autosizeColumns({ includeOutliers: true }); }