From 1330d752ee82af87e1ec17abd6049eb57e00734a Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 21 Nov 2024 19:02:20 +0100 Subject: [PATCH 1/8] add virtualizeColumnsWithAutoRowHeight prop --- .../VirtualizeColumnsWithAutoRowHeight.js | 49 +++++++++++++++ .../VirtualizeColumnsWithAutoRowHeight.tsx | 59 +++++++++++++++++++ ...ualizeColumnsWithAutoRowHeight.tsx.preview | 5 ++ docs/data/data-grid/row-height/row-height.md | 10 +++- .../constants/dataGridPropsDefaultValues.ts | 1 + .../virtualization/useGridVirtualScroller.tsx | 13 ++-- .../src/models/props/DataGridProps.ts | 8 +++ 7 files changed, 140 insertions(+), 5 deletions(-) create mode 100644 docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.js create mode 100644 docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx create mode 100644 docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx.preview diff --git a/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.js b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.js new file mode 100644 index 0000000000000..9d01cdcaf506a --- /dev/null +++ b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.js @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; + +function useData(rowLength, columnLength) { + const [data, setData] = React.useState({ columns: [], rows: [] }); + + React.useEffect(() => { + const rows = []; + + for (let i = 0; i < rowLength; i += 1) { + const row = { + id: i, + }; + + for (let j = 1; j <= columnLength; j += 1) { + row[`price${j}M`] = `${i.toString()}, ${j} `; + } + + rows.push(row); + } + + const columns = []; + + for (let j = 1; j <= columnLength; j += 1) { + columns.push({ field: `price${j}M`, headerName: `${j}M`, width: 55 }); + } + + setData({ + rows, + columns, + }); + }, [rowLength, columnLength]); + + return data; +} + +export default function VirtualizeColumnsWithAutoRowHeight() { + const data = useData(100, 100); + + return ( +
+ 'auto'} + virtualizeColumnsWithAutoRowHeight + /> +
+ ); +} diff --git a/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx new file mode 100644 index 0000000000000..1a76b22ee5c97 --- /dev/null +++ b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { DataGrid, GridColDef, GridRowId } from '@mui/x-data-grid'; + +export interface DataRowModel { + id: GridRowId; + [price: string]: number | string; +} + +export interface GridData { + columns: GridColDef[]; + rows: DataRowModel[]; +} + +function useData(rowLength: number, columnLength: number) { + const [data, setData] = React.useState({ columns: [], rows: [] }); + + React.useEffect(() => { + const rows: DataRowModel[] = []; + + for (let i = 0; i < rowLength; i += 1) { + const row: DataRowModel = { + id: i, + }; + + for (let j = 1; j <= columnLength; j += 1) { + row[`price${j}M`] = `${i.toString()}, ${j} `; + } + + rows.push(row); + } + + const columns: GridColDef[] = []; + + for (let j = 1; j <= columnLength; j += 1) { + columns.push({ field: `price${j}M`, headerName: `${j}M`, width: 55 }); + } + + setData({ + rows, + columns, + }); + }, [rowLength, columnLength]); + + return data; +} + +export default function VirtualizeColumnsWithAutoRowHeight() { + const data = useData(100, 100); + + return ( +
+ 'auto'} + virtualizeColumnsWithAutoRowHeight + /> +
+ ); +} diff --git a/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx.preview b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx.preview new file mode 100644 index 0000000000000..1f3efbd9e944e --- /dev/null +++ b/docs/data/data-grid/row-height/VirtualizeColumnsWithAutoRowHeight.tsx.preview @@ -0,0 +1,5 @@ + 'auto'} + virtualizeColumnsWithAutoRowHeight +/> \ No newline at end of file diff --git a/docs/data/data-grid/row-height/row-height.md b/docs/data/data-grid/row-height/row-height.md index 0d5790977d894..49aedb83e8ef6 100644 --- a/docs/data/data-grid/row-height/row-height.md +++ b/docs/data/data-grid/row-height/row-height.md @@ -54,7 +54,6 @@ This side effect happens because a row height estimation is used while a row is You can configure the estimated value used by passing a function to the `getEstimatedRowHeight` prop. If not provided, the default row height of `52px` is used as estimation. It's recommended to pass this prop if the content deviates too much from the default value. -Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time. ```tsx 'auto'} getEstimatedRowHeight={() => 200} /> @@ -78,6 +77,15 @@ Add padding to the cells to increase the space between the content and the cell ::: +### Column virtualization + +By default, the virtualization of the columns is disabled to force all columns to be rendered at the same time and calculate the row height correctly. + +If you need column virtualization, you can set the `virtualizeColumnsWithAutoRowHeight` prop to `true`. +With this approach, the Data Grid measures the row height based on the visible columns, and the row height might change during horizontal scrolling. + +{{"demo": "VirtualizeColumnsWithAutoRowHeight.js", "bg": "inline", "defaultCodeOpen": false}} + ## Row density Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable. diff --git a/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts b/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts index 689aa164e7a09..4c69790cebb67 100644 --- a/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts +++ b/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts @@ -59,4 +59,5 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { sortingOrder: ['asc' as const, 'desc' as const, null], throttleRowsMs: 0, unstable_rowSpanning: false, + virtualizeColumnsWithAutoRowHeight: false, }; diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 86435660917e7..ccd1707d75e6d 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -33,6 +33,7 @@ import type { GridRowEntry, GridRowId, } from '../../../models'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector'; import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector'; import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; @@ -640,6 +641,7 @@ type RenderContextInputs = { visibleColumns: ReturnType; hiddenCellsOriginMap: ReturnType; listView: boolean; + virtualizeColumnsWithAutoRowHeight: DataGridProcessedProps['virtualizeColumnsWithAutoRowHeight']; }; function inputsSelector( @@ -677,6 +679,7 @@ function inputsSelector( visibleColumns, hiddenCellsOriginMap, listView: rootProps.unstable_listView ?? false, + virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight, }; } @@ -740,12 +743,14 @@ function computeRenderContext( lastSize: inputs.lastRowHeight, }); - for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) { - const row = inputs.rows[i]; - hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id); + if (!inputs.virtualizeColumnsWithAutoRowHeight) { + for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) { + const row = inputs.rows[i]; + hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id); + } } - if (!hasRowWithAutoHeight) { + if (!hasRowWithAutoHeight || inputs.virtualizeColumnsWithAutoRowHeight) { firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, { atStart: true, lastPosition: inputs.columnsTotalWidth, diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index b35fa21f220ec..119890e262a0c 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -396,6 +396,14 @@ export interface DataGridPropsWithDefaultValues 'auto'`. + * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. + * For datasets with a large number of columns, this can cause performance issues. + * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. + * @default false + */ + virtualizeColumnsWithAutoRowHeight: boolean; } /** From 6567d6afeee6dcf96c871ca8acd6dab93821a778 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 21 Nov 2024 19:03:39 +0100 Subject: [PATCH 2/8] proptypes --- .../src/DataGridPremium/DataGridPremium.tsx | 8 ++++++++ packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 8 ++++++++ packages/x-data-grid/src/DataGrid/DataGrid.tsx | 8 ++++++++ 3 files changed, 24 insertions(+) diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 0f05ca94e442d..f786d133475c0 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1127,6 +1127,14 @@ DataGridPremiumRaw.propTypes = { * @default false */ unstable_rowSpanning: PropTypes.bool, + /** + * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. + * For datasets with a large number of columns, this can cause performance issues. + * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. + * @default false + */ + virtualizeColumnsWithAutoRowHeight: PropTypes.bool, } as any; interface DataGridPremiumComponent { diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index cf10a788ce68c..3d6f037b8e83d 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -1026,4 +1026,12 @@ DataGridProRaw.propTypes = { * @default false */ unstable_rowSpanning: PropTypes.bool, + /** + * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. + * For datasets with a large number of columns, this can cause performance issues. + * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. + * @default false + */ + virtualizeColumnsWithAutoRowHeight: PropTypes.bool, } as any; diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index ccda733ed0deb..f8c52a0b2de71 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -821,4 +821,12 @@ DataGridRaw.propTypes = { * @default false */ unstable_rowSpanning: PropTypes.bool, + /** + * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. + * For datasets with a large number of columns, this can cause performance issues. + * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. + * @default false + */ + virtualizeColumnsWithAutoRowHeight: PropTypes.bool, } as any; From 060afa300479c0a5abf82fbef510f47bf538373e Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 21 Nov 2024 19:04:42 +0100 Subject: [PATCH 3/8] docs:api --- docs/pages/x/api/data-grid/data-grid-premium.json | 3 ++- docs/pages/x/api/data-grid/data-grid-pro.json | 3 ++- docs/pages/x/api/data-grid/data-grid.json | 3 ++- .../data-grid/data-grid-premium/data-grid-premium.json | 3 +++ .../api-docs/data-grid/data-grid-pro/data-grid-pro.json | 3 +++ docs/translations/api-docs/data-grid/data-grid/data-grid.json | 3 +++ 6 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index ec134312c970d..9ff7f2a9fa168 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -656,7 +656,8 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" } + "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, + "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPremium", "imports": [ diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 8fba87d572249..a9c20e034d280 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -587,7 +587,8 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" } + "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, + "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPro", "imports": [ diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index caf8c0b7d0357..1ba100f4aaf5e 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -485,7 +485,8 @@ }, "additionalInfo": { "sx": true } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" } + "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, + "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGrid", "imports": [ diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 8879a0ba952c8..301e8763d5a17 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -669,6 +669,9 @@ }, "unstable_rowSpanning": { "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, + "virtualizeColumnsWithAutoRowHeight": { + "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index c56adbe4fb0be..e640763616795 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -607,6 +607,9 @@ }, "unstable_rowSpanning": { "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, + "virtualizeColumnsWithAutoRowHeight": { + "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 77ba99fb40302..63a6d11fd7c3d 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -487,6 +487,9 @@ }, "unstable_rowSpanning": { "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, + "virtualizeColumnsWithAutoRowHeight": { + "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { From 29c845487bd91679811be7ce29e5f04ccd7a9777 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 21 Nov 2024 19:05:32 +0100 Subject: [PATCH 4/8] make sure focused cell out if view doesn't increase row height --- packages/x-data-grid/src/components/cell/GridCell.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx index f81ba9e89e3d5..54511abba199e 100644 --- a/packages/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridCell.tsx @@ -343,6 +343,7 @@ const GridCell = React.forwardRef(function GridCe padding: 0, opacity: 0, width: 0, + height: 0, border: 0, }; } From 717444c5682d161dc68e25b5ccbaab863503d850 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 22 Nov 2024 11:45:16 +0100 Subject: [PATCH 5/8] show demo preview --- docs/data/data-grid/row-height/row-height.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/row-height/row-height.md b/docs/data/data-grid/row-height/row-height.md index 49aedb83e8ef6..ba54ae50a3359 100644 --- a/docs/data/data-grid/row-height/row-height.md +++ b/docs/data/data-grid/row-height/row-height.md @@ -84,7 +84,7 @@ By default, the virtualization of the columns is disabled to force all columns t If you need column virtualization, you can set the `virtualizeColumnsWithAutoRowHeight` prop to `true`. With this approach, the Data Grid measures the row height based on the visible columns, and the row height might change during horizontal scrolling. -{{"demo": "VirtualizeColumnsWithAutoRowHeight.js", "bg": "inline", "defaultCodeOpen": false}} +{{"demo": "VirtualizeColumnsWithAutoRowHeight.js", "bg": "inline" }} ## Row density From c5f39d5953d08806b00644b9ce4dc08e440e5fc6 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sat, 23 Nov 2024 12:54:50 +0100 Subject: [PATCH 6/8] update docs --- docs/data/data-grid/row-height/row-height.md | 4 +++- .../data-grid/data-grid-premium/data-grid-premium.json | 2 +- .../api-docs/data-grid/data-grid-pro/data-grid-pro.json | 2 +- docs/translations/api-docs/data-grid/data-grid/data-grid.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 2 +- packages/x-data-grid/src/DataGrid/DataGrid.tsx | 2 +- packages/x-data-grid/src/models/props/DataGridProps.ts | 2 +- 8 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/data/data-grid/row-height/row-height.md b/docs/data/data-grid/row-height/row-height.md index ba54ae50a3359..fa5a34a72a4c5 100644 --- a/docs/data/data-grid/row-height/row-height.md +++ b/docs/data/data-grid/row-height/row-height.md @@ -80,9 +80,11 @@ Add padding to the cells to increase the space between the content and the cell ### Column virtualization By default, the virtualization of the columns is disabled to force all columns to be rendered at the same time and calculate the row height correctly. +However, this can lead to poor performance when rendering a lot of columns. If you need column virtualization, you can set the `virtualizeColumnsWithAutoRowHeight` prop to `true`. -With this approach, the Data Grid measures the row height based on the visible columns, and the row height might change during horizontal scrolling. +With this approach, the Data Grid measures the row height based on the visible columns. +However, the row height might change during horizontal scrolling. {{"demo": "VirtualizeColumnsWithAutoRowHeight.js", "bg": "inline" }} diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 9ead870d3f284..f28eb0895d65d 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -671,7 +671,7 @@ "description": "If true, the Data Grid will auto span the cells over the rows having the same value." }, "virtualizeColumnsWithAutoRowHeight": { - "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." + "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index b1ed58c1c03b6..c39f3dd3c28e0 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -609,7 +609,7 @@ "description": "If true, the Data Grid will auto span the cells over the rows having the same value." }, "virtualizeColumnsWithAutoRowHeight": { - "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." + "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index be76b8197a2b4..d0a980e2258c4 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -489,7 +489,7 @@ "description": "If true, the Data Grid will auto span the cells over the rows having the same value." }, "virtualizeColumnsWithAutoRowHeight": { - "description": "If true, the Data Grid doesn't disable column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." + "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } }, "classDescriptions": { diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index f786d133475c0..0566094f468a3 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1128,7 +1128,7 @@ DataGridPremiumRaw.propTypes = { */ unstable_rowSpanning: PropTypes.bool, /** - * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. * For datasets with a large number of columns, this can cause performance issues. * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 3d6f037b8e83d..206d7489f3ddc 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -1027,7 +1027,7 @@ DataGridProRaw.propTypes = { */ unstable_rowSpanning: PropTypes.bool, /** - * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. * For datasets with a large number of columns, this can cause performance issues. * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index f8c52a0b2de71..2c33f6ec8e70c 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -822,7 +822,7 @@ DataGridRaw.propTypes = { */ unstable_rowSpanning: PropTypes.bool, /** - * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. + * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. * For datasets with a large number of columns, this can cause performance issues. * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 119890e262a0c..abf591bedcd50 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -397,7 +397,7 @@ export interface DataGridPropsWithDefaultValues 'auto'`. + * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. * For datasets with a large number of columns, this can cause performance issues. * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. From 0399ea38cb13bd9a28561438a6912f9fbae04294 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sat, 23 Nov 2024 13:09:47 +0100 Subject: [PATCH 7/8] correct the virtualization docs --- docs/data/data-grid/virtualization/virtualization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/virtualization/virtualization.md b/docs/data/data-grid/virtualization/virtualization.md index 46efb8f1de521..dcbf57618c49d 100644 --- a/docs/data/data-grid/virtualization/virtualization.md +++ b/docs/data/data-grid/virtualization/virtualization.md @@ -31,7 +31,7 @@ By default, columns coming under 150 pixels region are rendered outside of the v {{"demo": "ColumnVirtualizationGrid.js", "bg": "inline"}} -You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the column buffer to the number of total columns. +You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the [`columnBufferPx`](/x/api/data-grid/data-grid/#data-grid-prop-columnBufferPx) to a high value. ## Disable virtualization From 6c6b0267cc0d0b46b7d6ca6fc6cef0cc423aadc0 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sat, 23 Nov 2024 13:14:36 +0100 Subject: [PATCH 8/8] link from the column virtualization docs --- docs/data/data-grid/virtualization/virtualization.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/data/data-grid/virtualization/virtualization.md b/docs/data/data-grid/virtualization/virtualization.md index dcbf57618c49d..3dc949818c958 100644 --- a/docs/data/data-grid/virtualization/virtualization.md +++ b/docs/data/data-grid/virtualization/virtualization.md @@ -33,6 +33,11 @@ By default, columns coming under 150 pixels region are rendered outside of the v You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the [`columnBufferPx`](/x/api/data-grid/data-grid/#data-grid-prop-columnBufferPx) to a high value. +:::info +Column virtualization is disabled when dynamic row height is enabled. +See [dynamic row height and column virtualization](/x/react-data-grid/row-height/#column-virtualization) to learn more. +::: + ## Disable virtualization The virtualization can be disabled completely using the `disableVirtualization` prop.