Skip to content

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

ytd

parent 2a8f0979
Show 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 { ...@@ -489,124 +489,133 @@ export default class TableSummaryTriputra extends Component {
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)" }} >
<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="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, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2010"}</span> <span>{"YTD 2021"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="grid grid-5x">
<span>{"2011"}</span> <div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Act"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2012"}</span> <span>{"MB"}</span>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="column-3" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2013"}</span> <span>{"% of MB"}</span>
</div> </div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2020"}</span>
</div> </div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}> <div className="column-5" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <span>{"% of 2020"}</span>
<span>{"2014"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2015"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2016"}</span>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6', height: 64 }}>
<span>{"2017"}</span> <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"FY"}</span>
</div> </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>
<div className="column-3 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}> <div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <span>{"MB 2021"}</span>
<span>{"2018"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="column-3" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2019"}</span> <span>{"% of MB"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}> <div className="column-4" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"2020"}</span> <span>{"2020"}</span>
</div> </div>
{/* <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> </div>
<span>{"2021"}</span> </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 }}>
<span>{""}</span>
</div>
<div className="grid grid-1x">
<div className="column-1" style={{ backgroundColor: '#37b5e6' }}>
<span>{"% of 2020"}</span>
</div>
</div>
</div> </div>
</div> </div>
</th> </th>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({
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 className="grid grid-3x content-center">
<div className="grid grid-4x content-center"> <div className="column-1">
<div className="col-1"> <div className="grid grid-5x content-center">
<div style={{ textAlign: 'center', width: 90 }}> <div className="column-1">
{val.a} <div style={{ textAlign: 'right', width: 90 }}>
111
</div> </div>
</div> </div>
<div className="col-2"> <div className="column-2">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{val.b} 112
</div> </div>
</div> </div>
<div className="col-3"> <div className="column-3">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{val.c} 113
</div> </div>
</div> </div>
<div className="col-4"> <div className="column-4">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{val.d} 114
</div> </div>
</div> </div>
<div className="column-5">
<div style={{ textAlign: 'right', width: 90 }}>
115
</div> </div>
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
</div> </div>
</div> </div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
</div> </div>
<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 className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.g}
</div> </div>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
222
</div> </div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.h}
</div> </div>
<div className="column-3">
<div style={{ textAlign: 'right', width: 90 }}>
223
</div> </div>
</div> </div>
<div className="grid grid-3x content-center"> <div className="column-4">
<div className="col-1"> <div style={{ textAlign: 'right', width: 90 }}>
<div style={{ textAlign: 'center', width: 90 }}> 224
{val.i}
</div> </div>
</div> </div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.j}
</div> </div>
</div> </div>
<div className="col-3"> <div className="column-3">
<div style={{ textAlign: 'center', width: 90 }}> <div className="grid grid-1x content-center">
{val.k} <div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
333
</div> </div>
</div> </div>
{/* <div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div> </div>
</div> */}
</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