Skip to content

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

ytd

parent 2a8f0979
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 84 deletions
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ 81653d87
......@@ -489,124 +489,133 @@ export default class TableSummaryTriputra extends Component {
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 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 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>
<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' }}>
<span>{"YTD 2021"}</span>
</div>
<div className="grid grid-5x">
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<span>{"2020"}</span>
</div>
<div className="column-5" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"FY"}</span>
</div>
<div className="grid grid-4x" style={{ height: 34 }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<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', backgroundColor: '#37b5e6' }}>
<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-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2019"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2020"}</span>
</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 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x">
<div className="column-1" style={{ backgroundColor: '#37b5e6' }}>
<span>{"% of 2020"}</span>
</div>
{/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"2021"}</span>
</div> */}
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
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 className="column-1">
<div className="grid grid-5x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
111
</div>
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.b}
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
112
</div>
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.c}
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
113
</div>
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
<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 className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
<div className="column-2">
<div className="grid grid-4x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
221
</div>
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
222
</div>
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.g}
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
223
</div>
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.h}
<div className="column-4">
<div style={{ textAlign: 'right', width: 90 }}>
224
</div>
</div>
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.i}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.j}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.k}
<div className="column-3">
<div className="grid grid-1x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
333
</div>
</div>
</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