PNSPS-frontend-MaterialUI/src/pages/Setting/SystemSetting/Table.js

// material-ui
import {
    // Box,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { FiDataGrid } from "components/FiDataGrid";
import { GET_SYS_PARAMS } from "utils/ApiPathConst";
import SafeHtml from 'components/SafeHtml';


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const Table = ({onRowClick, searchCriteria, refreshTrigger}) => {
    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);

    React.useEffect(() => {
        set_searchCriteria(searchCriteria);
    }, [searchCriteria]);

    const columns = [
        {
            field: 'name',
            headerName: 'Name',
            width: 300,
        },
        {
            id: 'type',
            field: 'type',
            headerName: 'Type',
            width: 150,
            valueGetter: (params) => {
                return params.row.type
            }
        },
        {
            id: 'category',
            field: 'category',
            headerName: 'Category',
            width: 150,
        },
        {
            id: 'value',
            field: 'value',
            headerName: 'Value',
            flex: 1,
            minWidth: 400,
            renderCell:(params)=>{
                return <SafeHtml html={params.value} />
            }
        },
    ];
    return (
     
            <MainCard elevation={0}
                      border={false}
                      content={false}
                      height='100%'
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
                    System Params
                </Typography>

                <div style={{ width: { xs: '92vw', sm: '96.5vw', md: "auto" }, }}>
                {/* <Box  width= '100%' sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'> */}
                    <FiDataGrid
                        columns={columns}
                        customPageSize={10}
                        getRowHeight={() => 'auto'}
                        onRowClick={onRowClick}
                        doLoad={React.useMemo(() => ({
                            url:GET_SYS_PARAMS,
                            params:_searchCriteria
                        }), [_searchCriteria, refreshTrigger])}
                    />
                {/* </Box> */}
                </div>
            </MainCard>
    );
};

export default Table;