fix for pagination on tables

src/page.routes.tsx

@@ -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
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+ * 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,
+ 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.
+ 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
+ Once you add a new route on this file it will be visible automatically on
-  the Navbar.
+ the Navbar.
 
-  For adding a new route you can follow the existing routes in the routes array.
+ 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.
+ 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.
+ 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
+ 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.
+ 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.
+ 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.
+ 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 .
+ 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
+ 8. The `description` key is used to define the description of
-          a route under its name.
+ 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,
+ 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.
+ 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.
+ 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: "RTL", route: "/pages/rtl"},
-               { name: "widgets", route: "/pages/widgets" },
+               {name: "widgets", route: "/pages/widgets"},
-               { name: "charts", route: "/pages/charts" },
+               {name: "charts", route: "/pages/charts"},
                {
                   name: "notfications",
                   route: "/pages/notifications",

src/qqq/pages/entity-list/index.tsx

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

src/qqq/pages/process-run/index.tsx

@@ -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,
+   DataGridPro, GridColDef, GridRowParams, GridRowsProp,
-} from "@mui/x-data-grid";
+} 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}
                   />