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/"; - + + + + + +``` +```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 - -``` \ No newline at end of file + +``` +## 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 + +``` + + +