update table

src/components/FiDataGrid.js

@@ -1,8 +1,10 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
+    DataGrid, GridOverlay,
 } from "@mui/x-data-grid";
+import {FormattedMessage, useIntl} from "react-intl";
+import {Typography} from '@mui/material';
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -10,6 +12,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     hideFooterSelectedRowCount, rowModesModel, editMode, 
     pageSizeOptions, filterItems,
     ...props }) {
+    const intl = useIntl();
     const [_rows, set_rows] = React.useState([]);
     const [_columns, set_columns] = React.useState([]);
     const [_rowModesModel, set_rowModesModel] = React.useState({});
@@ -116,7 +119,32 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             set_filterItems(filterItems);
         }
     }, [filterItems]);
-    
+
+    function CustomNoRowsOverlay() {
+        return (
+            <GridOverlay>
+                <Typography variant="body1">
+                    <FormattedMessage id="rowsPerPage" />
+                </Typography>
+            </GridOverlay>
+        );
+    }
+
+    const CustomPagination = (props) => {
+        const { pagination } = props;
+        const { page, pageSize, rowCount } = pagination;
+
+        const startIndex = page * pageSize + 1;
+        const endIndex = Math.min((page + 1) * pageSize, rowCount);
+
+        return (
+            <div>
+                <div>{`${startIndex}-${endIndex} YES ${rowCount}`}</div>
+                {/* Render other pagination controls */}
+            </div>
+        );
+    };
+
     return (
         <DataGrid
             {...props}
@@ -130,6 +158,19 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
             filterModel={{items:_filterItems}}
             sx={_sx}
+            slots={{
+                noRowsOverlay: () => (
+                    CustomNoRowsOverlay()
+                )
+            }}
+            components={{
+                Pagination: CustomPagination,
+            }}
+            componentsProps={{
+                pagination: {
+                    labelRowsPerPage: intl.formatMessage({id: 'rowsPerPage'}),
+                }
+            }}
         />
     );
 }

src/translations/en.json

@@ -353,6 +353,8 @@
   "idNo": "ID No.",
   "country": "Country",
   "district": "District",
+  "noRecordFound": "No record found",
+  "rowsPerPage": "Rows Per Page",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -353,6 +353,8 @@
   "idNo": "身份证号码",
   "country": "国家",
   "district": "区",
+  "noRecordFound": "找不到記錄",
+  "rowsPerPage": "每页项数",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -353,6 +353,8 @@
   "idNo": "身分證號碼",
   "country": "國家",
   "district": "區",
+  "noRecordFound": "找不到記錄",
+  "rowsPerPage": "每頁項數",
 
   "Dashboard": "儀表板",
   "event": "活動"