Skip to content

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

datatable

parent 051c6950
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 1 deletion
package.json
View file @ 8437169c
......@@ -9,6 +9,8 @@
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"apisauce": "^1.1.2",
"font-awesome": "^4.7.0",
"mui-datatables": "^3.3.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
......
src/assets/edit-copy-2.svg 0 → 100644
View file @ 8437169c
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<circle cx="16" cy="16" r="16" fill="#FEAA2D"/>
<g fill="#FFF" fill-rule="nonzero">
<path d="M15.898 4.814C15.755 4.618 12.35.026 8 .026S.244 4.618.102 4.814c-.136.185-.136.437 0 .622.142.196 3.548 4.788 7.898 4.788s7.755-4.592 7.898-4.788c.136-.185.136-.437 0-.622zM8 9.169c-3.204 0-5.98-3.048-6.8-4.044C2.02 4.127 4.788 1.08 8 1.08c3.204 0 5.979 3.047 6.8 4.044-.82.998-3.59 4.044-6.8 4.044z" transform="translate(8 11)"/>
<path d="M8 1.96c-1.745 0-3.165 1.42-3.165 3.165S6.255 8.29 8 8.29s3.165-1.42 3.165-3.165S9.745 1.96 8 1.96zm0 5.275c-1.164 0-2.11-.947-2.11-2.11 0-1.163.947-2.11 2.11-2.11 1.163 0 2.11.947 2.11 2.11 0 1.163-.947 2.11-2.11 2.11z" transform="translate(8 11)"/>
</g>
</g>
</svg>
src/assets/edit-copy.svg 0 → 100644
View file @ 8437169c
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<circle cx="16" cy="16" r="16" fill="#4CAF51"/>
<path fill="#FFF" fill-rule="nonzero" d="M23.472 9.943l-1.447-1.447c-.661-.661-1.737-.661-2.398 0L8.86 19.263c-.068.067-.113.157-.13.245l-.723 3.908c-.028.151.02.307.129.416.11.109.265.157.416.129l3.907-.724c.09-.016.18-.062.246-.129l10.766-10.767c.662-.662.663-1.735 0-2.398zM9.052 22.917l.437-2.364 1.926 1.926-2.363.438zm3.323-.801l-2.522-2.522 9.207-9.208 2.522 2.522-9.207 9.208zM22.81 11.68l-.566.566-2.522-2.522.566-.566c.297-.297.779-.297 1.075 0l1.447 1.447c.297.297.297.778 0 1.075z"/>
</g>
</svg>
src/container/HomePage.js 0 → 100644
View file @ 8437169c
import React, { Component } from 'react';
import { Typography, CircularProgress } from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../assets/Images';
class HomePage extends Component {
render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy2} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}]
const data = [
["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5
}
return (
<div style={{ flex: 1, height: '100vh' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Menunggu Persetujuan Anda</Typography>
</div>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</div>
<div style={{ marginTop: 20 }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
<CircularProgress variant="static" value={[10,30]} />
</div>
</div>
</div>
);
}
}
export default HomePage;
\ No newline at end of file
src/container/Menu/MenuData.js
View file @ 8437169c
......@@ -8,7 +8,7 @@ const MenuData = [
},
{
name: 'Budget Tahunan',
path: '/profile',
path: '/budget-tahunan',
icon: <img src={Images.budgetTahunan} style={{ width: 18, height: 18 }} />
},
{
......
src/router/index.js
View file @ 8437169c
......@@ -11,6 +11,7 @@ import Login from '../container/Login'
import Register from '../container/Register'
import Profile from '../container/Profile'
import Beranda from "../container/Beranda";
import HomePage from "../container/HomePage";
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
......@@ -54,6 +55,7 @@ export default function BasicExample() {
<Home>
<Route path="/home" exact component={Beranda} />
<Route path="/home2" exact component={HomePage} />
<Route path="/profile" exact component={Profile} />
</Home>
</Switch>
......
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