Implemented useFlexLayout hook to to stop header text from overflowin…

…g its container

src/components/ItemTable/ItemTable-ReactTable.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { useTable, useFilters } from "react-table";
+import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
 import ItemTableFilter from "../ItemTableFilter/"
 
@@ -14,11 +14,11 @@ export default function ItemTable_ReactTable() {
 
     const columns = React.useMemo(
         () => [
-            { Header: 'Queue', accessor: 'queue' },
-            { Header: 'Item #', accessor: 'number' },
+            { Header: 'Queue', accessor: 'queue',  },
+            { Header: 'Item #', accessor: 'number'},
             { Header: 'Assigned To', accessor: 'assignedTo' },
             { Header: 'Subject', accessor: 'subject' },
-            { Header: 'Status', accessor: 'status' },
+            { Header: 'Status', accessor: 'status', },
             { Header: 'Priority', accessor: 'priority' },
             { Header: 'Last Updated', accessor: 'lastUpdated' },
             { Header: 'Department', accessor: 'department' },
@@ -46,7 +46,8 @@ export default function ItemTable_ReactTable() {
                 }
             }
         },
-        useFilters
+        useFilters,
+        useFlexLayout
     );
 
     return (