Replace inline ColumnFilter with ItemTableFilter

ECN · Oct 7, 2020 · 2c3f391 · 2c3f391
1 parent b95d5ac
commit 2c3f391
Showing 1 changed file with 9 additions and 18 deletions.
diff --git a/src/components/ItemTable/ItemTable-ReactTable.js b/src/components/ItemTable/ItemTable-ReactTable.js
@@ -1,7 +1,7 @@
 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";
+import ItemTableFilter from "../ItemTableFilter/"
 
 export default function ItemTable_ReactTable() {
 
@@ -12,22 +12,6 @@ export default function ItemTable_ReactTable() {
         })
     }, [])
 
-    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' },
@@ -52,7 +36,14 @@ export default function ItemTable_ReactTable() {
             columns,
             data,
             defaultColumn: {
-                Filter: ColumnFilter
+                Filter: ({ column: { Header, setFilter }}) => {
+                    return(
+                        <ItemTableFilter
+                            label={Header} 
+                            onChange={(event) => setFilter(event.target.value)}
+                        />
+                    );
+                }
             }
         },
         useFilters