Skip to content
Jump to bottom

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

Merged
merged 7 commits into from
Oct 30, 2020
Merged

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

Changes from 5 commits
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
63 changes: 46 additions & 17 deletions src/components/ItemTable/ItemTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
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 { useTable, useFilters, useFlexLayout, useSortBy, useRowSelect } from "react-table";
import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, useTheme, ButtonGroup, IconButton } 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({
Expand All @@ -19,6 +20,11 @@ export default function ItemTable({ data, onRowClick }) {
inactiveSortIcon: {
opacity: 0.2,
},
selectedItem: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this for row selection?

'.Mui-selected': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[50] : theme.palette.primary[700],
}
},
bandedRows: {
'&:nth-of-type(even)': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
Expand All @@ -42,6 +48,7 @@ export default function ItemTable({ data, onRowClick }) {
{ Header: 'Subject', accessor: 'subject' },
{ Header: 'Status', accessor: 'status', },
{ Header: 'Priority', accessor: 'priority' },

{ Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => <RelativeTime value={value} /> },
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
Expand All @@ -61,11 +68,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}>
Expand All @@ -81,14 +88,36 @@ 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>
Expand All @@ -102,8 +131,8 @@ export default function ItemTable({ data, onRowClick }) {
prepareRow(row);
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")}
Expand Down