Skip to content

Commit

Permalink
Updated ItemTableSortButtons docs with examples of usage
Browse files Browse the repository at this point in the history
  • Loading branch information
wrigh393 committed Feb 8, 2021
1 parent 10de4bd commit 0799a8f
Showing 1 changed file with 56 additions and 3 deletions.
59 changes: 56 additions & 3 deletions src/components/ItemTableSortButtons/ItemTableSortButtons.md
Original file line number Diff line number Diff line change
@@ -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}/>
```
<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"/>
```



0 comments on commit 0799a8f

Please sign in to comment.