Commit afeff22f authored by Deni Rinaldi's avatar Deni Rinaldi

fixedColumn

parent e8650ce6
......@@ -7,14 +7,14 @@ import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
......@@ -764,20 +764,20 @@ export default class BalanceSheet extends Component {
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', 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: 388 }}>
<div style={{ width: 300}}>
{tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
tableMeta.rowData[4] === 1 ?
<span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> :
<span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
......@@ -1957,7 +1957,7 @@ export default class BalanceSheet extends Component {
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ marginTop: 20, width: this.props.width - 200, height: this.props.height-200 }}>
<div style={{ marginTop: 20, width: this.props.width - 200, height: this.props.height - 400 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
......
......@@ -318,6 +318,206 @@ exports.customTable2 = function () {
}
}
exports.customTable3 = function () {
return {
typography: {
useNextVariants: true,
},
overrides: {
MUIDataTable: {
paper: {
position: 'relative',
// width: '100% !important',
boxShadow: "0 0 0 0 rgba(154,161,171,.15)",
border: "1px rgba(0,0,0,0.1) solid",
borderRadius: "10px",
overflow: "hidden",
},
// responsiveScroll: {
// position: 'relative',
// width: '100% !important',
// }
responsiveScrollMaxHeight: {
height: 650,
maxHeight: 650
},
},
MuiToolbar: {
root: {
position: 'relative',
}
},
MUIDataTableToolbar: {
root: {
position: 'relative',
padding: "0px 15px",
backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
},
titleText: {
color: "#555"
},
icon: {
color: "#555 !important"
},
iconActive: {
color: "#555 !important"
},
left: {
flex: "0 0 auto !important"
},
actions: {
flex: "1 0 auto !important"
}
},
MUIDataTableSearch: {
main: {
position: 'absolute',
top: "0",
right: "-9px",
width: "350px !important",
backgroundColor: "#f2f6fa",
zIndex: "10",
textAlign: "right",
display: "block",
},
searchIcon: {
width: "50px !important",
color: "#555 !important",
display: "inline-block",
textAlign: "center",
verticalAlign: "top",
},
searchText: {
width: "calc(100% - 120px) !important",
marginRight: "10px",
color: "#555 !important",
display: "inline-block",
verticalAlign: "top",
},
clearIcon: {
width: "50px !important",
color: "#555 !important",
display: "inline-block",
verticalAlign: "top",
},
},
MuiTableCell: {
root: {
display: 'table-cell',
padding: 7,
paddingLeft: 25,
fontSize: '0.875rem',
textAlign: 'left',
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
fontWeight: 400,
lineHeight: 1.43,
borderBottom: '1px solid rgba(224, 224, 224, 1)',
letterSpacing: '0.01071em',
verticalAlign: 'inherit',
}
},
MUIDataTableHead: {
main: {
position: 'relative',
backgroundColor: mainColor,
color: "#555",
// display: "flex",
// alignItems: "stretch"
},
fixedHeader: {
// position: "relative",
borderBottom: "1px rgba(0,0,0,0.1) solid",
backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
color: "#555",
padding: "10px 20px",
height: "auto"
},
},
MUIDataTableHeadRow: {
root: {
position: 'relative',
backgroundColor: mainColor,
}
},
MUIDataTableHeadCell: {
root: {
fontSize: "10pt",
fontWeight: "500",
color: "#555",
backgroundColor: secondColor,
},
fixedHeader: {
// position: "relative",
borderBottom: "1px rgba(0,0,0,0.1) solid",
backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
color: "#555",
padding: "10px 25px",
height: "auto"
},
toolButton: {
display: "flex",
height: "auto",
},
data: {
display: "inline-block",
verticalAlign: "top",
},
sortActive: {
color: "#555"
},
sortAction: {
color: "#555",
display: "inline-block",
verticalAlign: "top",
MuiButtonBase: {
color: "#555",
root: {
color: "#555",
}
}
}
},
MUIDataTableBodyCell: {
root: {
position: 'relative',
fontSize: "13px",
}
},
MUIDataTableSelectCell: {
headerCell: {
backgroundColor: secondColor,
checkboxRoot: {
color: "#555",
}
},
checkboxRoot: {
color: "#555"
}
},
MuiInput: {
root: {
top: "5px",
color: "#555 !important",
},
underline: {
borderBottom: "1px #555 solid !important",
}
},
MuiSelect: {
root: {
top: "0",
color: "#555 !important",
},
}
// MuiIconButton: {
// root: {
// color: "#fff !important",
// }
// }
}
}
}
exports.customOptions = function () {
return {
// selectableRows: false,
......@@ -358,7 +558,7 @@ exports.customOptionsFixedColumn = function () {
sort: false,
responsive: 'scrollMaxHeight',
viewColumns:false,
overflowX: 'auto',
// overflowX: 'auto',
print: false,
download: false,
elevation: 5,
......
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