fix for pagination on tables

This commit is contained in:
Tim Chamberlain
2022-07-21 16:25:28 -05:00
parent be42a98d4d
commit 4412a274f4
3 changed files with 34 additions and 32 deletions

View File

@ -1,39 +1,39 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
All of the routes for the Material Kit 2 PRO React React are added here,
You can add a new route, customize the routes and delete the routes here.
All of the routes for the Material Kit 2 PRO React React are added here,
You can add a new route, customize the routes and delete the routes here.
Once you add a new route on this file it will be visible automatically on
the Navbar.
Once you add a new route on this file it will be visible automatically on
the Navbar.
For adding a new route you can follow the existing routes in the routes array.
1. The `name` key is used for the name of the route on the Navbar.
2. The `icon` key is used for the icon of the route on the Navbar.
3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes
inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key.
4. The `route` key is used to store the route location which is used for the react router.
5. The `href` key is used to store the external links location.
7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items .
8. The `description` key is used to define the description of
a route under its name.
9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns,
you can set the columns amount based on this key.
10. The `rowsPerColumn` key is used to define that how many rows should be in a column.
*/
For adding a new route you can follow the existing routes in the routes array.
1. The `name` key is used for the name of the route on the Navbar.
2. The `icon` key is used for the icon of the route on the Navbar.
3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes
inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key.
4. The `route` key is used to store the route location which is used for the react router.
5. The `href` key is used to store the external links location.
7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items .
8. The `description` key is used to define the description of
a route under its name.
9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns,
you can set the columns amount based on this key.
10. The `rowsPerColumn` key is used to define that how many rows should be in a column.
*/
// @mui material components
import Icon from "@mui/material/Icon";
@ -76,9 +76,9 @@ const pageRoutes = [
name: "pricing page",
route: "/pages/pricing-page",
},
{ name: "RTL", route: "/pages/rtl" },
{ name: "widgets", route: "/pages/widgets" },
{ name: "charts", route: "/pages/charts" },
{name: "RTL", route: "/pages/rtl"},
{name: "widgets", route: "/pages/widgets"},
{name: "charts", route: "/pages/charts"},
{
name: "notfications",
route: "/pages/notifications",

View File

@ -508,6 +508,7 @@ function EntityList({table}: Props): JSX.Element
<MDBox height="100%">
<DataGridPro
components={{Toolbar: CustomToolbar}}
pagination
paginationMode="server"
sortingMode="server"
filterMode="server"

View File

@ -46,8 +46,8 @@ import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJo
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
import {
DataGrid, GridColDef, GridRowParams, GridRowsProp,
} from "@mui/x-data-grid";
DataGridPro, GridColDef, GridRowParams, GridRowsProp,
} from "@mui/x-data-grid-pro";
import QDynamicForm from "../../components/QDynamicForm";
import MDTypography from "../../../components/MDTypography";
@ -108,7 +108,7 @@ function getDynamicStepContent(
{" "}
<br />
<MDBox height="100%">
<DataGrid
<DataGridPro
page={recordConfig.pageNo}
disableSelectionOnClick
autoHeight
@ -122,6 +122,7 @@ function getDynamicStepContent(
onPageChange={recordConfig.handlePageChange}
onRowClick={recordConfig.handleRowClick}
paginationMode="server"
pagination
density="compact"
loading={recordConfig.loading}
/>