PNSPS-frontend-MaterialUI/src/pages/AuditLog/AuditLogTable.js

// material-ui
import * as React from 'react';
import {FiDataGrid} from "components/FiDataGrid";
import {useEffect} from "react";
import * as DateUtils from "utils/DateUtils"
import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst";
import {useTheme} from "@emotion/react";
import {
    // Button,
    // Typography, 
    useMediaQuery
} from '@mui/material';
// ==============================|| EVENT TABLE ||============================== //

export default function AuditLogTable({searchCriteria}) {
    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);

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

    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

    const columns = [
        {
            id: 'modified',
            field: 'modified',
            headerName: 'Date',
            flex: isMdOrLg ? 1 : undefined,
            minWidth: 200,
            valueGetter:(params)=>{
                return DateUtils.datetimeStr(params?.value);
            }
        },
        {
            id: 'modifiedByName',
            field: 'modifiedByName',
            headerName: 'Username',
            flex: isMdOrLg ? 1 : undefined,
            minWidth: 80,
        },
        {
            id: 'tableName',
            field: 'tableName',
            headerName: 'Table Name',
            flex: isMdOrLg ? 1 : undefined,
            minWidth: 80,
        },
        {
            id: 'ref',
            field: 'ref',
            headerName: 'Ref',
            flex: isMdOrLg ? 1 : undefined,
            minWidth: 80,
        },
        {
            id: 'actionType',
            field: 'actionType',
            headerName: 'Action',
            flex: isMdOrLg ? 1 : undefined,
            minWidth: 80,
        },
        {
            id: 'oldData',
            field: 'oldData',
            headerName: 'Old Data',
            flex: isMdOrLg ? 5 : undefined,
            minWidth: 300,
        },
        {
            id: 'newData',
            field: 'newData',
            headerName: 'New Data',
            flex: isMdOrLg ? 5 : undefined,
            minWidth: 300,
        },
    ];

    // function handleRowDoubleClick(params) {
    //     navigate('/user/'+ params.id);
    // }

    return (
        <div style={{height: "fit-content", width: '100%'}}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                getRowHeight={() => 'auto'}
                doLoad={{
                    url: GET_AUDIT_LOG_LIST,
                    params: _searchCriteria
                }}
            />
        </div>
    );
}