diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 424d55e..7e789e2 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,10 +1,11 @@
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, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, makeStyles, useTheme } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import RelativeTime from "react-relative-time";
-import ItemTableFilter from "../ItemTableFilter/"
+import ItemTableFilter from "../ItemTableFilter/";
+import ItemtTableSortButtons from "../ItemTableSortButtons/";
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
@@ -40,6 +41,12 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
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();
@@ -90,116 +97,122 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
return (
- loading
- ? (
-
- 
-
- )
- : (
-
-
-
- {headerGroups.map(headerGroup => (
-
- {headerGroup.headers.map(column => (
-
+ loading ? (
+
+
+
+ ) : (
+
+
+
+ {headerGroups.map(headerGroup => (
+
+ {headerGroup.headers.map(column => {
+ // Determine sort directions
+ const isSortedAsc = column.isSorted && !column.isSortedDesc;
+ const isSortedDesc = column.isSorted && column.isSortedDesc;
+
+ return (
-
- {column.render("Filter")}
-
-
-
- {
- const isSortedAsc = column.isSorted && !column.isSortedDesc;
- isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
- })}
- >
-
-
- {
- const isSortedDesc = column.isSorted && column.isSortedDesc;
- isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
- })}
- >
-
+
+
+ {column.render("Filter")}
+
+
+ (isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false))
+ }}
+ sortDescArrowProps={{
+ ...column.getSortByToggleProps(),
+ onClick: _ => (isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true))
+ }}
+ sortDirection={(_ => {
+ if (isSortedAsc) {
+ return 'asc';
+ }
+ else if (isSortedDesc) {
+ return 'desc';
+ }
+ else {
+ return undefined;
+ }
+ })()}
/>
-
-
-
+
+
+
-
- ))}
-
- ))}
-
-
- {rows.map((row) => {
- prepareRow(row);
- let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
- return (
- {
- history.push(`/${row.original.queue}/${row.original.number}`);
- setSelectedRow({ queue: row.original.queue, number: row.original.number });
- }}
- // This functionality should be achieved by using the selected prop and
- // overriding the selected class but this applied the secondary color at 0.08% opacity.
- // Overridding the root class is a workaround.
- classes={{
- root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
- hover: classes.hoverBackgroundColor
- }}
- {...row.getRowProps()}
- >
- {row.cells.map(cell => (
- cell.render(_ => {
- switch (cell.column.id) {
- case "dateReceived":
- return (
-
-
-
- );
- case "lastUpdated":
- return (
-
- );
- default:
- return (
-
- {cell.value}
-
- );
- }
- })
- ))}
+ );
+ })}
- );
- })}
-
-
-
- )
+ ))}
+
+
+
+ {rows.map((row) => {
+ prepareRow(row);
+ let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
+ return (
+ {
+ history.push(`/${row.original.queue}/${row.original.number}`);
+ setSelectedRow({ queue: row.original.queue, number: row.original.number });
+ }}
+ // This functionality should be achieved by using the selected prop and
+ // overriding the selected class but this applied the secondary color at 0.08% opacity.
+ // Overridding the root class is a workaround.
+ classes={{
+ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
+ hover: classes.hoverBackgroundColor
+ }}
+ {...row.getRowProps()}
+ >
+ {row.cells.map(cell => (
+ cell.render(_ => {
+ switch (cell.column.id) {
+ case "dateReceived":
+ return (
+
+
+
+ );
+ case "lastUpdated":
+ return (
+
+ );
+ default:
+ return (
+
+ {cell.value}
+
+ );
+ }
+ })
+ ))}
+
+ );
+ })}
+
+
+
+ )
);
-};
+}
ItemTable.propTypes = {
/** Array of items from all active queues to display in table. */
diff --git a/src/components/ItemTableSortButtons/ItemTableSortButtons.js b/src/components/ItemTableSortButtons/ItemTableSortButtons.js
new file mode 100644
index 0000000..564c1fb
--- /dev/null
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.js
@@ -0,0 +1,43 @@
+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({ sortDirection, sortAscArrowProps, sortDescArrowProps }) {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+ItemTableSortButtons.propTypes = {
+ /** String representing sort direction. */
+ "sortDirection": PropTypes.oneOf(['asc', 'desc', undefined ]),
+ /** Props passed to ArrowUpward component. */
+ "sortAscArrowProps": PropTypes.object,
+ /** Props passed to ArrowDownward component. */
+ "sortDescArrowProps": PropTypes.object
+};
+
+ItemTableSortButtons.defaultProps = {
+ "sortDirection": undefined,
+ "sortAscArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") },
+ "sortDescArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") }
+};
+
diff --git a/src/components/ItemTableSortButtons/ItemTableSortButtons.md b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
new file mode 100644
index 0000000..33037b2
--- /dev/null
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
@@ -0,0 +1,68 @@
+The ItemTableSortButtons are used to sort in ascending or descending order based on which button is selected. It is to be used with the [ItemTable](/#/Components/ItemTable).
+
+## Default Usage
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+
+
+
+
+
+
+```
+```jsx static
+
+
+```
+Used without any props, the ItemTableSort will display arrows with default styling.
+
+
+## Sorting by Ascending
+If the `sortDirection` prop is passed `asc`, the ItemTableSortButtons will display the active styling for the ascending arrow. If a onClick function is present the table will run that function on button click
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+
+
+
+
+
+
+```
+```jsx static
+
+```
+## Sorting by Descending
+If the `sortDirection` prop is passed `desc`, the ItemTableSortButtons will display the active styling for the descending arrow. If a onClick function is present the table will run that function on button click
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+
+
+
+
+
+
+```
+```jsx static
+
+```
+
+
+
diff --git a/src/components/ItemTableSortButtons/index.js b/src/components/ItemTableSortButtons/index.js
new file mode 100644
index 0000000..390adb0
--- /dev/null
+++ b/src/components/ItemTableSortButtons/index.js
@@ -0,0 +1,3 @@
+import ItemtTableSortButtons from './ItemTableSortButtons'
+
+export default ItemtTableSortButtons;
\ No newline at end of file