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