Implemeted per column sorting for ItemTable-ReactTable

src/components/ItemTable/ItemTable-ReactTable.js

@@ -1,10 +1,22 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
+import { useTable, useFilters, useBlockLayout, useFlexLayout, useSortBy } from "react-table";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, TableSortLabel } from "@material-ui/core";
 import ItemTableFilter from "../ItemTableFilter/"
 
 export default function ItemTable_ReactTable() {
 
+    const styles = theme => ({
+        width:50,
+        // Fully visible for active icons
+        activeSortIcon: {
+          opacity: 1,
+        },
+        // Half visible for inactive icons
+        inactiveSortIcon: {
+          opacity: 0.4,
+        },
+      });
+
     const [data, setData] = useState([]);
     useEffect(() => {
         fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
@@ -14,8 +26,8 @@ export default function ItemTable_ReactTable() {
 
     const columns = React.useMemo(
         () => [
-            { Header: 'Queue', accessor: 'queue',  },
-            { Header: 'Item #', accessor: 'number'},
+            { Header: 'Queue', accessor: 'queue', },
+            { Header: 'Item #', accessor: 'number' },
             { Header: 'Assigned To', accessor: 'assignedTo' },
             { Header: 'Subject', accessor: 'subject' },
             { Header: 'Status', accessor: 'status', },
@@ -34,32 +46,46 @@ export default function ItemTable_ReactTable() {
     } = useTable(
         {
             columns,
+            defaultCanSort: true,
             data,
             defaultColumn: {
-                Filter: ({ column: { Header, setFilter }}) => {
-                    return(
+                Filter: ({ column: { Header, setFilter } }) => {
+                    return (
                         <ItemTableFilter
-                            label={Header} 
+                            label={Header}
                             onChange={(event) => setFilter(event.target.value)}
                         />
                     );
                 }
             }
         },
         useFilters,
-        useFlexLayout
+        useFlexLayout,
+        useSortBy,
     );
 
+    const [orderBy, setOrderBy] = useState("");
+
     return (
         <TableContainer component={Paper}>
             <Table {...getTableProps} aria-label="simple table">
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
-                                <TableCell {...column.getHeaderProps()}>
-                                    {column.render("Filter")}
+                                <TableCell {...column.getHeaderProps()}>{column.render("Filter")}
+                                    <TableSortLabel
+                                        // active={column.Header === orderBy}
+                                        active
+                                        direction={column.isSorted ? column.isSortedDesc ? 'asc' :'desc': 'asc'}
+                                        {...column.getHeaderProps(column.getSortByToggleProps())}
+                                    >
+
+                                    </TableSortLabel>
+
                                 </TableCell>
+
+
                             ))}
                         </TableRow>
                     ))}

src/components/ItemTableFilter/ItemTableFilter.md

@@ -0,0 +1,24 @@
+
+```jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextField } from "@material-ui/core";
+
+
+        <>
+            <TextField
+                label="Name"
+                onChange={(event) => null}
+                type="search"
+                size="small"
+                color="secondary"
+                variant="outlined"
+                fullWidth
+            />
+        </>
+
+```
+
+```jsx static
+<ItemTable label={Header} onChange={(event) => setFilter(event.target.value)} />
+```