TableProgressReport.js

import React, { Component } from "react";
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";

var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable4());

const options = ct.customOptionsFixedColumnMonitoring();
const style = {
    position: "sticky",
    left: 0,
    zIndex: 101,
    background: "white",
};
const style2 = {
    position: "sticky",
    background: "white",
    zIndex: 100,
};

export default class TableProgressReport extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        let dataTable2 = this.props.dataTable;
        // console.log(this.props);
        const handleValue = (tableMeta, itemName) => {
            let value = tableMeta.rowData[1].filter((val) => val.report_name == itemName)
            // console.log(itemName)
            // console.log(tableMeta.rowData)
            // console.log(value)
            return value[0].status_report == null || value[0].status_report == '' ? 'N/A' : value[0].status_report
        }
        const columnMB = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
                            <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>;
                    },
                },
            },
            {
                name: `INPUT MASTER BUDGET`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                            <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Profit Loss"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Tax Planning"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Balance Sheet"}</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Fixed Assets Movement"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Cash Flow"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"CAT"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Submission Status"}</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Operating Indicator"}</span>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return (
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Submission Status')}</div>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
                                    </div>
                                </div>
                            </div>
                        )
                    },
                },
            }
        ];

        const columnMR = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
                            <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>;
                    },
                },
            },
            {
                name: `INPUT MONTHLY REPORT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                            <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x">
                                <div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Profit Loss"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Tax Planning"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Balance Sheet"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Fixed Assets Movement"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"LOCF"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Cash Flow"}</span>
                                    </div>
                                </div>
                                <div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"CAT"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Monthly Status"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Operating Indicator"}</span>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return (
                            <div className="grid grid-3x">
                                <div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'List of Credit Facilities')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
                                    </div>
                                </div>
                                <div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Monthly Status')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
                                    </div>
                                </div>
                            </div>
                        )
                    },
                },
            }
        ];

        const columnRO = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
                            <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>;
                    },
                },
            },
            {
                name: `INPUT ROLLING OUTLOOK`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                            <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Profit Loss"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Tax Planning"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Balance Sheet"}</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Cash Flow"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"CAT"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Rolling Status"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Operating Indicator"}</span>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return (
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Rolling Status')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
                                    </div>
                                </div>
                            </div>
                        )
                    },
                },
            }
        ];

        const columnOLPA = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
                            <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>;
                    },
                },
            },
            {
                name: `INPUT OUTLOOK PA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                            <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Profit Loss"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Tax Planning"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Balance Sheet"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Cash Flow"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"CAT"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"OLPA Status"}</span>
                                    </div>
                                    {/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
                                        <span>{"Operating Indicator"}</span>
                                    </div> */}
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return (
                            <div className="grid grid-2x">
                                <div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'OLPA Status')}</div>
                                    </div>
                                    {/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                        <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
                                    </div> */}
                                </div>
                            </div>
                        )
                    },
                },
            }
        ];

        return (
            <div>
                <div style={{ padding: "0px 20px 20px 20px", width: this.props.width - (this.props.open === true ? 350 : 100) }}>
                    <MuiThemeProvider theme={getMuiTheme()}>
                        <MUIDataTable
                            data={dataTable2}
                            columns={this.props.typeReport.includes("MASTER") ? columnMB : this.props.typeReport.includes("MONTHLY") ? columnMR : this.props.typeReport.includes("ROLLING") ? columnRO : columnOLPA}
                            options={options}

                        />
                    </MuiThemeProvider>
                </div>
            </div>
        );
    }
}