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>
)
}
}