Skip to content

Enhancement ItemTable Visual Improvements #155

Merged
merged 12 commits into from
Mar 13, 2021
+177 −55
Merged

Enhancement ItemTable Visual Improvements #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
140c71e
Removed Paper render to remove extraneous shadows
Dec 11, 2020
3a95107
Changed the table render to the small variant in order to reduce unee…
Dec 11, 2020
561d435
Styling fixes for sort by buttons to add visual weight and make them …
Dec 11, 2020
566efca
Add spacing for table
campb303 Dec 16, 2020
56d6f28
Remove unused classes
campb303 Dec 16, 2020
3effeb7
Refactored sorting to its own component
wrigh393 Dec 17, 2020
6019e2b
Fixed merge conflict
wrigh393 Dec 17, 2020
9aa5321
Fixed column border gap
wrigh393 Dec 18, 2020
3edc67a
Minor formatting
campb303 Feb 2, 2021
2595643
Refactored code to reduce number of props for ItemTableSortButtons co…
wrigh393 Feb 3, 2021
10de4bd
Fixed merge conflicts
wrigh393 Feb 3, 2021
0799a8f
Updated ItemTableSortButtons docs with examples of usage
wrigh393 Feb 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 63 additions & 55 deletions src/components/ItemTable/ItemTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,17 @@
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 { 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 { ArrowDownward, ArrowUpward } from "@material-ui/icons";

import ItemTableFilter from "../ItemTableFilter/";
import ItemtTableSortButtons from "../ItemTableSortButtons/"

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: {
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],
},
Expand All @@ -34,6 +25,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)
},
tableHeaderPadding: {
paddingBottom: theme.spacing(2)
},
});
const classes = useStyles();

Expand Down Expand Up @@ -73,53 +70,63 @@ export default function ItemTable({ data, rowCanBeSelected }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;

return (
<TableContainer component={Paper} >
<Table {...getTableProps} aria-label="Table of Queue Items" >
<TableContainer>
<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()}>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ButtonGroup orientation="vertical" size="small">
<IconButton
size="small"
onClick={(_ => {
const isSortedAsc = column.isSorted && !column.isSortedDesc;
isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
})}
>
<ArrowUpward {...column.getSortByToggleProps()}
fontSize="inherit"
color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
/>
</IconButton>
<IconButton
size="small"
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 ? "default" : "disabled"}
/>
</IconButton>
</ButtonGroup>
{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>

<TableBody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
Expand All @@ -136,7 +143,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()}
>
Expand All @@ -147,6 +154,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
);
})}
</TableBody>

</Table>
</TableContainer>
);
Expand Down
43 changes: 43 additions & 0 deletions src/components/ItemTableSortButtons/ItemTableSortButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.") }
};

68 changes: 68 additions & 0 deletions src/components/ItemTableSortButtons/ItemTableSortButtons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +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="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"/>
```



3 changes: 3 additions & 0 deletions src/components/ItemTableSortButtons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import ItemtTableSortButtons from './ItemTableSortButtons'

export default ItemtTableSortButtons;