Skip to content

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

dummy

parent 8d58605c
Show whitespace changes
Inline Side-by-side
Showing with 167 additions and 15 deletions
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ c8551f0b
...@@ -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