Skip to content

Change sort button to display both sorting directions at the same time. #88

Merged
merged 7 commits into from
Oct 30, 2020
+37 −15
Merged

Change sort button to display both sorting directions at the same time. #88

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7720db
Change srot button to display both sorting directions at the same time.
Oct 23, 2020
190c75f
Fixed sort toggle buttons to allow sort by direction of the icon sele…
Oct 30, 2020
c8782a4
Merge branch 'staging' into Enhancement-ItemTable-sortButton
wrigh393 Oct 30, 2020
9be5a9e
removed row selection code from branch
Oct 30, 2020
3b4ef18
Removed row selection code and merge changes from remote
Oct 30, 2020
496196e
Cleanup
Oct 30, 2020
e3eb945
Fixed row click
Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions src/components/ItemTable/ItemTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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>
Expand All @@ -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()}>
Expand Down