mui · romgrk · Mar 20, 2024 · Mar 6, 2024 · Mar 6, 2024 · Mar 7, 2024
diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js
@@ -301,7 +301,7 @@ export default function FullFeaturedDemo() {
         loading={loading}
         checkboxSelection
         disableRowSelectionOnClick
-        rowThreshold={0}
+        rowThresholdPx={0}
         initialState={{
           ...data.initialState,
           pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] },

diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx
@@ -341,7 +341,7 @@ export default function FullFeaturedDemo() {
         loading={loading}
         checkboxSelection
         disableRowSelectionOnClick
-        rowThreshold={0}
+        rowThresholdPx={0}
         initialState={{
           ...data.initialState,
           pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] },

diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js
@@ -175,7 +175,7 @@ export default function BasicDetailPanels() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx
@@ -177,7 +177,7 @@ export default function BasicDetailPanels() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview
@@ -1,7 +1,7 @@
 <DataGridPro
   columns={columns}
   rows={rows}
-  rowThreshold={0}
+  rowThresholdPx={0}
   getDetailPanelHeight={getDetailPanelHeight}
   getDetailPanelContent={getDetailPanelContent}
 />
diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.js b/docs/data/data-grid/master-detail/ControlMasterDetail.js
@@ -29,7 +29,7 @@ export default function ControlMasterDetail() {
         <DataGridPro
           rows={rows}
           columns={columns}
-          rowThreshold={0}
+          rowThresholdPx={0}
           getDetailPanelContent={({ row }) => (
             <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>
           )}

diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx
@@ -37,7 +37,7 @@ export default function ControlMasterDetail() {
         <DataGridPro
           rows={rows}
           columns={columns}
-          rowThreshold={0}
+          rowThresholdPx={0}
           getDetailPanelContent={({ row }) => (
             <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>
           )}

diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js
@@ -30,7 +30,7 @@ export default function CustomizeDetailPanelToggle() {
       <DataGridPro
         rows={rows}
         columns={columns}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelContent={getDetailPanelContent}
         getDetailPanelHeight={getDetailPanelHeight}
       />

diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx
@@ -34,7 +34,7 @@ export default function CustomizeDetailPanelToggle() {
       <DataGridPro
         rows={rows}
         columns={columns}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelContent={getDetailPanelContent}
         getDetailPanelHeight={getDetailPanelHeight}
       />

diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview
@@ -1,7 +1,7 @@
 <DataGridPro
   rows={rows}
   columns={columns}
-  rowThreshold={0}
+  rowThresholdPx={0}
   getDetailPanelContent={getDetailPanelContent}
   getDetailPanelHeight={getDetailPanelHeight}
 />
diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js
@@ -228,7 +228,7 @@ export default function DetailPanelAutoHeight() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx
@@ -234,7 +234,7 @@ export default function DetailPanelAutoHeight() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview
@@ -1,7 +1,7 @@
 <DataGridPro
   columns={columns}
   rows={rows}
-  rowThreshold={0}
+  rowThresholdPx={0}
   getDetailPanelHeight={getDetailPanelHeight}
   getDetailPanelContent={getDetailPanelContent}
 />
diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.js b/docs/data/data-grid/master-detail/FormDetailPanel.js
@@ -131,7 +131,7 @@ export default function FormDetailPanel() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx b/docs/data/data-grid/master-detail/FormDetailPanel.tsx
@@ -139,7 +139,7 @@ export default function FormDetailPanel() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
       />

diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview
@@ -1,7 +1,7 @@
 <DataGridPro
   columns={columns}
   rows={rows}
-  rowThreshold={0}
+  rowThresholdPx={0}
   getDetailPanelHeight={getDetailPanelHeight}
   getDetailPanelContent={getDetailPanelContent}
 />
diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
@@ -201,7 +201,7 @@ export default function FullWidthDetailPanel() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         pinnedColumns={{ left: [GRID_DETAIL_PANEL_TOGGLE_FIELD] }}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}

diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
@@ -205,7 +205,7 @@ export default function FullWidthDetailPanel() {
       <DataGridPro
         columns={columns}
         rows={rows}
-        rowThreshold={0}
+        rowThresholdPx={0}
         pinnedColumns={{ left: [GRID_DETAIL_PANEL_TOGGLE_FIELD] }}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}

diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview
@@ -1,7 +1,7 @@
 <DataGridPro
   columns={columns}
   rows={rows}
-  rowThreshold={0}
+  rowThresholdPx={0}
   pinnedColumns={{ left: [GRID_DETAIL_PANEL_TOGGLE_FIELD] }}
   getDetailPanelHeight={getDetailPanelHeight}
   getDetailPanelContent={getDetailPanelContent}

diff --git a/docs/data/data-grid/master-detail/master-detail.md b/docs/data/data-grid/master-detail/master-detail.md
@@ -51,11 +51,11 @@ const getDetailPanelContent = React.useCallback(() => { ... }, []);
 
 Depending on the height of the detail panel, you may see a blank space when scrolling.
 This is caused by the data grid using a lazy approach to update the rendered rows.
-Set `rowThreshold` to 0 to force new rows to be rendered more often to fill the blank space.
+Set `rowThresholdPx` to a lower value to force new rows to be rendered more often to fill the blank space.
 Note that this may reduce the performance.
 
 ```tsx
-<DataGridPro rowThreshold={0} />
+<DataGridPro rowThresholdPx={20} />
 ```
 
 :::

diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js
@@ -39,7 +39,7 @@ export default function ColumnVirtualizationGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid {...data} columnBuffer={2} columnThreshold={2} />
+      <DataGrid {...data} columnBufferPx={100} columnThresholdPx={100} />
     </div>
   );
 }
diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx
@@ -49,7 +49,7 @@ export default function ColumnVirtualizationGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid {...data} columnBuffer={2} columnThreshold={2} />
+      <DataGrid {...data} columnBufferPx={100} columnThresholdPx={100} />
     </div>
   );
 }
diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview
@@ -1 +1 @@
-<DataGrid {...data} columnBuffer={2} columnThreshold={2} />
+<DataGrid {...data} columnBufferPx={100} columnThresholdPx={100} />
diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
@@ -106,9 +106,10 @@ As a result, the following changes have been made:
 - Pinned row and column sections are now contained in the virtual scroller.
 - The cell inner wrapper `.MuiDataGrid-cellContent` has been removed.
 
-<!-- ### Renamed props
+## Renamed props
 
-- -->
+- The props `rowBuffer`, `columnBuffer`, `rowThreshold` and `columnThreshold` were renamed to `rowBufferPx`, `columnBufferPx`, `rowThresholdPx` and `columnThresholdPx`.
+  Their value is now a pixel value rather than a number of items. Their default value is now `150`.
 
 ### Removed props
 

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -36,9 +36,9 @@
     "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
-    "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnBufferPx": { "type": { "name": "number" }, "default": "100" },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
-    "columnThreshold": { "type": { "name": "number" }, "default": "3" },
+    "columnThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },
     "density": {
@@ -541,7 +541,7 @@
         "returned": "Promise<R> | R"
       }
     },
-    "rowBuffer": { "type": { "name": "number" }, "default": "3" },
+    "rowBufferPx": { "type": { "name": "number" }, "default": "100" },
     "rowCount": { "type": { "name": "number" } },
     "rowGroupingColumnMode": {
       "type": { "name": "enum", "description": "'multiple'<br>&#124;&nbsp;'single'" },
@@ -566,7 +566,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
       "default": "\"margin\""
     },
-    "rowThreshold": { "type": { "name": "number" }, "default": "3" },
+    "rowThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "scrollbarSize": { "type": { "name": "number" } },
     "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" },
     "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -25,9 +25,9 @@
     "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
-    "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnBufferPx": { "type": { "name": "number" }, "default": "100" },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
-    "columnThreshold": { "type": { "name": "number" }, "default": "3" },
+    "columnThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },
     "density": {
@@ -488,7 +488,7 @@
         "returned": "Promise<R> | R"
       }
     },
-    "rowBuffer": { "type": { "name": "number" }, "default": "3" },
+    "rowBufferPx": { "type": { "name": "number" }, "default": "100" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
     "rowModesModel": { "type": { "name": "object" } },
@@ -508,7 +508,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
       "default": "\"margin\""
     },
-    "rowThreshold": { "type": { "name": "number" }, "default": "3" },
+    "rowThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "scrollbarSize": { "type": { "name": "number" } },
     "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" },
     "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -17,9 +17,9 @@
     "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
-    "columnBuffer": { "type": { "name": "number" }, "default": "3" },
+    "columnBufferPx": { "type": { "name": "number" }, "default": "100" },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
-    "columnThreshold": { "type": { "name": "number" }, "default": "3" },
+    "columnThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "density": {
       "type": {
@@ -379,7 +379,7 @@
         "returned": "Promise<R> | R"
       }
     },
-    "rowBuffer": { "type": { "name": "number" }, "default": "3" },
+    "rowBufferPx": { "type": { "name": "number" }, "default": "100" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
     "rowModesModel": { "type": { "name": "object" } },
@@ -395,7 +395,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
       "default": "\"margin\""
     },
-    "rowThreshold": { "type": { "name": "number" }, "default": "3" },
+    "rowThresholdPx": { "type": { "name": "number" }, "default": "150" },
     "scrollbarSize": { "type": { "name": "number" } },
     "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" },
     "showColumnVerticalBorder": { "type": { "name": "bool" }, "default": "false" },

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
@@ -36,16 +36,14 @@
     "clipboardCopyCellDelimiter": {
       "description": "The character used to separate cell values when copying to the clipboard."
     },
-    "columnBuffer": {
-      "description": "Number of extra columns to be rendered before/after the visible slice."
-    },
+    "columnBufferPx": { "description": "Column region to render before/after the viewport" },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },
     "columns": {
       "description": "Set of columns of type <a href='/x/api/data-grid/grid-col-def/'>GridColDef</a>[]."
     },
-    "columnThreshold": {
+    "columnThresholdPx": {
       "description": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered."
     },
     "columnVisibilityModel": {
@@ -566,9 +564,7 @@
         "Promise<R> | R": "The final values to update the row."
       }
     },
-    "rowBuffer": {
-      "description": "Number of extra rows to be rendered before/after the visible slice."
-    },
+    "rowBufferPx": { "description": "Row region to render before/after the viewport" },
     "rowCount": {
       "description": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows."
     },
@@ -591,7 +587,7 @@
     "rowSpacingType": {
       "description": "Sets the type of space between rows added by <code>getRowSpacing</code>."
     },
-    "rowThreshold": {
+    "rowThresholdPx": {
       "description": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered."
     },
     "scrollbarSize": {

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
@@ -29,16 +29,14 @@
     "clipboardCopyCellDelimiter": {
       "description": "The character used to separate cell values when copying to the clipboard."
     },
-    "columnBuffer": {
-      "description": "Number of extra columns to be rendered before/after the visible slice."
-    },
+    "columnBufferPx": { "description": "Column region to render before/after the viewport" },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },
     "columns": {
       "description": "Set of columns of type <a href='/x/api/data-grid/grid-col-def/'>GridColDef</a>[]."
     },
-    "columnThreshold": {
+    "columnThresholdPx": {
       "description": "Number of rows from the <code>columnBuffer</code> that can be visible before a new slice is rendered."
     },
     "columnVisibilityModel": {
@@ -516,9 +514,7 @@
         "Promise<R> | R": "The final values to update the row."
       }
     },
-    "rowBuffer": {
-      "description": "Number of extra rows to be rendered before/after the visible slice."
-    },
+    "rowBufferPx": { "description": "Row region to render before/after the viewport" },
     "rowCount": {
       "description": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows."
     },
@@ -537,7 +533,7 @@
     "rowSpacingType": {
       "description": "Sets the type of space between rows added by <code>getRowSpacing</code>."
     },
-    "rowThreshold": {
+    "rowThresholdPx": {
       "description": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered."
     },
     "scrollbarSize": {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<DataGrid {...data} columnBuffer={2} columnThreshold={2} />
		<DataGrid {...data} columnBufferPx={100} columnThresholdPx={100} />