Created a new table component to test react-table viability

package.json

@@ -17,7 +17,8 @@
     "mui-datatables": "^3.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-table": "^7.5.1"
   },
   "scripts": {
     "start:frontend": "react-scripts start",

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "./theme";
 import { Box, makeStyles, Paper } from "@material-ui/core";
@@ -7,6 +7,7 @@ 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";
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
@@ -49,13 +50,69 @@ 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}>
 			<Paper>
 				<Box display="flex">
 					<Box className={classes.leftCol}>
 						<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-						<ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+						{/* <ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/> */}
+						<ReactTable columns={columns} data={data}/>
 					</Box>
 					<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 						<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />

src/components/ItemTable/ReactTable.js

@@ -0,0 +1,51 @@
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, TextField } from "@material-ui/core";
+import React from "react";
+import { useTable } from "react-table";
+
+export default function ReactTable({ columns, data }) {
+    // Use the useTable Hook to send the columns and data to build the table
+    const {
+        getTableProps, // table props from react-table
+        getTableBodyProps, // table body props from react-table
+        headerGroups, // headerGroups, if your table has groupings
+        rows, // rows for the table based on the data passed
+        prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
+    } = useTable({
+        columns,
+        data
+    });
+
+
+
+    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("Header")}</TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+
+
+                </TableHead>
+                <TableBody {...getTableBodyProps()}>
+                    {rows.map((row, i) => {
+                        prepareRow(row);
+                        return (
+                            <TableRow {...row.getRowProps()}>
+                                {row.cells.map(cell => {
+                                    return <TableCell {...cell.getCellProps()}>{cell.render("Cell")}</TableCell>;
+                                })}
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </TableContainer>
+
+    );
+}