commit

src/container/Otorisasi/User.js

@@ -465,6 +465,7 @@ export default class UserRole extends Component {
     const columns = [{
       name: "Action",
       options: {
+        filter: false,
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex' }}>
@@ -492,6 +493,7 @@ export default class UserRole extends Component {
     }, {
       name: "ID",
       options: {
+        filter: false,
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex' }}>
@@ -598,7 +600,7 @@ export default class UserRole extends Component {
                   />
                 </div>
               </div> */}
-              <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
+              {/* <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
                 <img src={Images.searchBlack} style={{ marginRight: 10 }} />
                 <InputBase
                   style={{ width: '100%' }}
@@ -615,7 +617,7 @@ export default class UserRole extends Component {
                   }}
                   inputProps={{ 'aria-label': 'naked' }}
                 />
-              </div>
+              </div> */}
               {/* <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' }}>
                 <a data-tip={'Download Template'} data-for="template">

src/container/Otorisasi/UserRole.js

@@ -165,6 +165,7 @@ class UserRole extends Component {
     const columns = [{
       name: "Action",
       options: {
+        filter: false,
         customBodyRender: (val, tableMeta) => {
           // console.log(tableMeta);
           return (
@@ -195,6 +196,7 @@ class UserRole extends Component {
     }, {
       name: "ID",
       options: {
+        filter: false,
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex' }}>
@@ -251,7 +253,7 @@ class UserRole extends Component {
 
             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
               <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Role & Authorization</label>
-              <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
+              {/* <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
                 <img src={Images.searchBlack} style={{ marginRight: 10 }} />
                 <InputBase
                   style={{ width: '100%' }}
@@ -268,7 +270,7 @@ class UserRole extends Component {
                   }}
                   inputProps={{ 'aria-label': 'naked' }}
                 />
-              </div>
+              </div> */}
               {/* <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' }}>
                 {this.state.buttonCreate && (

src/library/CustomTable.js

@@ -55,8 +55,8 @@ exports.customTable = function () {
       MUIDataTableSearch: {
         main: {
           position: 'absolute',
-          top: "0",
-          right: "-9px",
+          top: "5px",
+          right: "5px",
           width: "350px !important",
           backgroundColor: "#f2f6fa",
           zIndex: "10",
@@ -99,6 +99,17 @@ exports.customTable = function () {
           verticalAlign: 'inherit',
         }
       },
+      MUIDataTableFilterList: {
+        root: {
+          backgroundColor: "#f2f6fa",
+          margin: "0px 0px 0px 0px",
+          padding: "0px 16px 0px 16px"
+        },
+        chip: {
+          margin: "8px 8px 8px 0px",
+          color: "#555",
+        }
+      },
       MUIDataTableHead: {
         main: {
           position: 'relative',
@@ -114,6 +125,8 @@ exports.customTable = function () {
           color: "#555",
           padding: "10px 20px",
           height: "auto"
+,
+          marginTop: "10px"
         },
       },
       MUIDataTableHeadRow: {
@@ -272,7 +285,7 @@ exports.customTable2 = function () {
           backgroundColor: secondColor,
           color: "#555",
           padding: "10px",
-          height: "auto"
+          height: "auto",
         },
         toolButton: {
           display: "flex",
@@ -330,8 +343,8 @@ exports.customOptions = function () {
     print: false,
     download: false,
     elevation: 5,
-    filter: false,
-    search: false
+    filter: true,
+    search: true
   }
 }