added optional element to responsive table to render an element before the search bar

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
-import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, Grid2, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
+import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, Tune } from "@mui/icons-material";
+import { Box, Chip, Dialog, DialogTitle, Grid2, IconButton, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -125,6 +125,8 @@ export default function Devices() {
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
   const [seperateDust, setSeperateDust] = useState(true)
 
+  const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
+
   const [{ as }] = useGlobalState()
 
   const updateGroups = (newGroups: Group[]) => {
@@ -282,7 +284,6 @@ export default function Devices() {
 
   function insertGroupContext(groupID: string, deviceID: string): string {
     const path = location.pathname
-    console.log(path)
     const segments = path.split('/').filter(Boolean);
     const deviceIndex = segments.findIndex(segment => segment === 'devices');
 
@@ -305,10 +306,7 @@ export default function Devices() {
   const toDevice = (device: Device) => {
 
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
-    console.log(url)
     if (url.length < 1) url = device.id().toString()
-    // url = url + "/" + device.id()
-    // navigate(url, { replace: true, state: {device: device} })
     navigate(url, { state: {device: device} })
   };
 
@@ -527,6 +525,29 @@ export default function Devices() {
     )
   }
 
+  const preferencesButton = () => {
+    return (
+      <IconButton onClick={(event) => setPreferencesAnchor(event.currentTarget)}>
+        <Tune />
+      </IconButton>
+    )
+  }
+
+  const preferencesMenu = () => {
+    return (
+      <Menu
+        id="userMenu"
+        anchorEl={preferencesAnchor}
+        open={preferencesAnchor !== null}
+        onClose={() => setPreferencesAnchor(null)}
+        disableAutoFocusItem>
+          <MenuItem>
+            hi
+          </MenuItem>
+      </Menu>
+    )
+  }
+
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
       <Box 
@@ -572,6 +593,7 @@ export default function Devices() {
         setSearchText={setSearch}
         isLoading={devicesLoading}
         actions={getGroup() && <GroupActions removeCallback={removeGroupCallback} group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
+        endTitleElement={preferencesButton}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}
@@ -590,6 +612,7 @@ export default function Devices() {
         removeGroupCallback={removeGroupCallback}
         addGroupCallback={addGroupCallback}
       />
+      {preferencesMenu()}
     </PageContainer>
   )
 }