diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 2519a04..505617f 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,17 +1,15 @@ -import React from "react"; +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 { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } 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"; export default function ItemTable({ data }) { - + const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); + const theme = useTheme(); const useStyles = makeStyles({ // Fully visible for active icons @@ -22,6 +20,11 @@ export default function ItemTable({ data }) { inactiveSortIcon: { opacity: 0.2, }, + rowSelected: { + "&$selected, &$selected:hover": { + backgroundColor: theme.palette.primary, + }, + }, bandedRows: { '&:nth-of-type(even)': { backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700], @@ -71,7 +74,7 @@ export default function ItemTable({ data }) { const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; return ( - + {headerGroups.map(headerGroup => ( @@ -121,10 +124,15 @@ export default function ItemTable({ data }) { {rows.map((row, i) => { prepareRow(row); + let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number return ( history.push(`/${row.original.queue}/${row.original.number}`)} - className={classes.bandedRows} + onClick={() => { + history.push(`/${row.original.queue}/${row.original.number}`); + setSelecetedRow({ queue: row.original.queue, number: row.original.number }); + }} + classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }} + selected={isSelected} {...row.getRowProps()} > {row.cells.map(cell => ( @@ -147,4 +155,4 @@ ItemTable.propTypes = { ItemTable.defaultProps = { "items": [] -}; \ No newline at end of file +};