update Fi Data Grid

src/components/FiDataGrid.js

@@ -9,9 +9,8 @@ import {TablePagination, Typography} from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
 export function FiDataGrid({ rows, columns, sx, autoHeight,
-    hideFooterSelectedRowCount, rowModesModel, editMode, 
-    pageSizeOptions, filterItems,
-    ...props }) {
+                               hideFooterSelectedRowCount, rowModesModel, editMode,
+                               pageSizeOptions, filterItems, ...props }) {
     const intl = useIntl();
     const [_rows, set_rows] = React.useState([]);
     const [_columns, set_columns] = React.useState([]);
@@ -20,13 +19,12 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]);
     const [_filterItems, set_filterItems] = React.useState([]);
 
+    const [page, setPage] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(10);
     const [_autoHeight, set_autoHeight] = React.useState(true);
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
     const [_sx, set_sx] = React.useState({
         padding: "4 2 4 2",
-        // boxShadow: 1,
-        // border: 1,
-        // borderColor: '#DDD',
         '& .MuiDataGrid-cell': {
             borderTop: 1,
             borderBottom: 1,
@@ -38,7 +36,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         },
     });
 
-
     React.useEffect(() => {
         if (sx) {
             set_sx(sx);
@@ -58,67 +55,29 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         if (pageSizeOptions) {
             set_pageSizeOptions(pageSizeOptions)
         }
-        if(autoHeight != undefined){
+        if(autoHeight !== undefined){
             set_autoHeight(autoHeight)
         }
         if(editMode){
             set_editMode(editMode);
         }
-    }, []);
-
-    React.useEffect(() => {
-        if (sx) {
-            set_sx(sx);
-        }
-    }, [sx]);
-
-    React.useEffect(() => {
-        if (hideFooterSelectedRowCount) {
-            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
-        }
-    }, [hideFooterSelectedRowCount]);
-
-    React.useEffect(() => {
-        if (rowModesModel) {
-            set_rowModesModel(rowModesModel)
-        }
-    }, [rowModesModel]);
-
-    React.useEffect(() => {
-        if (rows) {
-            set_rows(rows)
-        }
-    }, [rows]);
-
-    React.useEffect(() => {
-        if (columns) {
-            set_columns(columns)
+        if(filterItems){
+            set_filterItems(filterItems);
         }
-    }, [columns]);
+    }, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems]);
 
-    React.useEffect(() => {
-        if (pageSizeOptions) {
-            set_pageSizeOptions(pageSizeOptions)
-        }
-    }, [pageSizeOptions]);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
 
-    React.useEffect(() => {
-        if(autoHeight != undefined){
-            set_autoHeight(autoHeight)
-        }
-    }, [autoHeight]);
+    const handleChangePageSize = (event) => {
+        setPageSize(parseInt(event.target.value, 10));
+        setPage(0);
+    };
 
-    React.useEffect(() => {
-        if(editMode){
-            set_editMode(editMode);
-        }
-    }, [editMode]);
-    
-    React.useEffect(() => {
-        if(filterItems){
-            set_filterItems(filterItems);
-        }
-    }, [filterItems]);
+    const startIndex = page * pageSize;
+    const endIndex = (page + 1) * pageSize;
+    const slicedRows = _rows.slice(startIndex, endIndex);
 
     function CustomNoRowsOverlay() {
         return (
@@ -131,39 +90,42 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     }
 
     return (
-        <DataGrid
-            {...props}
-            rows={_rows}
-            columns={_columns}
-            disableColumnMenu
-            rowModesModel={_rowModesModel}
-            pageSizeOptions={_pageSizeOptions}
-            editMode={_editMode}
-            autoHeight={_autoHeight}
-            hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
-            filterModel={{items:_filterItems}}
-            sx={_sx}
-            slots={{
-                noRowsOverlay: () => (
-                    CustomNoRowsOverlay()
-                )
-            }}
-            components={{
-                Pagination: () => (
-                    <TablePagination
-                        labelDisplayedRows={
-                            ({ from, to, count }) => {
-                                return '' + from + '-' + to + ' ' + count
+        <div style={{ height: 400, width: "100%" }}>
+            <DataGrid
+                {...props}
+                rows={slicedRows}
+                columns={_columns}
+                disableColumnMenu
+                rowModesModel={_rowModesModel}
+                pageSizeOptions={_pageSizeOptions}
+                editMode={_editMode}
+                autoHeight={_autoHeight}
+                hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
+                filterModel={{ items: _filterItems }}
+                sx={_sx}
+                components={{
+                    noRowsOverlay: CustomNoRowsOverlay,
+                    Pagination: () => (
+                        <TablePagination
+                            count={_rows.length}
+                            page={page}
+                            rowsPerPage={pageSize}
+                            rowsPerPageOptions={[5, 10, 25, 50]}
+                            labelDisplayedRows={({ from, to, count }) =>
+                                `${from}-${to} ${intl.formatMessage({ id: "of" })} ${count}`
                             }
-                        }
-                    />
-                ),
-            }}
-            componentsProps={{
-                pagination: {
-                    labelRowsPerPage: intl.formatMessage({id: 'rowsPerPage'}) + ":",
-                }
-            }}
-        />
+                            labelRowsPerPage={<FormattedMessage id="rowsPerPage" />}
+                            onPageChange={handleChangePage}
+                            onRowsPerPageChange={handleChangePageSize}
+                        />
+                    ),
+                }}
+                componentsProps={{
+                    pagination: {
+                        labelRowsPerPage: intl.formatMessage({ id: "rowsPerPage" }) + ":",
+                    },
+                }}
+            />
+        </div>
     );
 }

src/translations/en.json

@@ -359,6 +359,7 @@
   "keyword": "Key word",
   "dateFrom": "Date(From)",
   "dateTo": "Date(To)",
+  "of": "of",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -359,6 +359,7 @@
   "keyword": "关键字",
   "dateFrom": "日期(从)",
   "dateTo": "日期(到)",
+  "of": "於",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -359,6 +359,7 @@
   "keyword": "關鍵字",
   "dateFrom": "日期(從)",
   "dateTo": "日期(到)",
+  "of": "於",
 
   "Dashboard": "儀表板",
   "event": "活動"