PNSPS-frontend-MaterialUI/src/components/FiDataGrid.js

// material-ui
import * as React from 'react';
import {
    DataGrid, GridOverlay,
} from "@mui/x-data-grid";
import {FormattedMessage, useIntl} from "react-intl";
import {Typography} from '@mui/material';

// ==============================|| EVENT TABLE ||============================== //

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({});
    const [_editMode, set_editMode] = React.useState("row");
    const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]);
    const [_filterItems, set_filterItems] = React.useState([]);

    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,
            borderColor: "#EEE",
        },
        '& .MuiDataGrid-footerContainer': {
            border: 1,
            borderColor: "#EEE"
        },
    });


    React.useEffect(() => {
        if (sx) {
            set_sx(sx);
        }
        if (hideFooterSelectedRowCount) {
            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
        }
        if (rowModesModel) {
            set_rowModesModel(rowModesModel)
        }
        if (rows) {
            set_rows(rows)
        }
        if (columns) {
            set_columns(columns)
        }
        if (pageSizeOptions) {
            set_pageSizeOptions(pageSizeOptions)
        }
        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)
        }
    }, [columns]);

    React.useEffect(() => {
        if (pageSizeOptions) {
            set_pageSizeOptions(pageSizeOptions)
        }
    }, [pageSizeOptions]);

    React.useEffect(() => {
        if(autoHeight != undefined){
            set_autoHeight(autoHeight)
        }
    }, [autoHeight]);

    React.useEffect(() => {
        if(editMode){
            set_editMode(editMode);
        }
    }, [editMode]);
    
    React.useEffect(() => {
        if(filterItems){
            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}
            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: CustomPagination,
            }}
            componentsProps={{
                pagination: {
                    labelRowsPerPage: intl.formatMessage({id: 'rowsPerPage'}),
                }
            }}
        />
    );
}