PNSPS-frontend-MaterialUI/src/pages/Organization/DetailPage/CreditorHistoryTable.js

// material-ui
import * as React from 'react';
import { FiDataGrid } from "components/FiDataGrid";
import { useEffect } from "react";
import * as DateUtils from "utils/DateUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function CreditorHistoryTable({ recordList }) {
    const [rows, setRows] = React.useState(recordList);

    useEffect(() => {
        setRows(recordList);
    }, [recordList]);

    const columns = [
        {
            id: 'actionType',
            field: 'actionType',
            headerName: 'Action',
            flex: 2
        },
        {
            id: 'modified',
            field: 'modified',
            headerName: 'Datetime',
            flex: 1,
            renderCell: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'modifiedByName',
            field: 'modifiedByName',
            headerName: 'Modified By',
            width: 200,
        },
        
    ];

    return (
        <div style={{ height: "fit-content", width: '100%' }}>
            <FiDataGrid
                rows={rows}
                columns={columns}
                customPageSize={100}
            />
        </div>
    );
}