add deselect option to context menu

src/app/ui/tables/contextMenu.tsx

@@ -6,17 +6,23 @@ import { Trash2 } from "lucide-react"
 import Link from "next/link"
 import { ContextMenuSeparator } from "@radix-ui/react-context-menu"
 
-export default function FormContextMenu({ pathname, row }) {
+export default function FormContextMenu({ pathname, row, selectedRows, deselect }) {
+
 
   return (
-    <Dialog>
+    <Dialog modal={true}>
       <ContextMenuContent >
-        {pathname !== "/submission" ?
+        {pathname !== "/submission" && selectedRows.length <= 1 ?
           <Link href={`${pathname}/${row.original.id}`}>
             <ContextMenuItem>Inspect</ContextMenuItem>
           </Link>
           : ""
         }
+        {
+          selectedRows ?
+            <ContextMenuItem onClick={deselect}>Deselect</ContextMenuItem>
+            : ""
+        }
         <ContextMenuSeparator />
         <DialogTrigger asChild>
           <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>

src/app/ui/tables/data-table.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { Component, ComponentProps, useState } from "react"
+import { Component, ComponentProps, use, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -82,8 +82,12 @@ export function DataTable<TData, TValue>({
       columnVisibility,
     }
   })
+
+
+
   const pathname: Pathname = usePathname()
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
     <div className="flex justify-between items-center py-4">
       <div className="flex gap-2">
@@ -204,20 +208,26 @@ export function DataTable<TData, TValue>({
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <ContextMenu>
+              <ContextMenu onOpenChange={open => setIsContextMenuOpen(open)}>
                 <ContextMenuTrigger asChild>
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     tabIndex={0}
-                    onClick={() => row.toggleSelected()}
+                    //check if context menu is open, so as not to select the row on clicking a menu item
+                    onClick={() => { if (!isContextMenuOpen) { row.toggleSelected() } }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
-                    <FormContextMenu pathname={pathname} row={row} />
+                    <FormContextMenu
+                      pathname={pathname}
+                      row={row}
+                      selectedRows={table.getSelectedRowModel().flatRows}
+                      deselect={table.resetRowSelection}
+                    />
                   </TableRow>
                 </ContextMenuTrigger>
               </ContextMenu>