(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[778],{38485:function(n,e,a){"use strict";a.r(e),a.d(e,{default:function(){return C}});var t=a(27378),i=a(73586),o=a(95649),r=a(81853),s=a(33054),d=a(39388),g=a(24246);var u=a(77809),l=a(34455),c=a.n(l),p=a(73220),m=a.n(p);function h(n,e){return new(m())((function(a){setTimeout((function(){a(e.rows.slice(5*n,5*(n+1)))}),500*Math.random()+100)}))}function f(n,e){return new(m())((function(a){setTimeout((function(){var t,i=n?e.rows.findIndex((function(e){return e.id===n})):0,o=i+5,r=e.rows.slice(i,o);a({rows:r,nextCursor:null===(t=e.rows[o])||void 0===t?void 0:t.id})}),500*Math.random()+100)}))}var w=a(96833);var P=a(92144),v=a(24903);const G={en:{description:"Through pagination, a segment of data can be viewed from the assigned data source.",location:"/docs/src/pages/components/data-grid/pagination/pagination.md",rendered:['\n \n \n \n','

Data Grid - Pagination

Through pagination, a segment of data can be viewed from the assigned data source.

\n\n

By default, the MIT DataGrid displays the rows with pagination, and up to 100 rows per page.

\n

On the other hand, the commercial DataGridPro 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.

\n

Basic example

',{demo:"pages/components/data-grid/pagination/BasicPaginationGrid.js",bg:"inline"},'

Page size

\n',{demo:"pages/components/data-grid/pagination/SizePaginationGrid.js",bg:"inline"},'

Controlled pagination

While the previous demos show how the pagination can be uncontrolled, the active page can be controlled with the page/onPageChange props.

\n',{demo:"pages/components/data-grid/pagination/ControlledPaginationGrid.js",bg:"inline"},'

Auto size

The autoPageSize prop allows to auto-scale the pageSize to match the container height and the max number of rows that can be displayed without a vertical scroll bar.\nBy default, this feature is off.

\n',{demo:"pages/components/data-grid/pagination/AutoPaginationGrid.js",bg:"inline"},'

Server-side pagination

By default, pagination works on the client-side.\nTo switch it to server-side, set paginationMode="server".\nYou also need to set the rowCount prop so that the grid knows the total number of pages.\nFinally, you need to handle the onPageChange callback to load the rows for the corresponding page.

\n',{demo:"pages/components/data-grid/pagination/ServerPaginationGrid.js",bg:"inline"},'

Note: For more information regarding server-side pagination in combination with controlled selection check here

\n

Cursor-based pagination

You can adapt the pagination for your cursor-based pagination.\nTo do so, you just have to keep track of the next cursor associated with each page you fetched.

\n',{demo:"pages/components/data-grid/pagination/CursorPaginationGrid.js",bg:"inline"},'

Customization

You can customize the rendering of the pagination in the footer following the component section of the documentation.

\n

Paginate > 100 rows

The DataGrid component can display up to 100 rows per page.\nThe DataGridPro component removes this limitation.\nThe following demo displays 200 rows per page:

\n',{demo:"pages/components/data-grid/pagination/200PaginationGrid.js",disableAd:!0,bg:"inline"},'

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef.

\n
\n

\u26a0\ufe0f Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.

\n
\n\n

Below is an example of how you can reset the page using the imperative setPage method.

\n',{demo:"pages/components/data-grid/pagination/ApiRefPaginationGrid.js",bg:"inline",disableAd:!0},'

API

\n'],toc:[{text:"Basic example",level:2,hash:"basic-example",children:[]},{text:"Page size",level:2,hash:"page-size",children:[]},{text:"Controlled pagination",level:2,hash:"controlled-pagination",children:[]},{text:"Auto size",level:2,hash:"auto-size",children:[]},{text:"Server-side pagination",level:2,hash:"server-side-pagination",children:[]},{text:"Cursor-based pagination",level:2,hash:"cursor-based-pagination",children:[]},{text:"Customization",level:2,hash:"customization",children:[]},{text:"Paginate > 100 rows",level:2,hash:"paginate-gt-100-rows",children:[]},{text:"apiRef",level:2,hash:"apiref",children:[]},{text:"API",level:2,hash:"api",children:[]}],title:"Data Grid - Pagination",headers:{title:"Data Grid - Pagination",components:[]}}},x={"pages/components/data-grid/pagination/SizePaginationGrid.js":{module:"./SizePaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function SizePaginationGrid() {\n const [pageSize, setPageSize] = React.useState(5);\n\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n return (\n
\n setPageSize(newPageSize)}\n rowsPerPageOptions={[5, 10, 20]}\n pagination\n {...data}\n />\n
\n );\n}\n",moduleTS:"./SizePaginationGrid.js",rawTS:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function SizePaginationGrid() {\n const [pageSize, setPageSize] = React.useState(5);\n\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n return (\n
\n setPageSize(newPageSize)}\n rowsPerPageOptions={[5, 10, 20]}\n pagination\n {...data}\n />\n
\n );\n}\n"},"pages/components/data-grid/pagination/BasicPaginationGrid.js":{module:"./BasicPaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function BasicPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 1000,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n",moduleTS:"./BasicPaginationGrid.js",rawTS:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function BasicPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 1000,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n"},"pages/components/data-grid/pagination/ControlledPaginationGrid.js":{module:"./ControlledPaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function ControlledPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n const [page, setPage] = React.useState(0);\n\n return (\n
\n setPage(newPage)}\n pageSize={5}\n rowsPerPageOptions={[5]}\n pagination\n {...data}\n />\n
\n );\n}\n",moduleTS:"./ControlledPaginationGrid.js",rawTS:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function ControlledPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n const [page, setPage] = React.useState(0);\n\n return (\n
\n setPage(newPage)}\n pageSize={5}\n rowsPerPageOptions={[5]}\n pagination\n {...data}\n />\n
\n );\n}\n"},"pages/components/data-grid/pagination/ServerPaginationGrid.js":{module:"./ServerPaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nfunction loadServerRows(page, data) {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(data.rows.slice(page * 5, (page + 1) * 5));\n }, Math.random() * 500 + 100); // simulate network latency\n });\n}\n\nexport default function ServerPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n const [page, setPage] = React.useState(0);\n const [rows, setRows] = React.useState([]);\n const [loading, setLoading] = React.useState(false);\n\n React.useEffect(() => {\n let active = true;\n\n (async () => {\n setLoading(true);\n const newRows = await loadServerRows(page, data);\n\n if (!active) {\n return;\n }\n\n setRows(newRows);\n setLoading(false);\n })();\n\n return () => {\n active = false;\n };\n }, [page, data]);\n\n return (\n
\n setPage(newPage)}\n loading={loading}\n />\n
\n );\n}\n",moduleTS:"./ServerPaginationGrid.js",rawTS:"import * as React from 'react';\nimport { GridRowsProp, DataGrid } from '@mui/x-data-grid';\nimport { useDemoData, GridData } from '@mui/x-data-grid-generator';\n\nfunction loadServerRows(page: number, data: GridData): Promise {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(data.rows.slice(page * 5, (page + 1) * 5));\n }, Math.random() * 500 + 100); // simulate network latency\n });\n}\n\nexport default function ServerPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n const [page, setPage] = React.useState(0);\n const [rows, setRows] = React.useState([]);\n const [loading, setLoading] = React.useState(false);\n\n React.useEffect(() => {\n let active = true;\n\n (async () => {\n setLoading(true);\n const newRows = await loadServerRows(page, data);\n\n if (!active) {\n return;\n }\n\n setRows(newRows);\n setLoading(false);\n })();\n\n return () => {\n active = false;\n };\n }, [page, data]);\n\n return (\n
\n setPage(newPage)}\n loading={loading}\n />\n
\n );\n}\n"},"pages/components/data-grid/pagination/CursorPaginationGrid.js":{module:"./CursorPaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nconst PAGE_SIZE = 5;\n\nfunction loadServerRows(cursor, data) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const start = cursor ? data.rows.findIndex((row) => row.id === cursor) : 0;\n const end = start + PAGE_SIZE;\n const rows = data.rows.slice(start, end);\n\n resolve({ rows, nextCursor: data.rows[end]?.id });\n }, Math.random() * 500 + 100); // simulate network latency\n });\n}\n\nexport default function CursorPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n const pagesNextCursor = React.useRef({});\n\n const [rows, setRows] = React.useState([]);\n const [page, setPage] = React.useState(0);\n const [loading, setLoading] = React.useState(false);\n\n const handlePageChange = (newPage) => {\n // We have the cursor, we can allow the page transition.\n if (newPage === 0 || pagesNextCursor.current[newPage - 1]) {\n setPage(newPage);\n }\n };\n\n React.useEffect(() => {\n let active = true;\n\n (async () => {\n const nextCursor = pagesNextCursor.current[page - 1];\n\n if (!nextCursor && page > 0) {\n return;\n }\n\n setLoading(true);\n const response = await loadServerRows(nextCursor, data);\n\n if (response.nextCursor) {\n pagesNextCursor.current[page] = response.nextCursor;\n }\n\n if (!active) {\n return;\n }\n\n setRows(response.rows);\n setLoading(false);\n })();\n\n return () => {\n active = false;\n };\n }, [page, data]);\n\n return (\n
\n \n
\n );\n}\n",moduleTS:"./CursorPaginationGrid.js",rawTS:"import * as React from 'react';\nimport { GridRowsProp, DataGrid, GridRowId } from '@mui/x-data-grid';\nimport { useDemoData, GridData, DataRowModel } from '@mui/x-data-grid-generator';\n\ninterface ServerBasedGridResponse {\n rows: DataRowModel[];\n nextCursor: GridRowId | null | undefined;\n}\n\nconst PAGE_SIZE = 5;\n\nfunction loadServerRows(\n cursor: GridRowId | null | undefined,\n data: GridData,\n): Promise {\n return new Promise((resolve) => {\n setTimeout(() => {\n const start = cursor ? data.rows.findIndex((row) => row.id === cursor) : 0;\n const end = start + PAGE_SIZE;\n const rows = data.rows.slice(start, end);\n\n resolve({ rows, nextCursor: data.rows[end]?.id });\n }, Math.random() * 500 + 100); // simulate network latency\n });\n}\n\nexport default function CursorPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n const pagesNextCursor = React.useRef<{ [page: number]: GridRowId }>({});\n\n const [rows, setRows] = React.useState([]);\n const [page, setPage] = React.useState(0);\n const [loading, setLoading] = React.useState(false);\n\n const handlePageChange = (newPage: number) => {\n // We have the cursor, we can allow the page transition.\n if (newPage === 0 || pagesNextCursor.current[newPage - 1]) {\n setPage(newPage);\n }\n };\n\n React.useEffect(() => {\n let active = true;\n\n (async () => {\n const nextCursor = pagesNextCursor.current[page - 1];\n\n if (!nextCursor && page > 0) {\n return;\n }\n\n setLoading(true);\n const response = await loadServerRows(nextCursor, data);\n\n if (response.nextCursor) {\n pagesNextCursor.current[page] = response.nextCursor;\n }\n\n if (!active) {\n return;\n }\n\n setRows(response.rows);\n setLoading(false);\n })();\n\n return () => {\n active = false;\n };\n }, [page, data]);\n\n return (\n
\n \n
\n );\n}\n"},"pages/components/data-grid/pagination/AutoPaginationGrid.js":{module:"./AutoPaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function AutoPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n",moduleTS:"./AutoPaginationGrid.js",rawTS:"import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function AutoPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 100,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n"},"pages/components/data-grid/pagination/200PaginationGrid.js":{module:"./200PaginationGrid.js",raw:"import * as React from 'react';\nimport { DataGridPro } from '@mui/x-data-grid-pro';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function BasisPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 1000,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n",moduleTS:"./200PaginationGrid.js",rawTS:"import * as React from 'react';\nimport { DataGridPro } from '@mui/x-data-grid-pro';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function BasisPaginationGrid() {\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 1000,\n maxColumns: 6,\n });\n\n return (\n
\n \n
\n );\n}\n"},"pages/components/data-grid/pagination/ApiRefPaginationGrid.js":{module:"./ApiRefPaginationGrid.js",raw:"import * as React from 'react';\nimport Button from '@mui/material/Button';\nimport { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function ApiRefPaginationGrid() {\n const apiRef = useGridApiRef();\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 10,\n maxColumns: 6,\n });\n\n const handleClick = () => {\n apiRef.current.setPage(1);\n };\n\n return (\n \n \n
\n \n
\n \n );\n}\n",moduleTS:"./ApiRefPaginationGrid.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/material/Button';\nimport { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';\nimport { useDemoData } from '@mui/x-data-grid-generator';\n\nexport default function ApiRefPaginationGrid() {\n const apiRef = useGridApiRef();\n const { data } = useDemoData({\n dataSet: 'Commodity',\n rowLength: 10,\n maxColumns: 6,\n });\n\n const handleClick = () => {\n apiRef.current.setPage(1);\n };\n\n return (\n \n \n
\n \n
\n \n );\n}\n"}},S={"./SizePaginationGrid.js":function(){var n=t.useState(5),e=(0,r.Z)(n,2),a=e[0],i=e[1],u=(0,d.P)({dataSet:"Commodity",rowLength:100,maxColumns:6}).data;return(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,(0,o.Z)({pageSize:a,onPageSizeChange:function(n){return i(n)},rowsPerPageOptions:[5,10,20],pagination:!0},u))})},"./BasicPaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:1e3,maxColumns:6}).data;return(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,(0,o.Z)({pagination:!0},n))})},"./ControlledPaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:100,maxColumns:6}).data,e=t.useState(0),a=(0,r.Z)(e,2),i=a[0],u=a[1];return(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,(0,o.Z)({page:i,onPageChange:function(n){return u(n)},pageSize:5,rowsPerPageOptions:[5],pagination:!0},n))})},"./ServerPaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:100,maxColumns:6}).data,e=t.useState(0),a=(0,r.Z)(e,2),i=a[0],o=a[1],l=t.useState([]),p=(0,r.Z)(l,2),m=p[0],f=p[1],w=t.useState(!1),P=(0,r.Z)(w,2),v=P[0],G=P[1];return t.useEffect((function(){var e=!0;return(0,u.Z)(c().mark((function a(){var t;return c().wrap((function(a){for(;;)switch(a.prev=a.next){case 0:return G(!0),a.next=3,h(i,n);case 3:if(t=a.sent,e){a.next=6;break}return a.abrupt("return");case 6:f(t),G(!1);case 8:case"end":return a.stop()}}),a)})))(),function(){e=!1}}),[i,n]),(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,{rows:m,columns:n.columns,pagination:!0,pageSize:5,rowsPerPageOptions:[5],rowCount:100,paginationMode:"server",onPageChange:function(n){return o(n)},loading:v})})},"./CursorPaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:100,maxColumns:6}).data,e=t.useRef({}),a=t.useState([]),i=(0,r.Z)(a,2),o=i[0],l=i[1],p=t.useState(0),m=(0,r.Z)(p,2),h=m[0],w=m[1],P=t.useState(!1),v=(0,r.Z)(P,2),G=v[0],x=v[1];return t.useEffect((function(){var a=!0;return(0,u.Z)(c().mark((function t(){var i,o;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if((i=e.current[h-1])||!(h>0)){t.next=3;break}return t.abrupt("return");case 3:return x(!0),t.next=6,f(i,n);case 6:if((o=t.sent).nextCursor&&(e.current[h]=o.nextCursor),a){t.next=10;break}return t.abrupt("return");case 10:l(o.rows),x(!1);case 12:case"end":return t.stop()}}),t)})))(),function(){a=!1}}),[h,n]),(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,{rows:o,columns:n.columns,pagination:!0,pageSize:5,rowsPerPageOptions:[5],rowCount:100,paginationMode:"server",onPageChange:function(n){(0===n||e.current[n-1])&&w(n)},page:h,loading:G})})},"./AutoPaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:100,maxColumns:6}).data;return(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(s._,(0,o.Z)({autoPageSize:!0,pagination:!0},n))})},"./200PaginationGrid.js":function(){var n=(0,d.P)({dataSet:"Commodity",rowLength:1e3,maxColumns:6}).data;return(0,g.jsx)("div",{style:{height:400,width:"100%"},children:(0,g.jsx)(w.s,(0,o.Z)({pagination:!0,pageSize:200,rowsPerPageOptions:[200]},n))})},"./ApiRefPaginationGrid.js":function(){var n=(0,v.useGridApiRef)(),e=(0,d.P)({dataSet:"Commodity",rowLength:10,maxColumns:6}).data;return(0,g.jsxs)("div",{style:{width:"100%"},children:[(0,g.jsx)(P.Z,{color:"primary",variant:"outlined",onClick:function(){n.current.setPage(1)},children:"Set page 2"}),(0,g.jsx)("div",{style:{height:400,width:"100%",marginTop:16},children:(0,g.jsx)(w.s,(0,o.Z)({pagination:!0,pageSize:5,rowsPerPageOptions:[5],apiRef:n},e))})]})}};function C(){return(0,g.jsx)(i.Z,{demos:x,docs:G,demoComponents:S})}},33054:function(n,e,a){"use strict";a.d(e,{_:function(){return M}});var t=a(27378),i=a(22096),o=a(37596),r=a(96810),s=a(43887),d=a(85319),g=a(15582),u=a(47358),l=a(73427),c=a(79581),p=a(37029),m=a(98407),h=a(18056),f=a(92372),w=a(60099),P=a(59298),v=a(91239),G=a(88409),x=a(36197),S=a(59352),C=a(30740),b=a(30194),D=a(59348),R=a(33006),y=a(34270),z=a(36845),k=a(95649),j=a(68014),T=a(14325),L={apiRef:void 0,disableColumnResize:!0,disableColumnReorder:!0,disableMultipleColumnsFiltering:!0,disableMultipleColumnsSorting:!0,disableMultipleSelection:!0,throttleRowsMs:void 0,hideFooterRowCount:!1,pagination:!0,onRowsScrollEnd:void 0,checkboxSelectionVisibleOnly:!1,scrollEndThreshold:void 0,signature:"DataGrid"},A=a(24246),B=t.forwardRef((function(n,e){var a=function(n){if(n.pageSize>100)throw new Error("'props.pageSize' cannot exceed 100 in DataGrid.");var e=(0,j.Z)({props:n,name:"MuiDataGrid"}),a=t.useMemo((function(){return(0,k.Z)((0,k.Z)({},e),L)}),[e]);return(0,T.H)(a)}(n),B=(0,i.useGridApiRef)();return function(n,e){(0,r.S)(n,e),(0,z.x)(n,e),(0,C.r)(n,e),(0,g.C)(n,e),(0,x.K)(n,e),(0,S.G)(n),(0,G.q)(n,e),(0,m.z)(n,e),(0,b.G)(n,e),(0,v.M)(n,e),(0,p.L)(n,e),(0,u.km)(n,e),(0,w.K)(n,e),(0,P.l)(n,e),(0,y.Z)(n,e),(0,D.K)(n,e),(0,d.p)(n),(0,h.c)(n),(0,f.D)(n,e),(0,l._)(n),(0,c.d)(n,e),(0,s.D)(n),(0,R.I)(n,e)}(B,a),(0,A.jsx)(o.d,{apiRef:B,props:a,children:(0,A.jsx)(i.GridRoot,{ref:e,children:(0,A.jsxs)(i.GridErrorHandler,{children:[(0,A.jsx)(i.GridHeaderPlaceholder,{}),(0,A.jsx)(i.GridBody,{}),(0,A.jsx)(i.GridFooterPlaceholder,{})]})})})})),M=t.memo(B)},24903:function(n,e,a){"use strict";a.d(e,{GridActionsCellItem:function(){return t.GridActionsCellItem},GridColumnMenu:function(){return t.GridColumnMenu},GridColumnMenuContainer:function(){return t.GridColumnMenuContainer},GridEvents:function(){return t.GridEvents},GridFilterMenuItem:function(){return t.GridFilterMenuItem},GridOverlay:function(){return t.GridOverlay},GridToolbar:function(){return t.GridToolbar},GridToolbarColumnsButton:function(){return t.GridToolbarColumnsButton},GridToolbarContainer:function(){return t.GridToolbarContainer},GridToolbarDensitySelector:function(){return t.GridToolbarDensitySelector},GridToolbarExport:function(){return t.GridToolbarExport},GridToolbarFilterButton:function(){return t.GridToolbarFilterButton},SortGridMenuItems:function(){return t.SortGridMenuItems},gridClasses:function(){return t.gridClasses}});var t=a(22096);a.o(t,"GridLinkOperator")&&a.d(e,{GridLinkOperator:function(){return t.GridLinkOperator}}),a.o(t,"getGridNumericColumnOperators")&&a.d(e,{getGridNumericColumnOperators:function(){return t.getGridNumericColumnOperators}}),a.o(t,"useGridApiContext")&&a.d(e,{useGridApiContext:function(){return t.useGridApiContext}}),a.o(t,"useGridApiRef")&&a.d(e,{useGridApiRef:function(){return t.useGridApiRef}}),a.o(t,"useGridState")&&a.d(e,{useGridState:function(){return t.useGridState}}),a.o(t,"visibleGridColumnsLengthSelector")&&a.d(e,{visibleGridColumnsLengthSelector:function(){return t.visibleGridColumnsLengthSelector}}),a.o(t,"visibleGridColumnsSelector")&&a.d(e,{visibleGridColumnsSelector:function(){return t.visibleGridColumnsSelector}}),a.o(t,"visibleGridRowCountSelector")&&a.d(e,{visibleGridRowCountSelector:function(){return t.visibleGridRowCountSelector}}),a.o(t,"visibleSortedGridRowIdsSelector")&&a.d(e,{visibleSortedGridRowIdsSelector:function(){return t.visibleSortedGridRowIdsSelector}})},58241:function(n,e,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/data-grid/pagination",function(){return a(38485)}])}},function(n){n.O(0,[7178,3444,3586,2276,7508,597,7548,8564,9388,6833,9774,2888,179],(function(){return e=58241,n(n.s=e);var e}));var e=n.O();_N_E=e}]);