Skip to content

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

CUSTOM TABLE

parent 88b33160
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 891 additions and 2 deletions
package.json
View file @ 500cf8f5
......@@ -14,6 +14,7 @@
"react": "^16.13.1",
"react-d3-donut": "^1.1.2",
"react-dom": "^16.13.1",
"react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
......
src/assets/Images.js
View file @ 500cf8f5
......@@ -19,6 +19,7 @@ const Images = {
key: require('./key.svg'),
green: require('./green.svg'),
red: require('./red.svg'),
ceklis: require('./ceklis.png'),
//Image
triputra: require('./triputra.png'),
......
src/container/BudgetTahunan.js 0 → 100644
View file @ 500cf8f5
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
export default class BudgetTahunan extends Component {
constructor(props) {
super(props)
this.state = {
periode: '2020',
perusahaan: 'TAP Group',
revisi: '0'
}
}
render() {
const columns = ["#", "Jenis Laporan",
{
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{val == 'done' ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
null
}
</div >
);
}
}
},
{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
}
}
}]
const dataTable = [
["1", "Balance Sheet", "done"],
["2", "Profit & Loss", ""],
["3", "CAT", "done"],
["4", "Fixed Assets Movement", ""],
["5", "Tax Planning", "done"],
["6", "Balance Sheet", "done"],
["7", "Profit & Loss", ""],
["8", "CAT", "done"],
["9", "Fixed Assets Movement", ""],
["10", "Tax Planning", "done"],
["11", "Balance Sheet", "done"],
["12", "Profit & Loss", "done"],
["13", "CAT", "done"],
["14", "Fixed Assets Movement", "done"],
["15", "Tax Planning", "done"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
rowsPerPageOptions: [5, 25, 100],
search: false
}
const periode = [
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const revisi = [
{ value: '0', label: '0' },
{ value: '1', label: '1' },
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<TextField
style={{ width: 250, }}
id="periode"
select
label="Periode"
value={this.state.periode}
onChange={(e) => this.setState({ periode: e.target.value })}
>
{periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="perusahaan"
select
label="Perusahaan"
value={this.state.perusahaan}
onChange={(e) => this.setState({ perusahaan: e.target.value })}
>
{perusahaan.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="reivisi"
select
label="Revisi"
value={this.state.revisi}
onChange={(e) => this.setState({ revisi: e.target.value })}
>
{revisi.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</div>
<div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
</div>
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography>
</div>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<div style={{ width: '50%', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 1.xls </Typography>
<Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 2.xls </Typography>
</div>
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
<Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
</div>
</div>
</div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</div>
</Paper>
</div>
</div >
);
}
}
src/container/BudgetTahunan/BalanceSheet.js 0 → 100644
View file @ 500cf8f5
This diff is collapsed.
src/library/Array.js
View file @ 500cf8f5
......@@ -8,7 +8,7 @@ const arraySide = [
{
img: '',
label: 'Budget Tahunan',
path: 'beranda',
path: 'budget-tahunan',
subItem: null
},
{
......
src/library/CustomTable.js 0 → 100644
View file @ 500cf8f5
var mainColor = "#fff"
var secondColor = "#f6f6f6"
exports.customTable = 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: "7.5px",
overflow: "hidden",
},
// responsiveScroll: {
// position: 'relative',
// width: '100% !important',
// }
responsiveScrollMaxHeight: {
height: 'calc(100vh - 250px)',
maxHeight: 'calc(100vh - 250px)'
},
},
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",
},
},
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 15px",
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 15px",
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",
padding: "10px 15px",
}
},
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.customTable2 = function () {
return {
typography: {
useNextVariants: true,
},
overrides: {
MUIDataTable: {
root: {
backgroundColor: secondColor,
},
paper: {
boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
border: "1px rgba(0,0,0,0.1) solid",
borderRadius: "5px",
overflow: "hidden",
},
},
MuiToolbar: {
root: {
left: {
flex: "0 0 auto !important"
},
actions: {
flex: "0 0 auto !important"
}
}
},
MUIDataTableToolbar: {
root: {
backgroundColor: secondColor,
},
titleText: {
color: "#555"
},
icon: {
color: "#555"
},
},
MUIDataTableSearch: {
searchIcon: {
color: "#555"
},
searchText: {
color: "#555",
},
clearIcon: {
color: "#555"
},
},
MUIDataTableHead: {
main: {
backgroundColor: mainColor,
color: "#555"
}
},
MUIDataTableHeadRow: {
root: {
backgroundColor: mainColor,
}
},
MUIDataTableHeadCell: {
root: {
fontSize: "10pt",
fontWeight: "500",
color: mainColor,
},
fixedHeader: {
position: "relative",
backgroundColor: secondColor,
color: "#555",
padding: "10px",
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: {
fontSize: "10pt",
padding: "10px"
}
},
MUIDataTableSelectCell: {
headerCell: {
backgroundColor: secondColor,
checkboxRoot: {
color: "#fff",
}
},
checkboxRoot: {
color: "#555"
}
},
}
}
}
exports.customOptions = function () {
return {
// selectableRows: false,
selectableRows: 'none',
filterType: 'multiselect',
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
}
}
exports.customOptions2 = function () {
return {
selectableRows: true,
filterType: 'dropdown',
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
}
}
exports.customOptions3 = function () {
return {
selectableRows: true,
filterType: 'dropdown',
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
sort: true,
elevation: 5,
}
}
exports.customOptions4 = function () {
return {
selectableRows: false,
filter: false,
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
sort: true,
search: false,
viewColumns: false,
elevation: 5
}
}
exports.customOptions5 = function () {
return {
// selectableRows: false,
selectableRows: 'none',
filterType: false,
filter: false,
sort: false,
viewColumns: false,
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
}
}
exports.customOptionsFixedColumn = function () {
return {
// selectableRows: false,
selectableRows: 'none',
filterType: false,
filter: false,
sort: false,
viewColumns:false,
overflowX: 'auto',
rowsPerPage: 10,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
search:false
}
}
\ No newline at end of file
src/router/homeRoutes.js
View file @ 500cf8f5
......@@ -2,11 +2,14 @@ import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import UserRole from '../container/UserRole'
import ApprovalMatrix from '../container/ApprovalMatrix'
import BudgetTahunan from '../container/BudgetTahunan';
import HomePage from '../container/HomePage';
import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
const routes = [
{
path: "/home/beranda",
main: Beranda
main: HomePage
},
{
path: "/home/userrole",
......@@ -16,6 +19,10 @@ const routes = [
path: "/home/approval",
main: ApprovalMatrix
},
{
path: "/home/budget-tahunan",
main: BalanceSheet
},
];
......
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