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] 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"/>
+```
+
+
+