diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 05a054d..4a458b2 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,16 +1,31 @@ import React, { useState, useEffect } from "react"; -import { useTable, useFilters, useFlexLayout } from "react-table"; -import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core"; +import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table"; +import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid } from "@material-ui/core"; import ItemTableFilter from "../ItemTableFilter/" export default function ItemTable() { + const useStyles = makeStyles({ + // Fully visible for active icons + activeSortIcon: { + opacity: 1, + }, + // Half visible for inactive icons + inactiveSortIcon: { + opacity: 0.2, + }, + }); + + const classes = useStyles(); + + + const [data, setData] = useState([]); useEffect(() => { fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => { setData(queue.items) }) - }, []) + }, []); const columns = React.useMemo( () => [ @@ -47,19 +62,34 @@ export default function ItemTable() { } }, useFilters, - useFlexLayout + useFlexLayout, + useSortBy ); return ( - +
{headerGroups.map(headerGroup => ( {headerGroup.headers.map(column => ( - - {column.render("Filter")} - + + + + + {column.render("Filter")} + + + + + + + + ))} ))}