Implement react-table w/ filters using search fields as column headers

src/App.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
-import webqueueTheme from "./theme";
+import clsx from "clsx";
 import { Box, makeStyles, Paper } from "@material-ui/core";
+import webqueueTheme from "./theme";
 import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
-import clsx from "clsx";
-import ReactTable from "./components/ItemTable/ReactTable";
+import ItemTable_ReactTable from "./components/ItemTable/ItemTable-ReactTable";
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
@@ -49,61 +49,6 @@ function App(){
 	});
 
 	const classes = useStyles();
-
-	const columns = React.useMemo(
-		() => [
-		  {
-			Header: 'Queue',
-			accessor: 'queue', // accessor is the "key" in the data
-		  },
-		  {
-			Header: 'Item #',
-			accessor: 'number',
-		  },
-		  {
-			Header: 'Assigned To',
-			accessor: 'assignedTo',
-		  },
-		  {
-			Header: 'Subject',
-			accessor: 'subject',
-		  },
-		  {
-			Header: 'Status',
-			accessor: 'status',
-		  },
-		  {
-			Header: 'Priority',
-			accessor: 'priority',
-		  },
-		  {
-			Header: 'Last Updated',
-			accessor: 'lastUpdated',
-		  },
-		  {
-			Header: 'Department',
-			accessor: 'department',
-		  },
-		  {
-			Header: 'Building',
-			accessor: 'building',
-		  },
-		  {
-			Header: 'Date Received',
-			accessor: 'dateReceived',
-		  },
-
-		],
-		[]
-	  );
-
-	  const [data, setData] = useState([])
-
-	  useEffect(() => {
-		  fetch("/api/ce").then(res => res.json()).then(queue => {
-			  setData(queue.items)
-		  })
-	  }, []);
 
 	return (
 		<ThemeProvider theme={theme}>
@@ -112,7 +57,7 @@ function App(){
 					<Box className={classes.leftCol}>
 						<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
 						{/* <ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/> */}
-						<ReactTable columns={columns} data={data}/>
+						<ItemTable_ReactTable />
 					</Box>
 					<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 						<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />

src/components/ItemTable/ItemTable-ReactTable.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useTable, useFilters } from "react-table";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
+
+export default function ItemTable_ReactTable() {
+
+    const [data, setData] = useState([]);
+    useEffect(() => {
+        fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
+            setData(queue.items)
+        })
+    }, [])
+
+    const ColumnFilter = ({ column }) => {
+        return (
+            <>
+                <TextField
+                    label={column.Header}
+                    onChange={(event) => column.setFilter(event.target.value)}
+                    type="search"
+                    size="small"
+                    color="secondary"
+                    variant="outlined"
+                    fullWidth
+                />
+            </>
+        );
+    };
+
+    const columns = React.useMemo(
+        () => [
+            { Header: 'Queue', accessor: 'queue' },
+            { Header: 'Item #', accessor: 'number' },
+            { Header: 'Assigned To', accessor: 'assignedTo' },
+            { Header: 'Subject', accessor: 'subject' },
+            { Header: 'Status', accessor: 'status' },
+            { Header: 'Priority', accessor: 'priority' },
+            { Header: 'Last Updated', accessor: 'lastUpdated' },
+            { Header: 'Department', accessor: 'department' },
+            { Header: 'Building', accessor: 'building' },
+            { Header: 'Date Received', accessor: 'dateReceived' },
+        ], []);
+
+    const { getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow
+    } = useTable(
+        {
+            columns,
+            data,
+            defaultColumn: {
+                Filter: ColumnFilter
+            }
+        },
+        useFilters
+    );
+
+    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>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHead>
+                <TableBody {...getTableBodyProps()}>
+                    {rows.map((row, i) => {
+                        prepareRow(row);
+                        return (
+                            <TableRow {...row.getRowProps()}>
+                                {row.cells.map(cell => (
+                                    <TableCell {...cell.getCellProps()}>
+                                        {cell.render("Cell")}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+
+}