Enhancement ItemTable Visual Improvements

src/components/ItemTable/ItemTable.js

@@ -1,26 +1,17 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Grid, makeStyles, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
-import ItemTableFilter from "../ItemTableFilter/"
-import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
-
+import ItemTableFilter from "../ItemTableFilter/";
+import ItemtTableSortButtons from "../ItemTableSortButtons.js";
 
 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: {
-            opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-            opacity: 0.2,
-        },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
@@ -34,6 +25,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)
+        },
+        tableHeaderPadding: {
+            paddingBottom: theme.spacing(2)
+        },
     });
     const classes = useStyles();
 
@@ -73,45 +70,38 @@ export default function ItemTable({ data, rowCanBeSelected }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper} >
-            <Table {...getTableProps} aria-label="Table of Queue Items" >
+        <TableContainer>
+            <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()}>
+                                <Grid container spacing={0}>
+                                    <TableCell {...column.getHeaderProps()}  classes={{ root: classes.tableHeaderPadding }}>
                                         <Grid container spacing={0}>
                                             <Grid item sm={10} >
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
-                                                <ButtonGroup orientation="vertical" size="small">
-                                                    <IconButton
-                                                        size="small"
-                                                        onClick={(_ => {
-                                                            const isSortedAsc = column.isSorted && !column.isSortedDesc;
-                                                            isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
-                                                        })}
-                                                    >
-                                                        <ArrowUpward {...column.getSortByToggleProps()}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
-                                                        />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        size="small"
-                                                        onClick={(_ => {
-                                                            const isSortedDesc = column.isSorted && column.isSortedDesc;
-                                                            isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
-                                                        })}
-                                                    >
-                                                        <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
-                                                        />
-                                                    </IconButton>
-                                                </ButtonGroup>
+                                                <ItemtTableSortButtons
+                                                    onClickAsc={_ => {
+                                                        const isSortedAsc = column.isSorted && !column.isSortedDesc;
+                                                        isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false);
+                                                    }}
+                                                    onClickDesc={_ => {
+                                                        const isSortedDesc = column.isSorted && column.isSortedDesc;
+                                                        isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
+                                                    }}
+                                                    colorAsc={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
+                                                    colorDesc={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
+                                                    columnSortAscProps={column.getSortByToggleProps()}
+                                                    columnSortDescProps={column.getSortByToggleProps(column.isSortedDesc)}
+                                                />
                                             </Grid>
                                         </Grid>
                                     </TableCell>
@@ -120,6 +110,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         </TableRow>
                     ))}
                 </TableHead>
+
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
@@ -136,7 +127,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 +138,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         );
                     })}
                 </TableBody>
+
             </Table>
         </TableContainer>
     );

src/components/ItemTableSortButtons.js/ItemTableSortButtons.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { ButtonGroup, IconButton } from "@material-ui/core";
+import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
+
+export default function ItemTableSortButtons({ onClickAsc, onClickDesc, colorAsc, colorDesc, columnSortAscProps, columnSortDescProps }) {
+    return (
+        <ButtonGroup orientation="vertical" size="small">
+            <IconButton
+                edge="start"
+                onClick={onClickAsc}
+            >
+                <ArrowUpward {...columnSortAscProps}
+                    fontSize="inherit"
+                    color={colorAsc}
+                />
+            </IconButton>
+            <IconButton
+                edge="start"
+                onClick={onClickDesc}
+            >
+                <ArrowDownward {...columnSortDescProps}
+                    fontSize="inherit"
+                    color={colorDesc}
+                />
+            </IconButton>
+        </ButtonGroup>
+    )
+}
+
+

src/components/ItemTableSortButtons.js/index.js

@@ -0,0 +1,3 @@
+import ItemtTableSortButtons from './ItemTableSortButtons'
+
+export default ItemtTableSortButtons;