Skip to content

T
Tia-dev
Commit c9bde168 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'rifka' into 'master' 

ytd ui

See merge request !669
parents 9f1c7dae adcce4ba
Hide whitespace changes
Inline Side-by-side
Showing with 383 additions and 84 deletions
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ c9bde168
......@@ -563,52 +563,167 @@ export default class TableSummaryTriputra extends Component {
name: `Revenue`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2010"}</span>
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '2px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderLeft: '1px #fff solid', borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2011"}</span>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2012"}</span>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2013"}</span>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2014"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2015"}</span>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2016"}</span>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2017"}</span>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
<div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2018"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2019"}</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 style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `EBITDA`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
{/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"2021"}</span>
</div> */}
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
......@@ -616,72 +731,256 @@ export default class TableSummaryTriputra extends Component {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.a}
</div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.b}
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.c}
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.g}
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.h}
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.i}
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.j}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `TPAT`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.k}
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `NPAT`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
{/* <div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
</div> */}
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment