From 140c71e9f4a6f4855a86500dc2731313d965cf24 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Fri, 11 Dec 2020 11:33:23 -0500
Subject: [PATCH 01/10] Removed Paper render to remove extraneous shadows

---
 src/components/ItemTable/ItemTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index e45dc63..30bb651 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -73,7 +73,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper} >
+        <TableContainer>
             <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (

From 3a951074f3070e84591d532c1f36b106d9843e55 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Fri, 11 Dec 2020 11:34:59 -0500
Subject: [PATCH 02/10] Changed the table render to the small variant in order
 to reduce uneeded whitespace

---
 src/components/ItemTable/ItemTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 30bb651..059494f 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -74,7 +74,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items" >
+            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>

From 561d43520860ac8254ce959620802c658352f4d5 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Fri, 11 Dec 2020 12:04:19 -0500
Subject: [PATCH 03/10] Styling fixes for sort by buttons to add visual weight
 and make them easier to see what columns the buttons are related to.

---
 src/components/ItemTable/ItemTable.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 059494f..65c6cf2 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,7 +1,7 @@
 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, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, 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/"
@@ -88,7 +88,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                             <Grid item sm={2} alignItems='center' justify='center'>
                                                 <ButtonGroup orientation="vertical" size="small">
                                                     <IconButton
-                                                        size="small"
+                                                        edge="start"
                                                         onClick={(_ => {
                                                             const isSortedAsc = column.isSorted && !column.isSortedDesc;
                                                             isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
@@ -96,11 +96,11 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                     >
                                                         <ArrowUpward {...column.getSortByToggleProps()}
                                                             fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
+                                                            color={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
                                                         />
                                                     </IconButton>
                                                     <IconButton
-                                                        size="small"
+                                                        edge="start"
                                                         onClick={(_ => {
                                                             const isSortedDesc = column.isSorted && column.isSortedDesc;
                                                             isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
@@ -108,7 +108,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                     >
                                                         <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
                                                             fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
+                                                            color={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
                                                         />
                                                     </IconButton>
                                                 </ButtonGroup>

From 566efcafd853ee453ebc3151f45a00006179bdf3 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 16 Dec 2020 16:52:17 -0500
Subject: [PATCH 04/10] Add spacing for table

---
 src/components/ItemTable/ItemTable.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 65c6cf2..89050fa 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -9,9 +9,9 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -34,6 +34,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
         },
+        tableMargin: {
+            marginTop: theme.spacing(2)
+        },
+        tableHeaderMargin: {
+            marginBottom: theme.spacing(1)
+        }
     });
     const classes = useStyles();
 
@@ -74,13 +80,14 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
+            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
+                
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
                                 <Grid container spacing={1}>
-                                    <TableCell {...column.getHeaderProps()}>
+                                    <TableCell {...column.getHeaderProps()} classes={{ root: classes.tableHeaderMargin }}>
                                         <Grid container spacing={0}>
                                             <Grid item sm={10} >
                                                 {column.render("Filter")}
@@ -120,6 +127,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         </TableRow>
                     ))}
                 </TableHead>
+
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
@@ -136,7 +144,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
@@ -147,6 +155,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         );
                     })}
                 </TableBody>
+
             </Table>
         </TableContainer>
     );

From 56d6f28315cfce67a744c7996cbfaa93f08ff368 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 16 Dec 2020 16:52:31 -0500
Subject: [PATCH 05/10] Remove unused classes

---
 src/components/ItemTable/ItemTable.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 89050fa..ce1987a 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -13,14 +13,6 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
-        // Fully visible for active icons
-        activeSortIcon: {
-            opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-            opacity: 0.2,
-        },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },

From 3effeb7e314c5fd9ac4902a71dc44b18e97723b4 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Thu, 17 Dec 2020 15:04:13 -0500
Subject: [PATCH 06/10] Refactored sorting to its own component

---
 src/components/ItemTable/ItemTable.js         | 60 ++++++++-----------
 .../ItemTableSortButtons.js                   | 31 ++++++++++
 .../ItemTableSortButtons.md                   |  0
 .../ItemTableSortButtons.js/index.js          |  3 +
 4 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
 create mode 100644 src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
 create mode 100644 src/components/ItemTableSortButtons.js/index.js

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 65c6cf2..e547b78 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,17 +1,16 @@
 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, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Grid, 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";
-
+import ItemTableFilter from "../ItemTableFilter/";
+import ItemtTableSortButtons from "../ItemTableSortButtons.js";
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -74,7 +73,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
+            <Table
+                {...getTableProps}
+                aria-label="Table of Queue Items"
+                size="small"
+                stickyHeader
+            >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -86,32 +90,20 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
-                                                <ButtonGroup orientation="vertical" size="small">
-                                                    <IconButton
-                                                        edge="start"
-                                                        onClick={(_ => {
-                                                            const isSortedAsc = column.isSorted && !column.isSortedDesc;
-                                                            isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
-                                                        })}
-                                                    >
-                                                        <ArrowUpward {...column.getSortByToggleProps()}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
-                                                        />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        edge="start"
-                                                        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 ? "secondary" : "default"}
-                                                        />
-                                                    </IconButton>
-                                                </ButtonGroup>
+                                                <ItemtTableSortButtons
+                                                    onClickAsc={_ => {
+                                                        const isSortedAsc = column.isSorted && !column.isSortedDesc;
+                                                        isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false);
+                                                    }}
+                                                    onClickDesc={_ => {
+                                                        const isSortedDesc = column.isSorted && column.isSortedDesc;
+                                                        isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
+                                                    }}
+                                                    colorAsc={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
+                                                    colorDesc={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
+                                                    columnSortAscProps={column.getSortByToggleProps()}
+                                                    columnSortDescProps={column.getSortByToggleProps(column.isSortedDesc)}
+                                                />
                                             </Grid>
                                         </Grid>
                                     </TableCell>
@@ -136,7 +128,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
new file mode 100644
index 0000000..f7c6cd8
--- /dev/null
+++ b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
@@ -0,0 +1,31 @@
+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({ onClickAsc, onClickDesc, colorAsc, colorDesc, columnSortAscProps, columnSortDescProps }) {
+    return (
+        <ButtonGroup orientation="vertical" size="small">
+            <IconButton
+                edge="start"
+                onClick={onClickAsc}
+            >
+                <ArrowUpward {...columnSortAscProps}
+                    fontSize="inherit"
+                    color={colorAsc}
+                />
+            </IconButton>
+            <IconButton
+                edge="start"
+                onClick={onClickDesc}
+            >
+                <ArrowDownward {...columnSortDescProps}
+                    fontSize="inherit"
+                    color={colorDesc}
+                />
+            </IconButton>
+        </ButtonGroup>
+    )
+}
+
+
diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ItemTableSortButtons.js/index.js b/src/components/ItemTableSortButtons.js/index.js
new file mode 100644
index 0000000..390adb0
--- /dev/null
+++ b/src/components/ItemTableSortButtons.js/index.js
@@ -0,0 +1,3 @@
+import ItemtTableSortButtons from './ItemTableSortButtons'
+
+export default ItemtTableSortButtons;
\ No newline at end of file

From 9aa5321c8506cbdfffa3a493712b396c24bc5237 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Fri, 18 Dec 2020 12:22:07 -0500
Subject: [PATCH 07/10] Fixed column border gap

---
 src/components/ItemTable/ItemTable.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 5cfce90..4160b41 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -28,9 +28,9 @@ export default function ItemTable({ data, rowCanBeSelected }) {
         tableMargin: {
             marginTop: theme.spacing(2)
         },
-        tableHeaderMargin: {
-            marginBottom: theme.spacing(1)
-        }
+        tableHeaderPadding: {
+            paddingBottom: theme.spacing(2)
+        },
     });
     const classes = useStyles();
 
@@ -76,8 +76,8 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
-                                <Grid container spacing={1}>
-                                    <TableCell {...column.getHeaderProps()} classes={{ root: classes.tableHeaderMargin }}>
+                                <Grid container spacing={0}>
+                                    <TableCell {...column.getHeaderProps()}  classes={{ root: classes.tableHeaderPadding }}>
                                         <Grid container spacing={0}>
                                             <Grid item sm={10} >
                                                 {column.render("Filter")}
@@ -123,7 +123,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell
-                                        classes={{ root: classes.columnBorders }}
+                                        classes={{ root: classes.columnBorders,}}
                                         {...cell.getCellProps()}
                                     >
                                         {cell.render("Cell")}

From 3edc67aed5f5c4fdcaec21edfe4a1971b6bc5f2c Mon Sep 17 00:00:00 2001
From: "Campbell, Justin" <campb303@purdue.edu>
Date: Tue, 2 Feb 2021 12:29:26 -0500
Subject: [PATCH 08/10] Minor formatting

---
 src/components/ItemTable/ItemTable.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 4160b41..87723d4 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -71,7 +71,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>  
+            <Table 
+                {...getTableProps} 
+                aria-label="Table of Queue Items" 
+                size="small" 
+                classes={{ root: classes.tableMargin }}
+            >  
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -123,7 +128,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell
-                                        classes={{ root: classes.columnBorders,}}
+                                        classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
                                         {cell.render("Cell")}

From 259564390ff95a601475f160d0c78c2e8a794902 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 3 Feb 2021 11:32:10 -0500
Subject: [PATCH 09/10] Refactored code to reduce number of props for
 ItemTableSortButtons component; added prop types to ItemTableSortButtons;
 renamed folder to use same naming convention

---
 src/components/ItemTable/ItemTable.js         | 76 +++++++++++--------
 .../ItemTableSortButtons.js                   | 31 --------
 .../ItemTableSortButtons.md                   |  0
 .../ItemTableSortButtons.js                   | 43 +++++++++++
 .../ItemTableSortButtons.md                   | 15 ++++
 .../index.js                                  |  0
 6 files changed, 104 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
 delete mode 100644 src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
 create mode 100644 src/components/ItemTableSortButtons/ItemTableSortButtons.js
 create mode 100644 src/components/ItemTableSortButtons/ItemTableSortButtons.md
 rename src/components/{ItemTableSortButtons.js => ItemTableSortButtons}/index.js (100%)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 4160b41..7a9e8f8 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,11 +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, Grid, makeStyles, useTheme } from "@material-ui/core";
+import { makeStyles, useTheme, TableContainer, Table, TableHead, TableRow, TableCell, Grid, TableBody, } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/";
-import ItemtTableSortButtons from "../ItemTableSortButtons.js";
+import ItemtTableSortButtons from "../ItemTableSortButtons/"
 
 export default function ItemTable({ data, rowCanBeSelected }) {
     const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
@@ -71,37 +71,53 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>  
+            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map(column => (
-                                <Grid container spacing={0}>
-                                    <TableCell {...column.getHeaderProps()}  classes={{ root: classes.tableHeaderPadding }}>
-                                        <Grid container spacing={0}>
-                                            <Grid item sm={10} >
-                                                {column.render("Filter")}
-                                            </Grid>
-                                            <Grid item sm={2} alignItems='center' justify='center'>
-                                                <ItemtTableSortButtons
-                                                    onClickAsc={_ => {
-                                                        const isSortedAsc = column.isSorted && !column.isSortedDesc;
-                                                        isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false);
-                                                    }}
-                                                    onClickDesc={_ => {
-                                                        const isSortedDesc = column.isSorted && column.isSortedDesc;
-                                                        isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
-                                                    }}
-                                                    colorAsc={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
-                                                    colorDesc={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
-                                                    columnSortAscProps={column.getSortByToggleProps()}
-                                                    columnSortDescProps={column.getSortByToggleProps(column.isSortedDesc)}
-                                                />
+                            {headerGroup.headers.map(column => {
+                                // Determine sort directions
+                                const isSortedAsc = column.isSorted && !column.isSortedDesc;
+                                const isSortedDesc = column.isSorted && column.isSortedDesc;
+
+                                return (
+                                    <Grid container spacing={0}>
+                                        <TableCell
+                                            {...column.getHeaderProps()}
+                                            classes={{ root: classes.tableHeaderPadding }}
+                                        >
+                                            <Grid container spacing={0}>
+                                                <Grid item sm={10} >
+                                                    {column.render("Filter")}
+                                                </Grid>
+                                                <Grid item sm={2} alignItems='center' justify='center'>
+                                                    <ItemtTableSortButtons
+                                                        sortAscArrowProps={{
+                                                            ...column.getSortByToggleProps(),
+                                                            onClick: _ => (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;
+                                                            }
+                                                        })()}
+                                                    />
+                                                </Grid>
                                             </Grid>
-                                        </Grid>
-                                    </TableCell>
-                                </Grid>
-                            ))}
+                                        </TableCell>
+                                    </Grid>
+                                );
+                            })}
                         </TableRow>
                     ))}
                 </TableHead>
@@ -123,7 +139,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell
-                                        classes={{ root: classes.columnBorders,}}
+                                        classes={{ root: classes.columnBorders, }}
                                         {...cell.getCellProps()}
                                     >
                                         {cell.render("Cell")}
diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
deleted file mode 100644
index f7c6cd8..0000000
--- a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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({ onClickAsc, onClickDesc, colorAsc, colorDesc, columnSortAscProps, columnSortDescProps }) {
-    return (
-        <ButtonGroup orientation="vertical" size="small">
-            <IconButton
-                edge="start"
-                onClick={onClickAsc}
-            >
-                <ArrowUpward {...columnSortAscProps}
-                    fontSize="inherit"
-                    color={colorAsc}
-                />
-            </IconButton>
-            <IconButton
-                edge="start"
-                onClick={onClickDesc}
-            >
-                <ArrowDownward {...columnSortDescProps}
-                    fontSize="inherit"
-                    color={colorDesc}
-                />
-            </IconButton>
-        </ButtonGroup>
-    )
-}
-
-
diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
deleted file mode 100644
index e69de29..0000000
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 (
+        <ButtonGroup orientation="vertical" size="small">
+            <IconButton edge="start">
+                <ArrowUpward 
+                    {...sortAscArrowProps}
+                    // Inherit fontsize from containing element to avoid overflow.
+                    fontSize="inherit"
+                    color={sortDirection === 'asc' ? "secondary" : "default"}
+                />
+            </IconButton>
+            <IconButton edge="start">
+                <ArrowDownward 
+                    {...sortDescArrowProps}
+                    // Inherit fontsize from containing element to avoid overflow.
+                    fontSize="inherit"
+                    color={sortDirection === 'desc' ? "secondary" : "default"}
+                />
+            </IconButton>
+        </ButtonGroup>
+    )
+}
+
+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..4739b63
--- /dev/null
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
@@ -0,0 +1,15 @@
+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).
+
+```jsx
+import React, { useState, useEffect } from "react";
+
+
+
+
+
+<ItemTableSortButtons/>
+```
+
+```jsx static
+<ItemTableSortButtons sortDirection="directionOfSort" sortAscArrowProps={someProps} sortDescArrowProps={someProps}/>
+```
\ No newline at end of file
diff --git a/src/components/ItemTableSortButtons.js/index.js b/src/components/ItemTableSortButtons/index.js
similarity index 100%
rename from src/components/ItemTableSortButtons.js/index.js
rename to src/components/ItemTableSortButtons/index.js

From 0799a8f88b53f52d4cadd826f07ac370498e47b4 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Mon, 8 Feb 2021 14:34:23 -0500
Subject: [PATCH 10/10] Updated ItemTableSortButtons docs with examples of
 usage

---
 .../ItemTableSortButtons.md                   | 59 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/components/ItemTableSortButtons/ItemTableSortButtons.md b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
index 4739b63..33037b2 100644
--- a/src/components/ItemTableSortButtons/ItemTableSortButtons.md
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
@@ -1,15 +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/";
 
 
 
 
-
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
 <ItemTableSortButtons/>
+</TableCell>
+
+
+```
+```jsx static
+<ItemTableSortButtons sortDirection="sortDirection" sortAscArrowProps={someObject} sortDescArrowProps={someObject} />
+
 ```
+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/";
+
+
 
+
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
+<ItemTableSortButtons sortDirection="asc" />
+</TableCell>
+
+
+```
 ```jsx static
-<ItemTableSortButtons sortDirection="directionOfSort" sortAscArrowProps={someProps} sortDescArrowProps={someProps}/>
-```
\ No newline at end of file
+<ItemTableSortButtons sortDirection="asc"/>
+```
+## 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/";
+
+
+
+
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
+<ItemTableSortButtons sortDirection="desc" />
+</TableCell>
+
+
+```
+```jsx static
+<ItemTableSortButtons sortDirection="desc"/>
+```
+
+
+