Skip to content

T
Tia-dev
Commit 4ae4888d authored by r.kurnia's avatar r.kurnia
Browse files
Options

ytd ui

parent 67158f55
Hide whitespace changes
Inline Side-by-side
Showing with 375 additions and 85 deletions
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ 4ae4888d
...@@ -563,56 +563,56 @@ export default class TableSummaryTriputra extends Component { ...@@ -563,56 +563,56 @@ export default class TableSummaryTriputra extends Component {
name: `Revenue`, name: `Revenue`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} > <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderBottom: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div> <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="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <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', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}> <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: '#37b5e6' }}> <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> <span>{"YTD 2021"}</span>
</div> </div>
<div className="grid grid-5x"> <div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-1" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span> <span>{"Act"}</span>
</div> </div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span> <span>{"MB"}</span>
</div> </div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <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> <span>{"% of MB"}</span>
</div> </div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span> <span>{"2020"}</span>
</div> </div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span> <span>{"% of 2020"}</span>
</div> </div>
</div> </div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}> <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: '#37b5e6' }}> <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span> <span>{"FY"}</span>
</div> </div>
<div className="grid grid-4x" style={{ height: 34 }}> <div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span> <span>{"OL 2021"}</span>
</div> </div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <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> <span>{"MB 2021"}</span>
</div> </div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <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> <span>{"% of MB"}</span>
</div> </div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span> <span>{"2020"}</span>
</div> </div>
</div> </div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}> <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: '#37b5e6', height: 18 }}> <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span> <span>{""}</span>
</div> </div>
<div className="grid grid-1x"> <div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ backgroundColor: '#37b5e6' }}> <div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span> <span>{"% of 2020"}</span>
</div> </div>
</div> </div>
...@@ -620,76 +620,366 @@ export default class TableSummaryTriputra extends Component { ...@@ -620,76 +620,366 @@ export default class TableSummaryTriputra extends Component {
</div> </div>
</th> </th>
), ),
setCellProps: () => ({ setCellProps: () => ({ style2 }),
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div> <div>
<div className="grid grid-3x content-center"> <div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div className="column-1"> <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div className="grid grid-5x content-center"> <div style={{ textAlign: 'right', width: '20%' }}>
<div className="column-1"> 111
<div style={{ textAlign: 'right', width: 90 }}> </div>
111 <div style={{ textAlign: 'right', width: '20%' }}>
</div> 112
</div> </div>
<div className="column-2"> <div style={{ textAlign: 'right', width: '20%' }}>
<div style={{ textAlign: 'right', width: 90 }}> 113
112 </div>
</div> <div style={{ textAlign: 'right', width: '20%' }}>
</div> 114
<div className="column-3"> </div>
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: '20%' }}>
113 115
</div>
</div>
<div className="column-4">
<div style={{ textAlign: 'right', width: 90 }}>
114
</div>
</div>
<div className="column-5">
<div style={{ textAlign: 'right', width: 90 }}>
115
</div>
</div>
</div> </div>
</div> </div>
<div className="column-2"> <div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div className="grid grid-4x content-center"> <div style={{ textAlign: 'right', width: '25%' }}>
<div className="column-1"> 221
<div style={{ textAlign: 'right', width: 90 }}> </div>
221 <div style={{ textAlign: 'right', width: '25%' }}>
</div> 222
</div> </div>
<div className="column-2"> <div style={{ textAlign: 'right', width: '25%' }}>
<div style={{ textAlign: 'right', width: 90 }}> 223
222 </div>
</div> <div style={{ textAlign: 'right', width: '25%' }}>
</div> 224
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
223
</div>
</div>
<div className="column-4">
<div style={{ textAlign: 'right', width: 90 }}>
224
</div>
</div>
</div> </div>
</div> </div>
<div className="column-3"> <div style={{ display: 'grid', width: 200 }}>
<div className="grid grid-1x content-center"> <div style={{ textAlign: 'right' }}>
<div className="column-1"> 331
<div style={{ textAlign: 'right', width: 90 }}> </div>
333 </div>
</div> </div>
</div> </div>
)
}
}
}, {
name: `EBITDA`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `TPAT`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `NPAT`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", paddingLeft: 0 }} >
<div style={{ borderLeft: '1px #fff solid', borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="column-3" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x" style={{ height: 25}}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"MB 2021"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', height: 40, color: 'black' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"2020"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 66, width: 200 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x" style={{ height: 25 }}>
<div className="column-1" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#008bffc4', height: 40 }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '20%' }}>
111
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
<div style={{ textAlign: 'right', width: '20%' }}>
115
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ textAlign: 'right', width: '25%' }}>
221
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
222
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div> </div>
</div> </div>
</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