[docs] Migration of the paginaton (#224)

mui · Aug 25, 2020 · 4d15119 · 4d15119
1 parent dbdcad2
commit 4d15119
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 32 deletions.
diff --git a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.js
@@ -10,13 +10,8 @@ export default function AutoPaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
-      <DataGrid
-        autoPageSize
-        pagination
-        rows={data.rows}
-        columns={data.columns}
-      />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid autoPageSize pagination {...data} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx
@@ -10,13 +10,8 @@ export default function AutoPaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
-      <DataGrid
-        autoPageSize
-        pagination
-        rows={data.rows}
-        columns={data.columns}
-      />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid autoPageSize pagination {...data} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js
@@ -10,8 +10,8 @@ export default function BasisPaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
-      <DataGrid pagination rows={data.rows} columns={data.columns} />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid pagination {...data} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx
@@ -10,8 +10,8 @@ export default function BasisPaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
-      <DataGrid pagination rows={data.rows} columns={data.columns} />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid pagination {...data} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js
@@ -12,16 +12,15 @@ export default function ControlledPaginationGrid() {
   const [page, setPage] = React.useState(1);
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         page={page}
         onPageChange={(params) => {
           setPage(params.page);
         }}
         pageSize={5}
         pagination
-        rows={data.rows}
-        columns={data.columns}
+        {...data}
       />
     </div>
   );

diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx
@@ -11,16 +11,15 @@ export default function ControlledPaginationGrid() {
   const [page, setPage] = React.useState(1);
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         page={page}
         onPageChange={(params) => {
           setPage(params.page);
         }}
         pageSize={5}
         pagination
-        rows={data.rows}
-        columns={data.columns}
+        {...data}
       />
     </div>
   );

diff --git a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js
@@ -10,13 +10,12 @@ export default function SizePaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         pageSize={5}
         rowsPerPageOptions={[5, 10, 20]}
         pagination
-        rows={data.rows}
-        columns={data.columns}
+        {...data}
       />
     </div>
   );

diff --git a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx
@@ -10,13 +10,12 @@ export default function SizePaginationGrid() {
   });
 
   return (
-    <div style={{ height: 450, width: '100%' }}>
+    <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         pageSize={5}
         rowsPerPageOptions={[5, 10, 20]}
         pagination
-        rows={data.rows}
-        columns={data.columns}
+        {...data}
       />
     </div>
   );

diff --git a/docs/src/pages/components/data-grid/pagination/pagination.md b/docs/src/pages/components/data-grid/pagination/pagination.md
@@ -7,8 +7,9 @@ components: DataGrid, XGrid
 
 <p class="description">Through paging, a segment of data can be viewed from the assigned data source.</p>
 
-By default, the Grid displays all the rows with infinite scrolling (and virtualization).
-Set the `pagination` prop to enable the pagination feature.
+By default, the MIT `DataGrid` displays the rows with pagination, and up to 100 rows per page.
+
+On the other hand, the commercial `XGrid` component displays, by default, all the rows with infinite scrolling (and virtualization) and without the 100 rows per page limitation. You need to set the `pagination` prop to enable the pagination feature in such a case.
 
 ## Basic example
 
@@ -34,6 +35,12 @@ By default, this feature is off.
 
 {{"demo": "pages/components/data-grid/pagination/AutoPaginationGrid.js"}}
 
+## Custom pagination component
+
+Head to the [rendering section](/components/data-grid/rendering/#pagination) of the documentation for customizing the pagination component.
+
+## 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/

diff --git a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+  },
+});
+
+function CustomPagination(props) {
+  const { paginationProps } = props;
+  const classes = useStyles();
+
+  return (
+    <Pagination
+      className={classes.root}
+      color="primary"
+      page={paginationProps.page}
+      count={paginationProps.pageCount}
+      onChange={(event, value) => paginationProps.setPage(value)}
+    />
+  );
+}
+
+CustomPagination.propTypes = {
+  paginationProps: PropTypes.shape({
+    page: PropTypes.number.isRequired,
+    pageCount: PropTypes.number.isRequired,
+    setPage: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default function CustomPaginationGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        pagination
+        pageSize={5}
+        components={{
+          pagination: CustomPagination,
+        }}
+        {...data}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { DataGrid } from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+  },
+});
+
+interface CustomPaginationProps {
+  paginationProps: {
+    page: number;
+    pageCount: number;
+    setPage: (newPage: number) => void;
+  };
+}
+
+function CustomPagination(props: CustomPaginationProps) {
+  const { paginationProps } = props;
+  const classes = useStyles();
+
+  return (
+    <Pagination
+      className={classes.root}
+      color="primary"
+      page={paginationProps.page}
+      count={paginationProps.pageCount}
+      onChange={(event, value) => paginationProps.setPage(value)}
+    />
+  );
+}
+
+export default function CustomPaginationGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        pagination
+        pageSize={5}
+        components={{
+          pagination: CustomPagination,
+        }}
+        {...data}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md
@@ -6,3 +6,19 @@ components: DataGrid, XGrid
 # Data Grid - Rendering
 
 <p class="description">Start</p>
+
+## Components
+
+As part of our customization API, the Grid allows to replace and override the following components:
+
+- `header`: The component rendered above the column header bar.
+- `loadingOverlay`: The component rendered when the loading react prop is set to true.
+- `noRowsOverlay`: The component rendered when the rows react prop is empty or [].
+- `footer` - The component rendered below the viewport.
+- `pagination`: The component rendered for the pagination feature.
+
+### Pagination
+
+By default, the pagination uses the [TablePagination](/components/pagination/#table-pagination) component that is optimized for handling tabular data. This demo replaces it with the [Pagination](/components/pagination/) component.
+
+{{"demo": "pages/components/data-grid/rendering/CustomPaginationGrid.js"}}