Add spacing for table

ECN · Dec 16, 2020 · 566efca · 566efca
1 parent 561d435
commit 566efca
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -9,9 +9,9 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -34,6 +34,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
         },
+        tableMargin: {
+            marginTop: theme.spacing(2)
+        },
+        tableHeaderMargin: {
+            marginBottom: theme.spacing(1)
+        }
     });
     const classes = useStyles();
 
@@ -74,13 +80,14 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
+            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
+
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
                                 <Grid container spacing={1}>
-                                    <TableCell {...column.getHeaderProps()}>
+                                    <TableCell {...column.getHeaderProps()} classes={{ root: classes.tableHeaderMargin }}>
                                         <Grid container spacing={0}>
                                             <Grid item sm={10} >
                                                 {column.render("Filter")}
@@ -120,6 +127,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         </TableRow>
                     ))}
                 </TableHead>
+
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
@@ -136,7 +144,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
@@ -147,6 +155,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         );
                     })}
                 </TableBody>
+
             </Table>
         </TableContainer>
     );