Migrate to react-table based ItemTable

src/components/ItemTable/ItemTable.js

@@ -1,123 +1,85 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types'
-import MUIDataTable from 'mui-datatables';
-
-
-export default function ItemTable({ setActiveItem, setSidebarOpen }) {
-
-	const columns = [
-		{
-			name: "queue",
-			label: "Queue",
-		},
-		{
-			name: "number",
-			label: "Item #",
-		}, {
-			name: "userAlias",
-			label: "From",
-		}, {
-			name: "assignedTo",
-			label: "Assigned To",
-		}, {
-			name: "subject",
-			label: "Subject",
-		}, {
-			name: "status",
-			label: "Stauts",
-		}, {
-			name: "priority",
-			label: "Priority",
-		}, {
-			name: "lastUpdated",
-			label: "Last Updated",
-		}, {
-			name: "department",
-			label: "Department",
-		}, {
-			name: "building",
-			label: "Building",
-		}, {
-			name: "dateReceived",
-			label: "Date Received",
-		},
-		// "queue",
-		// "Item #",
-		// "From",
-		// "Assigned to",
-		// "Subject",
-		// "Status",
-		// "Priority",
-		// "Last Updated",
-		// "Department",
-		// "Building",
-		// "Date Received",
-	]
-
-	const [data, setData] = useState([])
-
-	useEffect(() => {
-		fetch("/api/ce").then(res => res.json()).then(queue => {
-			setData(queue.items)
-		})
-	}, [])
-
-
-
-
-
-	const options = {
-		"filtering": true,
-		"pagination": false,
-		"filterType": "textField",
-		"search": false,
-		"download": false,
-		"print": false,
-		"draggable": false,
-		"padding": "dense",
-		"responsive": "vertical",
-		"selectableRowsHeader": false,
-		"selectableRowsHideCheckboxes": true,
-		"selectableRows":"single",		
-		"selectableRowsOnClick":true,
-		"onRowSelection": (event, rowData) => {
-			setActiveItem(rowData);
-			setSidebarOpen(true);
-			console.log(event);
-			console.log(rowData);
-		},
-
-
-	}
-
-
-
-	return (
-		<>
-			<MUIDataTable
-				title={"Demo Table"}
-
-				data={data}
-				options={options}
-				columns={columns}
-
-
-			/>
-
-
-		</>
-	);
-}
-
-
-
-
-
-
-ItemTable.propTypes = {
-	/** Function to set active item on row click. */
-	"setActiveItem": PropTypes.func.isRequired,
-	/** Function to toggle sidebar on row click. */
-	"setSidebarOpen": PropTypes.func.isRequired
-}
-
+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 ItemTableFilter from "../ItemTableFilter/"
+
+export default function ItemTable_ReactTable() {
+
+    const [data, setData] = useState([]);
+    useEffect(() => {
+        fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
+            setData(queue.items)
+        })
+    }, [])
+
+    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: ({ column: { Header, setFilter }}) => {
+                    return(
+                        <ItemTableFilter
+                            label={Header} 
+                            onChange={(event) => setFilter(event.target.value)}
+                        />
+                    );
+                }
+            }
+        },
+        useFilters,
+        useFlexLayout
+    );
+
+    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>
+    );
+
+}