import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'
import NumberFormat from 'react-number-format';
import * as R from 'ramda'


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

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

export default class TableSummaryTriputra extends Component {
    render() {
        let datas = [
            ["ABCD", { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6"  }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6"  }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6"  }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6"  }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" } ],
            ["Total Assets", { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }]
        ]
        let datasHistorical = [
            ["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
            ["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
        ]
        let datasMTD = [
            ["ABCD", { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8", i: "9", j: "10", k: "11", l: "12" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4" }, { q: "1" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8" }],
            ["Total Assets", { a: "13", b: "14", c: "15", d: "16", e: "17", f: "18", g: "19", h: "20", i: "21", j: "22", k: "24", l: "25" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }]
        ]
        let datasYTD = [
            ["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
            ["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
        ]
        let dataTable2 = this.props.dataTable

        const columnMTD = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ width: 300 }}>
                               { val }
                            </div>
                        )
                    }
                }
            }, {
                name: `MTD 2021`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-4x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 65 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"Ravenue"}</span>
                                    </div>
                                    <div className="grid grid-3x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"EBITDA"}</span>
                                    </div>
                                    <div className="grid grid-3x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"TPAT"}</span>
                                    </div>
                                    <div className="grid grid-3x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"NPAT"}</span>
                                    </div>
                                    <div className="grid grid-3x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.a}
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.b}
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.c}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-2">
                                    <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.d}
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.e}
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.f}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.g}
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.h}
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.i}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-4">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.j}
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.k}
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {val.l}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                },
            }, {
                name: `MTD 2021 (OPTIONAL)`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="column-5" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 65, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"Cash Flow"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"CFO"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"CFI"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"CFF"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Net CF"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
                                        <span>{"OS Bank Loan"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"KI"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"WC"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Others"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Total"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', width: 200, alignItems: 'center', backgroundColor: '#07a7d0', height: 65 }}>
                                    <span>{"OS SHL"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
                                        <span>{"Balance Sheet"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Cash & Bank"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"CA"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"CL"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                            <span>{"Equity"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 887 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
                                        <span>{"Financial Ratio"}</span>
                                    </div>
                                    <div className="grid grid-2x" style={{ height: 25}}>
                                        <div className="column-1 grid grid-4x" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
                                            <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"CR"}</span>
                                            </div>
                                            <div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"DER"}</span>
                                            </div>
                                            <div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"Debt to EBITDA"}</span>
                                            </div>
                                            <div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"to Interest"}</span>
                                            </div>
                                        </div>
                                        <div className="column-2 grid grid-4x" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
                                            <div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"AR Days"}</span>
                                            </div>
                                            <div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"Inv Days"}</span>
                                            </div>
                                            <div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"AP Days"}</span>
                                            </div>
                                            <div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
                                                <span>{"CCC"}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div  style={{ display: 'flex', justifyContent: 'space-between'}}>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            10
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            20
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            30
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            40
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            10
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            20
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            30
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            40
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 150 }}>
                                        <div style={{ textAlign: 'right'}}>
                                            10
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            10
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            20
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            30
                                        </div>
                                        <div style={{ width: '20%', textAlign: 'right'}}>
                                            40
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 834, justifyContent: 'space-between'}}>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            10
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            20
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            30
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            40
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            10
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            20
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            30
                                        </div>
                                        <div style={{ width: '9%', textAlign: 'right'}}>
                                            40
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                },
            }
        ]

        const columnYTD = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ width: 300 }}>
                               { val }
                            </div>
                        )
                    }
                }
            }, {
                name: `Revenue`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
                            <div style={{ borderLeft: '2px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
                            <div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
                                    <div style={{ borderLeft: '1px #fff solid', borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"YTD 2021"}</span>
                                    </div>
                                    <div className="grid grid-5x" style={{ height: 25}}>
                                        <div className="column-1" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"FY"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"OL 2021"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB 2021"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{""}</span>
                                    </div>
                                    <div className="grid grid-1x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            111
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            112
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            113
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            114
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            115
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            221
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            222
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            223
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            224
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 200 }}>
                                        <div style={{ textAlign: 'right' }}>
                                            331
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `EBITDA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
                            <div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
                            <div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"YTD 2021"}</span>
                                    </div>
                                    <div className="grid grid-5x" style={{ height: 25}}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"FY"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"OL 2021"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB 2021"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{""}</span>
                                    </div>
                                    <div className="grid grid-1x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            111
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            112
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            113
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            114
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            115
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            221
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            222
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            223
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            224
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 200 }}>
                                        <div style={{ textAlign: 'right' }}>
                                            331
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `TPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
                            <div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
                            <div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"YTD 2021"}</span>
                                    </div>
                                    <div className="grid grid-5x" style={{ height: 25}}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"FY"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"OL 2021"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB 2021"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{""}</span>
                                    </div>
                                    <div className="grid grid-1x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            111
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            112
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            113
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            114
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            115
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            221
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            222
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            223
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            224
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 200 }}>
                                        <div style={{ textAlign: 'right' }}>
                                            331
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `NPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
                            <div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
                            <div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"YTD 2021"}</span>
                                    </div>
                                    <div className="grid grid-5x" style={{ height: 25}}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"Act"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{"FY"}</span>
                                    </div>
                                    <div className="grid grid-4x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"OL 2021"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"MB 2021"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
                                            <span>{"% of MB"}</span>
                                        </div>
                                        <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"2020"}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
                                    <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
                                        <span>{""}</span>
                                    </div>
                                    <div className="grid grid-1x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{"% of 2020"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            111
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            112
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            113
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            114
                                        </div>
                                        <div style={{ textAlign: 'right', width: '20%' }}>
                                            115
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            221
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            222
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            223
                                        </div>
                                        <div style={{ textAlign: 'right', width: '25%' }}>
                                            224
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 200 }}>
                                        <div style={{ textAlign: 'right' }}>
                                            331
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }
        ]

        const columnHistorical = [
            {
                name: "Company",
                options: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                        </TableCell>
                    ),
                    setCellProps: () => ({ style }),
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ width: 300 }}>
                               { val }
                            </div>
                        )
                    }
                }
            }, {
                name: `Revenue`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.e}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.f}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.g}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.h}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.i}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.j}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.k}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `EBITDA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `TPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `NPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `Total Asset`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: `Total Equility`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                            <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                            <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2010"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2011"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2012"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2013"}</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2014"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2015"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2016"}</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2017"}</span>
                                        </div>
    
                                    </div>
                                    <div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2018"}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2019"}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{"2020"}</span>
                                        </div>
                                        {/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                            <span>{"2021"}</span>
                                        </div> */}
                                    </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-4x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.a}
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.b}
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.c}
                                            </div>
                                        </div>
                                        {/* <div className="col-4">
                                            <div style={{ textAlign: 'center', width: 90 }}>
                                                {val.d}
                                            </div>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }
        ]

        const columnCPSM = [
        {
            name: "Company",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                           { val }
                        </div>
                    )
                }
            }
        }, {
            name: `Revenue`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-2x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                        <span>{"2020"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"OL 2021"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"MB 2021"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"% of MB"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{"2022"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5,  backgroundColor: '#1c71b8' }}>
                                        <span>{"2023"}</span>
                                    </div>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    console.log(tableMeta)
                    console.log(val)

                    return (
                        <div>
                            <div className="grid grid-2x content-center">
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.d}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.e}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.f}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `EBITDA`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-2x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                        <span>{"2020"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"OL 2021"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"MB 2021"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"% of MB"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{"2022"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{"2023"}</span>
                                    </div>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-2x content-center">
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.d}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.e}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.f}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `NPAT`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-2x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                        <span>{"2020"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"OL 2021"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"MB 2021"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"% of MB"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{"2022"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{"2023"}</span>
                                    </div>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-2x content-center">
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.d}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.e}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.f}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `TPAT`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-2x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                        <span>{"2020"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"OL 2021"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"MB 2021"}</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                        <span>{"% of MB"}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{"2022"}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{"2023"}</span>
                                    </div>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-2x content-center">
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.d}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.e}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'center', width: 90 }}>
                                            {val.f}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `TPAT`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `EBITDA Margin`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `TPAT Margin`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `% Revenue YoY`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `% EBITDA YoY`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `TPAT Margin`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: `% NPAT YoY`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                    <span>{"OL 2021"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                    <span>{"2022"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                    <span>{"2023"}</span>
                                </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                    <div className="col-1">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.a}
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.b}
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {val.c}
                                        </div>
                                    </div>
                            </div>
                        </div>
                    )
                }
            }
        }
        ]

        const columns = []

        return (
            <div>
                <div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
                    <MuiThemeProvider theme={getMuiTheme()}>
                        <MUIDataTable
                            data={this.props.type === 4 ? datasHistorical : this.props.type === 1 ? datasMTD : this.props.type === 2 ? datasYTD : this.props.type === 3 ? datas : datas}
                            columns={this.props.type === 1 ? columnMTD : this.props.type === 2 ? columnYTD : this.props.type === 3 ? columnCPSM : this.props.type === 4 ? columnHistorical : columns}
                            options={options}
                        />
                    </MuiThemeProvider>
                </div>
            </div>
        )
    }
}
