Added styling to ItemTable to display what row is currently selected

ECN · Nov 2, 2020 · 989f148 · 989f148
1 parent da2592d
commit 989f148
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,10 +1,7 @@
-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/"
@@ -22,11 +19,17 @@ 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],
             },
         },
+
         columnBorders: {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
@@ -68,10 +71,13 @@ export default function ItemTable({ data }) {
         },
         useFilters, useFlexLayout, useSortBy,
     );
+
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
+    const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
+
     return (
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} >
             <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
@@ -121,10 +127,15 @@ export default function ItemTable({ data }) {
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
+                        let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
                         return (
                             <TableRow
-                                onClick={() => 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={selectedRow.queue === row.original.queue && selectedRow.number === row.original.number}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>