user

src/container/Otorisasi/User.js

 import React, { Component } from "react";
 import { Container, Row, Col } from "react-bootstrap";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import Images from "../../assets/Images";
+import MUIDataTable from "mui-datatables";
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsFixedColumn();
 
 export default class componentName 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"],
+    ]
     return (
-      <Container fluid style={{height: '100vh', padding: 0, backgroundColor: 'black'}}>
+      <Container fluid style={{height: '100vh', padding: 0}}>
         {/* <Row> */}
         <div style={{height: '20vh', backgroundColor: '#354960', width: '100%'}}/>
-        {/* <div style={{position: 'absolute', top: 0, paddingTop: 100, paddingLeft: 25, width: '100%'}}> */}
-          {/* <Row>
-            <Col><label style={{color:'black'}}>Master Data - Role & Otorisasi</label></Col>
-            <Col xs={4}>
-              <Row style={{backgroundColor: 'blue'}}>
-                
-              </Row>
-            </Col>
-            <Col><img src={Images.add}/></Col>
-          </Row> */}
-        {/* </div> */}
+        <div style={{marginTop: -150}}>
+          <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25}}>
+            <label style={{color:'white', width: '20%'}}>Master Data - Role & Otorisasi</label>
+            <label style={{color:'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor:'white', borderWidth: 2, alignItems:'center'}}>Search</label>
+            <div style={{width: '20%', justifyContent:'flex-end', display: 'flex'}}>
+              <img src={Images.add}/>
+            </div>
+          </div>
+          <div style={{padding: 25}}>
+              <MUIDataTable
+                theme={getMuiTheme()}
+                data={data}
+                columns={columns}
+                options={options}
+              />
+          </div>
+        </div>
       </Container>
     );
   }