Change srot button to display both sorting directions at the same time.

ECN · Oct 23, 2020 · a7720db · a7720db
1 parent adea1d9
commit a7720db
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,12 +1,11 @@
 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 {makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel , Paper, Grid, useTheme, ButtonGroup} from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import ItemTableFilter from "../ItemTableFilter/"
 
-export default function ItemTable({ data, onRowClick }) {
+export default function ItemTable({ data }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
@@ -75,15 +74,25 @@ export default function ItemTable({ data, onRowClick }) {
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
+                                                <ButtonGroup orientation="vertical" size="small">
+                                                    <TableSortLabel {...column.getSortByToggleProps()}
+                                                        active={column.isSorted && column.isSortedDesc === false ? true : false}
+                                                        disableRipple={false}
+                                                        focusRipple
+                                                        classes={{ icon: (column.isSorted && column.isSortedDesc === false  ? classes.activeSortIcon : classes.inactiveSortIcon) }}
+                                                        direction='asc'
+                                                    />
+                                                    <TableSortLabel {...column.getSortByToggleProps()}
+                                                        active={column.isSortedDesc ? true : false}
+                                                        to
+                                                        disableRipple={false}
+                                                        focusRipple
+                                                        classes={{ icon: (column.isSortedDesc ? classes.activeSortIcon : classes.inactiveSortIcon) }}
+                                                        direction='desc'
+                                                    />
+
+                                                </ButtonGroup>
 
-                                                <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>
                                             </Grid>
                                         </Grid>
                                     </TableCell>
@@ -96,8 +105,8 @@ export default function ItemTable({ data, onRowClick }) {
                     {rows.map((row, i) => {
                         prepareRow(row);
                         return (
-                            <TableRow 
-                                onClick={ () => history.push(`/${row.original.queue}/${row.original.number}`) }
+                            <TableRow
+                                onClick={() => history.push(`/${row.original.queue}/${row.original.number}`)}
                                 className={classes.bandedRows} {...row.getRowProps()}>
                                 {row.cells.map(cell => (
                                     <TableCell {...cell.getCellProps()}>