Merge pull request #88 from ECN/Enhancement-ItemTable-sortButton

Change sort button to display both sorting directions at the same time.
ECN · Oct 30, 2020 · da2592d · da2592d
2 parents c23c678 + e3eb945
commit da2592d
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,13 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel,
-    Paper, Grid, useTheme } from "@material-ui/core";
+import {
+    Table, TableBody, TableCell, TableHead, TableRow, TableContainer,
+    Paper, Grid, ButtonGroup, IconButton, 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";
 
-export default function ItemTable({ data, onRowClick }) {
+export default function ItemTable({ data }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
@@ -61,11 +64,11 @@ export default function ItemTable({ data, onRowClick }) {
                         />
                     );
                 }
-            }
+            },
         },
-        useFilters, useFlexLayout, useSortBy
+        useFilters, useFlexLayout, useSortBy,
     );
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
         <TableContainer component={Paper}>
@@ -81,14 +84,32 @@ export default function ItemTable({ data, onRowClick }) {
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
-                                                <TableSortLabel {...column.getSortByToggleProps()}
-                                                    active={column.isSorted ? true : false}
-                                                    disableRipple={false}
-                                                    focusRipple
-                                                    classes={{ icon: (column.isSorted ? classes.activeSortIcon : classes.inactiveSortIcon) }}
-                                                    direction={column.isSorted ? column.isSortedDesc ? 'desc' : 'asc' : 'asc'}
-                                                >
-                                                </TableSortLabel>
+                                                <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>
                                             </Grid>
                                         </Grid>
                                     </TableCell>
@@ -103,7 +124,8 @@ export default function ItemTable({ data, onRowClick }) {
                         return (
                             <TableRow
                                 onClick={() => history.push(`/${row.original.queue}/${row.original.number}`)}
-                                className={classes.bandedRows} {...row.getRowProps()}>
+                                className={classes.bandedRows}
+                                {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
                                         {cell.render("Cell")}