Skip to content

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

ytd ui

parent 67158f55
Show 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 {
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", 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-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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">
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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', 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>
</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>
</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>
</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>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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: 34 }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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', 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>
</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>
</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>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', height: 18 }}>
<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">
<div className="column-1" style={{ backgroundColor: '#37b5e6' }}>
<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>
......@@ -620,76 +620,366 @@ export default class TableSummaryTriputra extends Component {
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="column-1">
<div className="grid grid-5x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
<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>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
<div style={{ textAlign: 'right', width: '20%' }}>
112
</div>
</div>
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
<div style={{ textAlign: 'right', width: '20%' }}>
113
</div>
</div>
<div className="column-4">
<div style={{ textAlign: 'right', width: 90 }}>
<div style={{ textAlign: 'right', width: '20%' }}>
114
</div>
</div>
<div className="column-5">
<div style={{ textAlign: 'right', width: 90 }}>
<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 className="column-2">
<div className="grid grid-4x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
221
<div style={{ textAlign: 'right', width: '25%' }}>
223
</div>
<div style={{ textAlign: 'right', width: '25%' }}>
224
</div>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
222
</div>
<div style={{ display: 'grid', width: 200 }}>
<div style={{ textAlign: 'right' }}>
331
</div>
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
</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 className="column-4">
<div style={{ textAlign: 'right', width: 90 }}>
</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 className="column-3">
<div className="grid grid-1x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
333
</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>
......
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