fixedColumn

src/container/BudgetTahunan/BalanceSheet.js

@@ -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}

src/library/CustomTable.js

@@ -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,