TableSummaryTriputra.js

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 dataTable2 = this.props.dataTable

        const columnMTD = [
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                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 }}>
                                {
                                    tableMeta.rowData[2] == 0 ?
                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
                                        :
                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[2]) }}>
                                            <span style={{ fontSize: 12 }}>{val}</span>
                                        </div>
                                }
                            </div>
                        )
                    }
                }
            }, {
                name: `MTD ${Number(this.props.periode)}`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', top: 0, 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) => {
                        // if (tableMeta.rowData[3] == "ABA" ) {
                        //     console.log(tableMeta.rowData);
                        // }
                        return (
                            <div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1" style={{ padding: 0, left: -15}} >
                                                <div style={{ flex: 1}}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[4])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[5])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                suffix={'%'}
                                                                value={tableMeta.rowData[6]}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[7])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[8])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                suffix={'%'}
                                                                disabled={true}
                                                                value={tableMeta.rowData[9]}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[10])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[11])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                suffix={'%'}
                                                                disabled={true}
                                                                value={tableMeta.rowData[12]}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-4">
                                        <div className="grid grid-3x content-center">
                                            <div className="col-1">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[13])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-2">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={(tableMeta.rowData[14])}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <div className="col-3">
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={val}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                suffix={'%'}
                                                                disabled={true}
                                                                value={tableMeta.rowData[15]}
                                                            />
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                },
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            },  {
                name: `MTD ${Number(this.props.periode)} (OPTIONAL)`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', top: 0, 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: '#000000c4' }}>
                                        <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: '#000000c4' }}>
                                        <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: '#000000c4' }}>
                                        <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={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[16])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[17])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[18])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[19])}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[20])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[21])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[22])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[23])}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'grid', width: 150 }}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[24])}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[25])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[26])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[27])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[28])}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 860, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[29])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[30])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[31])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[32])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[33])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[34])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[35])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[36])}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                },
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }
        ]

        const columnYTD = [
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                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 }}>
                                {
                                    tableMeta.rowData[2] == 0 ?
                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
                                        :
                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[2]) }}>
                                            <span style={{ fontSize: 12 }}>{val}</span>
                                        </div>
                                }
                            </div>
                        )
                    }
                }
            }, {
                name: `Revenue`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${this.props.periode}`}</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: '#000000c4' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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-5x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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={{ flex: 1 }}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[4])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[5])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={(tableMeta.rowData[6])}
                                                        // value={Number(String(tableMeta.rowData[6]).substr(0, String(tableMeta.rowData[6]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[7])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[8]}
                                                        // value={Number(String(tableMeta.rowData[8]).substr(0, String(tableMeta.rowData[8]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[9])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[10])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[11]}
                                                        // value={Number(String(tableMeta.rowData[11]).substr(0, String(tableMeta.rowData[11]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[12])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[13]}
                                                        // value={Number(String(tableMeta.rowData[13]).substr(0, String(tableMeta.rowData[13]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `EBITDA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</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: '#000000c4' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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-5x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[14])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[15])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[16]}
                                                        // value={Number(String(tableMeta.rowData[16]).substr(0, String(tableMeta.rowData[16]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[17])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[18]}
                                                        // value={Number(String(tableMeta.rowData[18]).substr(0, String(tableMeta.rowData[18]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[19])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[20])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[21]}
                                                        // value={Number(String(tableMeta.rowData[21]).substr(0, String(tableMeta.rowData[21]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[22])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[23]}
                                                        // value={Number(String(tableMeta.rowData[23]).substr(0, String(tableMeta.rowData[23]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `TPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</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: '#000000c4' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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-5x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[24])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[25])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[26]}
                                                        // value={Number(String(tableMeta.rowData[26]).substr(0, String(tableMeta.rowData[26]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[27])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[28]}
                                                        // value={Number(String(tableMeta.rowData[28]).substr(0, String(tableMeta.rowData[28]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[29])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[30])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[31]}
                                                        // value={Number(String(tableMeta.rowData[31]).substr(0, String(tableMeta.rowData[31]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[32])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[33]}
                                                        // value={Number(String(tableMeta.rowData[33]).substr(0, String(tableMeta.rowData[33]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `NPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</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: '#000000c4' }}>
                                            <span>{"MB"}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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-5x" style={{ height: 25 }}>
                                        <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: '#000000c4' }}>
                                            <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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
                                            <span>{`% of ${Number(this.props.periode) - 1}`}</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={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[34])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[35])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[36]}
                                                        // value={Number(String(tableMeta.rowData[36]).substr(0, String(tableMeta.rowData[36]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[37])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[38]}
                                                        // value={Number(String(tableMeta.rowData[38]).substr(0, String(tableMeta.rowData[38]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[39])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[40])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        suffix={"%"}
                                                        value={tableMeta.rowData[41]}
                                                        // value={Number(String(tableMeta.rowData[41]).substr(0, String(tableMeta.rowData[41]).length - 1)).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={val}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={(tableMeta.rowData[42])}
                                                    />
                                                }
                                            />
                                        </div>
                                        <div style={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[45] ? '#5198ea' : '#000000de', fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            suffix={"%"}
                                                            value={tableMeta.rowData[43]}
                                                            // value={Number(String(tableMeta.rowData[43]).substr(0, String(tableMeta.rowData[43]).length - 1)).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            },  
            {
                name: "",
                options: {
                    display: false
                }
            }, 
        ]

        const columnHistorical = [
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                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 }}>
                                {
                                    tableMeta.rowData[2] == 0 ?
                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
                                        :
                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[2]) }}>
                                            <span style={{ fontSize: 12 }}>{val}</span>
                                        </div>
                                }
                            </div>
                        )
                    }
                }
            }, {
                name: `Revenue`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 10 }</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 9 }</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 8 }</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 7 }</span>
                                        </div>
                                        <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 6 }</span>
                                        </div>
                                    </div>
                                    <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                        <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 5 }</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 4 }</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 3 }</span>
                                        </div>
                                        <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 2 }</span>
                                        </div>
                                        <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                            <span>{ Number(this.props.periode) - 1 }</span>
                                        </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[4]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[5]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[6]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[7]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[8]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[9]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[10]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[11]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[12]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[13]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `EBITDA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 10 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 9 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 8 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 7 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 6 }</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 5 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 4 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 3 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 2 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 1 }</span>
                                    </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[15]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[16]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[17]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[18]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[19]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[20]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[21]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[22]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[23]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[24]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `TPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 10 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 9 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 8 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 7 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 6 }</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 5 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 4 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 3 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 2 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 1 }</span>
                                    </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[26]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[27]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[28]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[29]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[30]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[31]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[32]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[33]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[34]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[35]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `NPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 10 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 9 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 8 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 7 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 6 }</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 5 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 4 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 3 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 2 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 1 }</span>
                                    </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[37]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[38]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[39]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[40]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[41]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[42]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[43]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[44]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[45]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[46]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `Total Asset`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 10 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 9 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 8 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 7 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 6 }</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 5 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 4 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 3 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 2 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 1 }</span>
                                    </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[48]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[49]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[50]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[51]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[52]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[53]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[54]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[55]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[56]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[57]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `Total Equility`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 10 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 9 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 8 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 7 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 6 }</span>
                                    </div>
                                </div>
                                <div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
                                    <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 5 }</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 4 }</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 3 }</span>
                                    </div>
                                    <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 2 }</span>
                                    </div>
                                    <div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
                                        <span>{ Number(this.props.periode) - 1 }</span>
                                    </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 className="col-1"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[59]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[60]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[61]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[62]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[63]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                    <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[64]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-3"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[65]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-4"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[66]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-1"> */}
                                        <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[67]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                        {/* <div className="col-2"> */}
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[68]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        {/* </div> */}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
            {
                name: "",
                options: {
                    display: false
                }
            }, 
        ]

        const columnCPSM = [
            {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                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 }}>
                                {
                                    tableMeta.rowData[2] == 0 ?
                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
                                        :
                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[2]) }}>
                                            <span style={{ fontSize: 12 }}>{val}</span>
                                        </div>
                                }
                            </div>
                        )
                    }
                }
            }, {
                name: `Revenue`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', top: 0, 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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</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>{`${Number(this.props.periode) + 1}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5,  backgroundColor: '#1c71b8' }}>
                                            <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 86, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[4]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[5]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[6]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            suffix={'%'}
                                                            value={tableMeta.rowData[7]}
                                                            // value={Number(tableMeta.rowData[7]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[8]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1}}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' ,                               fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[9]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `EBITDA`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', top: 0, 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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</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>{`${Number(this.props.periode) + 1}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                            <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[10]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[11]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[12]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            suffix={'%'}
                                                            value={tableMeta.rowData[13]}
                                                            // value={Number(tableMeta.rowData[13]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[14]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[15]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `TPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, backgroundColor: '#1c71b8', top: 0 , 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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</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>{`${Number(this.props.periode) + 1}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                            <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 80, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[16]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[17]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[18]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            suffix={'%'}
                                                            value={tableMeta.rowData[19]}
                                                            // value={Number(tableMeta.rowData[19]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[20]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[21]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `NPAT`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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>{`${Number(this.props.periode) - 1}`}</span>
                                        </div>
                                        <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`OL ${Number(this.props.periode)}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
                                            <span>{`MB ${Number(this.props.periode)}`}</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>{`${Number(this.props.periode) + 1}`}</span>
                                        </div>
                                        <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                            <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 86, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[22]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[23]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[24]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="grid grid-3x content-center">
                                        <div className="col-1">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[25]}
                                                            // value={Number(tableMeta.rowData[25]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[26]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[27]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `ROIC`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[28]).toFixed(2)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[29]).toFixed(2)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[30]).toFixed(2)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `EBITDA Margin`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[31])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[32])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[33])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `TPAT Margin`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[34])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[35])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={(tableMeta.rowData[36])}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `% Revenue YoY`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            suffix={'%'}
                                                            value={tableMeta.rowData[37]}
                                                            // value={Number(tableMeta.rowData[37]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[38]}
                                                            // value={Number(tableMeta.rowData[38]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            suffix={'%'}
                                                            placeholder=""
                                                            disabled={true}
                                                            value={tableMeta.rowData[39]}
                                                            // value={Number(tableMeta.rowData[39]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `% EBITDA YoY`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[40]}
                                                            // value={Number(tableMeta.rowData[40]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[41]}
                                                            // value={Number(tableMeta.rowData[41]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[42]}
                                                            // value={Number(tableMeta.rowData[42]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `% TPAT YoY`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[43]}
                                                            // value={Number(tableMeta.rowData[43]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[44]}
                                                            // value={Number(tableMeta.rowData[44]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[45]}
                                                            // value={Number(tableMeta.rowData[45]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: `% NPAT YoY`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <th style={{ ...style2, top: 0, 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 ${Number(this.props.periode)}`}</span>
                                    </div>
                                    <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 1}`}</span>
                                    </div>
                                    <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8' }}>
                                        <span>{`${Number(this.props.periode) + 2}`}</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={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[46]}
                                                            // value={Number(tableMeta.rowData[46]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[47]}
                                                            // value={Number(tableMeta.rowData[47]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                        <div className="col-3">
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={val}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[49] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            suffix={'%'}
                                                            disabled={true}
                                                            value={tableMeta.rowData[48]}
                                                            // value={Number(tableMeta.rowData[48]).toFixed(1)}
                                                        />
                                                    }
                                                />
                                            </div>
                                        </div>
                                </div>
                            </div>
                        )
                    }
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            }, {
                name: "",
                options: {
                    display: false
                }
            },  
        ]

        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={dataTable2}
                            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>
        )
    }
}