Updated react-table filters todisplay column head as as placeholder

src/components/ItemTable/ReactTable.js

@@ -1,9 +1,30 @@
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, TextField } from "@material-ui/core";
 import React from "react";
-import { useTable } from "react-table";
+import { useTable, useFilters, filterTypes, } from "react-table";
 
 export default function ReactTable({ columns, data }) {
     // Use the useTable Hook to send the columns and data to build the table
+    function DefaultColumnFilter({
+        column
+    }) {
+
+        return (
+            <TextField onChange={e => {
+                column.setFilter(e.target.value || undefined)
+            }}
+                label={column.Header}
+            />
+        )
+
+
+    }
+
+    const defaultColumn = React.useMemo(
+        () => ({
+            Filter: DefaultColumnFilter,
+        }),
+        []
+    );
     const {
         getTableProps, // table props from react-table
         getTableBodyProps, // table body props from react-table
@@ -12,12 +33,16 @@ export default function ReactTable({ columns, data }) {
         prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
     } = useTable({
         columns,
-        data
-    });
+        data,
+        defaultColumn,
+        filterTypes,
+    },
+        useFilters);
+
+
+
 
 
-
-
     return (
 
         <TableContainer component={Paper}>
@@ -26,7 +51,10 @@ export default function ReactTable({ columns, data }) {
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
-                                <TableCell {...column.getHeaderProps()}>{column.render("Header")}</TableCell>
+                                <TableCell {...column.getHeaderProps()}>{column.render("Header")}
+
+                                    <div>{column.canFilter ? column.render('Filter') : null}</div> {/* This div renders the Filters based on if the table is set to allow filtering.*/}
+                                </TableCell>
                             ))}
                         </TableRow>
                     ))}