[docs] Continue the migration of the demos

docs/next.config.js

@@ -2,7 +2,7 @@ const webpack = require('webpack');
 const path = require('path');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 // const withTM = require('next-transpile-modules')(['@material-ui/monorepo']);
-const pkg = require('./package.json');
+const pkg = require('./node_modules/@material-ui/monorepo/package.json');
 const { findPages } = require('./src/modules/utils/find');
 const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
 

docs/src/pages.js

@@ -146,7 +146,7 @@ const pages = [
           { pathname: '/components/data-grid/rendering' },
           { pathname: '/components/data-grid/export', title: 'Export & Import' },
           { pathname: '/components/data-grid/localization' },
-          { pathname: '/components/data-grid/group-pivot', title: 'Group & Pivot' },
+          { pathname: '/components/data-grid/group-pivot', title: 'Group & Pivot ✨' },
           { pathname: '/components/data-grid/accessibility' },
         ],
       },

docs/src/pages/components/data-grid/pagination/ApiRefPaginationGrid.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DataGrid, useApiRef } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ApiRefPaginationGrid() {
+  const apiRef = useApiRef();
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  React.useEffect(() => {
+    apiRef.current.setPage(2);
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid pagination pageSize={5} apiRef={apiRef} {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/pagination/ApiRefPaginationGrid.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DataGrid, useApiRef } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ApiRefPaginationGrid() {
+  const apiRef = useApiRef();
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  React.useEffect(() => {
+    apiRef.current.setPage(2);
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid pagination pageSize={5} apiRef={apiRef} {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/pagination/ServerPaginationGrid.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+function loadServerRows(page, data) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(data.rows.slice((page - 1) * 5, page * 5));
+    }, Math.random() * 500 + 100); // simulate network latency
+  });
+}
+
+export default function ServerPaginationGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  const [page, setPage] = React.useState(1);
+  const [rows, setRows] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+
+  const handlePageChange = (params) => {
+    setPage(params.page);
+  };
+
+  React.useEffect(() => {
+    let active = true;
+
+    (async () => {
+      setLoading(true);
+      const newRows = await loadServerRows(page, data);
+
+      if (!active) {
+        return;
+      }
+
+      setRows(newRows);
+      setLoading(false);
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [page, data]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={data.columns}
+        pagination
+        pageSize={5}
+        rowCount={100}
+        paginationMode="server"
+        onPageChange={handlePageChange}
+        loading={loading}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/pagination/ServerPaginationGrid.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { RowsProp, DataGrid } from '@material-ui/data-grid';
+import { useDemoData, GridData } from '@material-ui/x-grid-data-generator';
+
+function loadServerRows(page: number, data: GridData): Promise<any> {
+  return new Promise<any>((resolve) => {
+    setTimeout(() => {
+      resolve(data.rows.slice((page - 1) * 5, page * 5));
+    }, Math.random() * 500 + 100); // simulate network latency
+  });
+}
+
+export default function ServerPaginationGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+  const [page, setPage] = React.useState(1);
+  const [rows, setRows] = React.useState<RowsProp>([]);
+  const [loading, setLoading] = React.useState<boolean>(false);
+
+  const handlePageChange = (params) => {
+    setPage(params.page);
+  };
+
+  React.useEffect(() => {
+    let active = true;
+
+    (async () => {
+      setLoading(true);
+      const newRows = await loadServerRows(page, data);
+
+      if (!active) {
+        return;
+      }
+
+      setRows(newRows);
+      setLoading(false);
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [page, data]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={data.columns}
+        pagination
+        pageSize={5}
+        rowCount={100}
+        paginationMode="server"
+        onPageChange={handlePageChange}
+        loading={loading}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/pagination/pagination.md

@@ -41,11 +41,19 @@ Head to the [rendering section](/components/data-grid/rendering/#pagination) of
 
 ## Server-side pagination
 
-- https://ej2.syncfusion.com/react/demos/#/material/grid/paging
-- https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/paging/
-- https://www.telerik.com/kendo-react-ui/components/grid/paging/
-- https://ag-grid.com/javascript-grid-pagination/
-- https://github.com/tannerlinsley/react-table/blob/master/docs/api/usePagination.md
-- https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-paging.htm
-- https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordPaging/React/Light/
-- http://tabulator.info/docs/4.5/page
+By default, pagination works on the client-side.
+To switch it to server-side, set `paginationMode="server"`.
+You also need to set the `rowCount` prop to so the grid know the total number of pages.
+Finally, you need to handle the `onPageChange` callback to load the rows for the corresponding page.
+
+{{"demo": "pages/components/data-grid/pagination/ServerPaginationGrid.js"}}
+
+## apiRef
+
+We exposed a set of methods that will let you achieve all the above features using the imperative apiRef.
+
+> ⚠️ Only use this API when you have no alternatives. Always start from the declarative APIs the Grid exposes.
+
+Below is an example on how you can reset the page using the imperative `setPage` method.
+
+{{"demo": "pages/components/data-grid/pagination/ApiRefPaginationGrid.js"}}

packages/grid/data-grid/src/DataGrid.tsx

@@ -11,7 +11,6 @@ const FORCED_PROPS: Partial<GridComponentProps> = {
 
 export type DataGridProps = Omit<
   GridComponentProps,
-  | 'apiRef'
   | 'disableMultipleColumnsSorting'
   | 'disableMultipleSelection'
   | 'licenseStatus'

packages/grid/x-grid-data-generator/src/useDemoData.ts

@@ -8,7 +8,8 @@ export type DemoDataReturnType = {
   setRowLength: (count: number) => void;
   loadNewData: () => void;
 };
-export type DataSet = 'Commodity' | 'Employee';
+
+type DataSet = 'Commodity' | 'Employee';
 
 interface DemoDataOptions {
   dataSet: DataSet;