Skip to content

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

Merge branch 'rifka' into 'master' 

dummy

See merge request !657
parents 8c0a87b3 c465bc6e
Show whitespace changes
Inline Side-by-side
Showing with 167 additions and 15 deletions
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ bb49f23e
...@@ -24,12 +24,20 @@ const style2 = { ...@@ -24,12 +24,20 @@ const style2 = {
export default class TableSummaryTriputra extends Component { export default class TableSummaryTriputra extends Component {
render() { render() {
let datas = [ let datas = [
["ABCD", { a: "1", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }], ["ABCD", { a: "12", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }] ["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }]
] ]
let datasHistorical = [ let datasHistorical = [
["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }], ["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }] ["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
]
let datasMTD = [
["ABCD", { a: "1", b: "3", c: "4" }, { a: "2", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }],
["Total Assets", { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }]
]
let datasYTD = [
["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
] ]
let dataTable2 = this.props.dataTable let dataTable2 = this.props.dataTable
...@@ -350,9 +358,150 @@ export default class TableSummaryTriputra extends Component { ...@@ -350,9 +358,150 @@ export default class TableSummaryTriputra extends Component {
const columnYTD = [ const columnYTD = [
{ {
name: "", name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{ val }
</div>
)
}
}
}, {
name: `Revenue`,
options: { options: {
display: false 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>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2011"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2012"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2013"}</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, borderRight: "1px #fff solid" }}>
<span>{"2015"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2016"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid" }}>
<span>{"2017"}</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-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"2021"}</span>
</div> */}
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
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>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.b}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.c}
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.g}
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.h}
</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>
</div>
{/* <div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
</div> */}
</div>
</div>
</div>
)
}
} }
} }
] ]
...@@ -458,39 +607,39 @@ export default class TableSummaryTriputra extends Component { ...@@ -458,39 +607,39 @@ export default class TableSummaryTriputra extends Component {
<div className="grid grid-4x content-center"> <div className="grid grid-4x content-center">
<div className="col-1"> <div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.a} {val.e}
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.b} {val.f}
</div> </div>
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.c} {val.g}
</div> </div>
</div> </div>
<div className="col-4"> <div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.d} {val.h}
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-3x content-center"> <div className="grid grid-3x content-center">
<div className="col-1"> <div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.a} {val.i}
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.b} {val.j}
</div> </div>
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}> <div style={{ textAlign: 'center', width: 90 }}>
{val.c} {val.k}
</div> </div>
</div> </div>
{/* <div className="col-4"> {/* <div className="col-4">
...@@ -1204,6 +1353,9 @@ export default class TableSummaryTriputra extends Component { ...@@ -1204,6 +1353,9 @@ export default class TableSummaryTriputra extends Component {
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return ( return (
<div> <div>
<div className="grid grid-2x content-center"> <div className="grid grid-2x content-center">
...@@ -1330,7 +1482,7 @@ export default class TableSummaryTriputra extends Component { ...@@ -1330,7 +1482,7 @@ export default class TableSummaryTriputra extends Component {
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{val.f} {val.e}
</div> </div>
</div> </div>
</div> </div>
...@@ -1689,7 +1841,7 @@ export default class TableSummaryTriputra extends Component { ...@@ -1689,7 +1841,7 @@ export default class TableSummaryTriputra extends Component {
<div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}> <div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.props.type === 4 ? datasHistorical : datas} data={this.props.type === 4 ? datasHistorical : this.props.type === 1 ? datasMTD : this.props.type === 2 ? datasYTD : this.props.type === 3 ? datas : datas}
columns={this.props.type === 1 ? columnMTD : this.props.type === 2 ? columnYTD : this.props.type === 3 ? columnCPSM : this.props.type === 4 ? columnHistorical : columns} columns={this.props.type === 1 ? columnMTD : this.props.type === 2 ? columnYTD : this.props.type === 3 ? columnCPSM : this.props.type === 4 ? columnHistorical : columns}
options={options} options={options}
/> />
......
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