[DataGrid] Make base data source available in the Community plan

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGrid } from '@mui/x-data-grid';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 export default function ServerSideDataGrid() {
@@ -28,24 +28,16 @@ export default function ServerSideDataGrid() {
     [fetchRows],
   );
 
-  const initialStateWithPagination = React.useMemo(
-    () => ({
-      ...initialState,
-      pagination: {
-        paginationModel: { pageSize: 10, page: 0 },
-        rowCount: 0,
-      },
-    }),
-    [initialState],
-  );
-
   return (
     <div style={{ width: '100%', height: 400 }}>
-      <DataGridPro
+      <DataGrid
         columns={columns}
         unstable_dataSource={dataSource}
         pagination
-        initialState={initialStateWithPagination}
+        initialState={{
+          ...initialState,
+          pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
+        }}
         pageSizeOptions={[10, 20, 50]}
       />
     </div>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
+import { DataGrid, GridDataSource } from '@mui/x-data-grid';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 export default function ServerSideDataGrid() {
@@ -28,24 +28,16 @@ export default function ServerSideDataGrid() {
     [fetchRows],
   );
 
-  const initialStateWithPagination = React.useMemo(
-    () => ({
-      ...initialState,
-      pagination: {
-        paginationModel: { pageSize: 10, page: 0 },
-        rowCount: 0,
-      },
-    }),
-    [initialState],
-  );
-
   return (
     <div style={{ width: '100%', height: 400 }}>
-      <DataGridPro
+      <DataGrid
         columns={columns}
         unstable_dataSource={dataSource}
         pagination
-        initialState={initialStateWithPagination}
+        initialState={{
+          ...initialState,
+          pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
+        }}
         pageSizeOptions={[10, 20, 50]}
       />
     </div>

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

@@ -1,7 +1,10 @@
-<DataGridPro
+<DataGrid
   columns={columns}
   unstable_dataSource={dataSource}
   pagination
-  initialState={initialStateWithPagination}
+  initialState={{
+    ...initialState,
+    pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
+  }}
   pageSizeOptions={[10, 20, 50]}
 />

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

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
+import {
+  DataGridPremium,
+  GridDataSource,
+  GridGetRowsResponse,
+} from '@mui/x-data-grid-premium';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 const aggregationFunctions = {
@@ -11,7 +15,7 @@ const aggregationFunctions = {
 };
 
 export default function ServerSideDataGridAggregation() {
-  const { columns, initialState, fetchRows } = useMockServer(
+  const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>(
     {},
     { useCursorPagination: false },
   );

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

@@ -11,11 +11,10 @@ const aggregationFunctions = {
 };
 
 export default function ServerSideDataGridAggregationLazyLoading() {
-  const {
-    columns,
-    initialState: initState,
-    fetchRows,
-  } = useMockServer({}, { useCursorPagination: false });
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
 
   const dataSource = React.useMemo(
     () => ({
@@ -43,26 +42,18 @@ export default function ServerSideDataGridAggregationLazyLoading() {
     [fetchRows],
   );
 
-  const initialState = React.useMemo(
-    () => ({
-      ...initState,
-      pagination: {
-        paginationModel: { pageSize: 10, page: 0 },
-        rowCount: 0,
-      },
-      aggregation: {
-        model: { commodity: 'size', quantity: 'sum' },
-      },
-    }),
-    [initState],
-  );
-
   return (
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
         unstable_dataSource={dataSource}
-        initialState={initialState}
+        initialState={{
+          ...initialState,
+          pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
+          aggregation: {
+            model: { commodity: 'size', quantity: 'sum' },
+          },
+        }}
         unstable_lazyLoading
         aggregationFunctions={aggregationFunctions}
       />

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

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
+import {
+  DataGridPremium,
+  GridDataSource,
+  GridGetRowsResponse,
+} from '@mui/x-data-grid-premium';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 const aggregationFunctions = {
@@ -11,11 +15,10 @@ const aggregationFunctions = {
 };
 
 export default function ServerSideDataGridAggregationLazyLoading() {
-  const {
-    columns,
-    initialState: initState,
-    fetchRows,
-  } = useMockServer({}, { useCursorPagination: false });
+  const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>(
+    {},
+    { useCursorPagination: false },
+  );
 
   const dataSource: GridDataSource = React.useMemo(
     () => ({
@@ -43,26 +46,18 @@ export default function ServerSideDataGridAggregationLazyLoading() {
     [fetchRows],
   );
 
-  const initialState = React.useMemo(
-    () => ({
-      ...initState,
-      pagination: {
-        paginationModel: { pageSize: 10, page: 0 },
-        rowCount: 0,
-      },
-      aggregation: {
-        model: { commodity: 'size', quantity: 'sum' },
-      },
-    }),
-    [initState],
-  );
-
   return (
     <div style={{ width: '100%', height: 400 }}>
       <DataGridPremium
         columns={columns}
         unstable_dataSource={dataSource}
-        initialState={initialState}
+        initialState={{
+          ...initialState,
+          pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
+          aggregation: {
+            model: { commodity: 'size', quantity: 'sum' },
+          },
+        }}
         unstable_lazyLoading
         aggregationFunctions={aggregationFunctions}
       />

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

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

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

@@ -16,11 +16,9 @@ const aggregationFunctions = {
 
 export default function ServerSideDataGridAggregationRowGrouping() {
   const apiRef = useGridApiRef();
-  const {
-    columns,
-    initialState: initState,
-    fetchRows,
-  } = useMockServer({ rowGrouping: true });
+  const { columns, initialState, fetchRows } = useMockServer({
+    rowGrouping: true,
+  });
 
   const dataSource = React.useMemo(
     () => ({
@@ -49,16 +47,16 @@ export default function ServerSideDataGridAggregationRowGrouping() {
     [fetchRows],
   );
 
-  const initialState = useKeepGroupedColumnsHidden({
+  const initialStateUpdated = useKeepGroupedColumnsHidden({
     apiRef,
     initialState: {
-      ...initState,
-      rowGrouping: {
-        model: ['company', 'director'],
-      },
+      ...initialState,
       aggregation: {
         model: { title: 'size', gross: 'sum', year: 'max' },
       },
+      rowGrouping: {
+        model: ['company', 'director'],
+      },
     },
   });
 
@@ -68,7 +66,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
         apiRef={apiRef}
         columns={columns}
         unstable_dataSource={dataSource}
-        initialState={initialState}
+        initialState={initialStateUpdated}
         aggregationFunctions={aggregationFunctions}
       />
     </div>

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

@@ -4,6 +4,7 @@ import {
   useKeepGroupedColumnsHidden,
   useGridApiRef,
   GridDataSource,
+  GridGetRowsResponse,
 } from '@mui/x-data-grid-premium';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
@@ -17,11 +18,9 @@ const aggregationFunctions = {
 
 export default function ServerSideDataGridAggregationRowGrouping() {
   const apiRef = useGridApiRef();
-  const {
-    columns,
-    initialState: initState,
-    fetchRows,
-  } = useMockServer({ rowGrouping: true });
+  const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>({
+    rowGrouping: true,
+  });
 
   const dataSource: GridDataSource = React.useMemo(
     () => ({
@@ -50,16 +49,16 @@ export default function ServerSideDataGridAggregationRowGrouping() {
     [fetchRows],
   );
 
-  const initialState = useKeepGroupedColumnsHidden({
+  const initialStateUpdated = useKeepGroupedColumnsHidden({
     apiRef,
     initialState: {
-      ...initState,
-      rowGrouping: {
-        model: ['company', 'director'],
-      },
+      ...initialState,
       aggregation: {
         model: { title: 'size', gross: 'sum', year: 'max' },
       },
+      rowGrouping: {
+        model: ['company', 'director'],
+      },
     },
   });
 
@@ -69,7 +68,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
         apiRef={apiRef}
         columns={columns}
         unstable_dataSource={dataSource}
-        initialState={initialState}
+        initialState={initialStateUpdated}
         aggregationFunctions={aggregationFunctions}
       />
     </div>

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

@@ -2,6 +2,6 @@
   apiRef={apiRef}
   columns={columns}
   unstable_dataSource={dataSource}
-  initialState={initialState}
+  initialState={initialStateUpdated}
   aggregationFunctions={aggregationFunctions}
 />

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

@@ -18,21 +18,7 @@ const aggregationFunctions = {
 
 export default function ServerSideDataGridAggregationTreeData() {
   const apiRef = useGridApiRef();
-  const {
-    fetchRows,
-    columns,
-    initialState: initState,
-  } = useMockServer(dataSetOptions);
-
-  const initialState = React.useMemo(
-    () => ({
-      ...initState,
-      aggregation: {
-        model: { rating: 'avg', website: 'size' },
-      },
-    }),
-    [initState],
-  );
+  const { fetchRows, columns, initialState } = useMockServer(dataSetOptions);
 
   const dataSource = React.useMemo(
     () => ({
@@ -67,7 +53,12 @@ export default function ServerSideDataGridAggregationTreeData() {
         unstable_dataSource={dataSource}
         treeData
         apiRef={apiRef}
-        initialState={initialState}
+        initialState={{
+          ...initialState,
+          aggregation: {
+            model: { rating: 'avg', website: 'size' },
+          },
+        }}
         aggregationFunctions={aggregationFunctions}
       />
     </div>