[DataGrid] Make data source stable

docs/data/data-grid/prompt/PromptWithDataSource.js

@@ -72,7 +72,7 @@ export default function PromptWithDataSource() {
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/prompt/PromptWithDataSource.tsx

@@ -73,7 +73,7 @@ export default function PromptWithDataSource() {
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/prompt/PromptWithDataSource.tsx.preview

@@ -1,6 +1,6 @@
 <DataGridPremium
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   pagination
   initialState={initialStateWithPagination}
   pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/row-grouping/row-grouping.md

@@ -241,7 +241,7 @@ If you want to expand the whole tree, set `defaultGroupingExpansionDepth = -1`
 
 {{"demo": "RowGroupingDefaultExpansionDepth.js", "bg": "inline", "defaultCodeOpen": false}}
 
-If you want to expand groups by default according to a more complex logic, use the `isGroupExpandedByDefault` prop which is a callback receiving the node as an argument.
+If you want to expand groups by default according to a more complex logic, use the `isGroupExpandedByDefault()` prop which is a callback receiving the node as an argument.
 When defined, this callback will always have priority over the `defaultGroupingExpansionDepth` prop.
 
 ```tsx
@@ -252,12 +252,12 @@ isGroupExpandedByDefault={
 
 {{"demo": "RowGroupingIsGroupExpandedByDefault.js", "bg": "inline", "defaultCodeOpen": false}}
 
-Use the `setRowChildrenExpansion` method on `apiRef` to programmatically set the expansion of a row. Changing the expansion of a row emits a `rowExpansionChange` event, listen to it to react to the expansion change.
+Use the `setRowChildrenExpansion()` method on `apiRef` to programmatically set the expansion of a row. Changing the expansion of a row emits a `rowExpansionChange` event, listen to it to react to the expansion change.
 
 {{"demo": "RowGroupingSetChildrenExpansion.js", "bg": "inline", "defaultCodeOpen": false}}
 
 :::warning
-The `apiRef.current.setRowChildrenExpansion` method is not compatible with the [server-side tree data](/x/react-data-grid/server-side-data/tree-data/) and [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/). Use `apiRef.current.unstable_dataSource.fetchRows` instead.
+The `apiRef.current.setRowChildrenExpansion()` method is not compatible with the [server-side tree data](/x/react-data-grid/server-side-data/tree-data/) and [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/). Use `apiRef.current.dataSource.fetchRows()` instead.
 :::
 
 ### Customize grouping cell indent

docs/data/data-grid/row-updates/row-updates.md

@@ -39,6 +39,10 @@ Multiple row updates at a time are supported in [Pro](/x/introduction/licensing/
 
 ## Infinite loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
+:::warning
+This feature is deprecated, use the [Server-side data—Infinite loading](/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading) instead.
+:::
+
 The grid provides a `onRowsScrollEnd` prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
 
 In addition, the area in which `onRowsScrollEnd` is called can be changed using `scrollEndThreshold`.
@@ -52,6 +56,10 @@ Otherwise, the sorting and filtering will only be applied to the subset of rows
 
 ## Lazy loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
+:::warning
+This feature is deprecated, use the [Server-side data—Viewport loading](/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) instead.
+:::
+
 Lazy Loading works like a pagination system, but instead of loading new rows based on pages, it loads them based on the viewport.
 It loads new rows in chunks, as the user scrolls through the Data Grid and reveals empty rows.
 

docs/data/data-grid/server-side-data/ServerSideDataGrid.js

@@ -32,7 +32,7 @@ export default function ServerSideDataGrid() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGrid
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={{
           ...initialState,

docs/data/data-grid/server-side-data/ServerSideDataGrid.tsx

@@ -32,7 +32,7 @@ export default function ServerSideDataGrid() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGrid
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={{
           ...initialState,

docs/data/data-grid/server-side-data/ServerSideDataGrid.tsx.preview

@@ -1,6 +1,6 @@
 <DataGrid
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   pagination
   initialState={{
     ...initialState,

docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.js

@@ -59,7 +59,7 @@ export default function ServerSideDataGridAggregation() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx

@@ -63,7 +63,7 @@ export default function ServerSideDataGridAggregation() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx.preview

@@ -1,6 +1,6 @@
 <DataGridPremium
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   pagination
   initialState={initialStateWithPagination}
   pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.js

@@ -46,15 +46,15 @@ export default function ServerSideDataGridAggregationLazyLoading() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         initialState={{
           ...initialState,
           pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
           aggregation: {
             model: { commodity: 'size', quantity: 'sum' },
           },
         }}
-        unstable_lazyLoading
+        lazyLoading
         aggregationFunctions={aggregationFunctions}
       />
     </div>

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx

@@ -50,15 +50,15 @@ export default function ServerSideDataGridAggregationLazyLoading() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         initialState={{
           ...initialState,
           pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
           aggregation: {
             model: { commodity: 'size', quantity: 'sum' },
           },
         }}
-        unstable_lazyLoading
+        lazyLoading
         aggregationFunctions={aggregationFunctions}
       />
     </div>

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview

@@ -1,13 +1,13 @@
 <DataGridPremium
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   initialState={{
     ...initialState,
     pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
     aggregation: {
       model: { commodity: 'size', quantity: 'sum' },
     },
   }}
-  unstable_lazyLoading
+  lazyLoading
   aggregationFunctions={aggregationFunctions}
 />

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.js

@@ -65,7 +65,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
       <DataGridPremium
         apiRef={apiRef}
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         initialState={initialStateUpdated}
         aggregationFunctions={aggregationFunctions}
       />

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx

@@ -67,7 +67,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
       <DataGridPremium
         apiRef={apiRef}
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         initialState={initialStateUpdated}
         aggregationFunctions={aggregationFunctions}
       />

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationRowGrouping.tsx.preview

@@ -1,7 +1,7 @@
 <DataGridPremium
   apiRef={apiRef}
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   initialState={initialStateUpdated}
   aggregationFunctions={aggregationFunctions}
 />

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.js

@@ -50,7 +50,7 @@ export default function ServerSideDataGridAggregationTreeData() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         treeData
         apiRef={apiRef}
         initialState={{

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.tsx

@@ -56,7 +56,7 @@ export default function ServerSideDataGridAggregationTreeData() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
-        unstable_dataSource={dataSource}
+        dataSource={dataSource}
         treeData
         apiRef={apiRef}
         initialState={{

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationTreeData.tsx.preview

@@ -1,6 +1,6 @@
 <DataGridPremium
   columns={columns}
-  unstable_dataSource={dataSource}
+  dataSource={dataSource}
   treeData
   apiRef={apiRef}
   initialState={{

docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.js

@@ -49,8 +49,8 @@ export default function ServerSideDataGridNoCache() {
       <DataGrid
         initialState={initialStateWithPagination}
         columns={columns}
-        unstable_dataSource={dataSource}
-        unstable_dataSourceCache={null}
+        dataSource={dataSource}
+        dataSourceCache={null}
         pagination
         pageSizeOptions={pageSizeOptions}
       />

docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx

@@ -49,8 +49,8 @@ export default function ServerSideDataGridNoCache() {
       <DataGrid
         initialState={initialStateWithPagination}
         columns={columns}
-        unstable_dataSource={dataSource}
-        unstable_dataSourceCache={null}
+        dataSource={dataSource}
+        dataSourceCache={null}
         pagination
         pageSizeOptions={pageSizeOptions}
       />

docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx.preview

@@ -1,8 +1,8 @@
 <DataGrid
   initialState={initialStateWithPagination}
   columns={columns}
-  unstable_dataSource={dataSource}
-  unstable_dataSourceCache={null}
+  dataSource={dataSource}
+  dataSourceCache={null}
   pagination
   pageSizeOptions={pageSizeOptions}
 />

docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js

@@ -45,8 +45,8 @@ export default function ServerSideDataGridTTL() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGrid
         columns={columns}
-        unstable_dataSource={dataSource}
-        unstable_dataSourceCache={lowTTLCache}
+        dataSource={dataSource}
+        dataSourceCache={lowTTLCache}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideDataGridTTL.tsx

@@ -49,8 +49,8 @@ export default function ServerSideDataGridTTL() {
     <div style={{ width: '100%', height: 400 }}>
       <DataGrid
         columns={columns}
-        unstable_dataSource={dataSource}
-        unstable_dataSourceCache={lowTTLCache}
+        dataSource={dataSource}
+        dataSourceCache={lowTTLCache}
         pagination
         initialState={initialStateWithPagination}
         pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideDataGridTTL.tsx.preview

@@ -1,7 +1,7 @@
 <DataGrid
   columns={columns}
-  unstable_dataSource={dataSource}
-  unstable_dataSourceCache={lowTTLCache}
+  dataSource={dataSource}
+  dataSourceCache={lowTTLCache}
   pagination
   initialState={initialStateWithPagination}
   pageSizeOptions={[10, 20, 50]}

docs/data/data-grid/server-side-data/ServerSideErrorHandling.js

@@ -85,7 +85,7 @@ export default function ServerSideErrorHandling() {
         <Button
           onClick={() => {
             setError('');
-            apiRef.current?.unstable_dataSource.fetchRows();
+            apiRef.current?.dataSource.fetchRows();
           }}
         >
           Refetch rows
@@ -103,11 +103,9 @@ export default function ServerSideErrorHandling() {
       <div style={{ height: 400, position: 'relative' }}>
         <DataGrid
           {...props}
-          unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(dataSourceError) =>
-            setError(dataSourceError.message)
-          }
-          unstable_dataSourceCache={null}
+          dataSource={dataSource}
+          onDataSourceError={(dataSourceError) => setError(dataSourceError.message)}
+          dataSourceCache={null}
           apiRef={apiRef}
           pagination
           pageSizeOptions={pageSizeOptions}

docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx

@@ -90,7 +90,7 @@ export default function ServerSideErrorHandling() {
         <Button
           onClick={() => {
             setError('');
-            apiRef.current?.unstable_dataSource.fetchRows();
+            apiRef.current?.dataSource.fetchRows();
           }}
         >
           Refetch rows
@@ -108,11 +108,9 @@ export default function ServerSideErrorHandling() {
       <div style={{ height: 400, position: 'relative' }}>
         <DataGrid
           {...props}
-          unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(dataSourceError) =>
-            setError(dataSourceError.message)
-          }
-          unstable_dataSourceCache={null}
+          dataSource={dataSource}
+          onDataSourceError={(dataSourceError) => setError(dataSourceError.message)}
+          dataSourceCache={null}
           apiRef={apiRef}
           pagination
           pageSizeOptions={pageSizeOptions}

docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js

@@ -83,25 +83,22 @@ function ServerSideLazyLoadingErrorHandling() {
           <ErrorSnackbar
             open={!!retryParams}
             onRetry={() => {
-              apiRef.current?.unstable_dataSource.fetchRows(
-                GRID_ROOT_GROUP_ID,
-                retryParams,
-              );
+              apiRef.current?.dataSource.fetchRows(GRID_ROOT_GROUP_ID, retryParams);
               setRetryParams(null);
             }}
           />
         )}
         <DataGridPro
           {...props}
           apiRef={apiRef}
-          unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(error) => {
+          dataSource={dataSource}
+          onDataSourceError={(error) => {
             if (error instanceof GridGetRowsError) {
               setRetryParams(error.params);
             }
           }}
-          unstable_dataSourceCache={null}
-          unstable_lazyLoading
+          dataSourceCache={null}
+          lazyLoading
           paginationModel={{ page: 0, pageSize: 10 }}
           showToolbar
         />