src/app/tailwind.css

@@ -1134,18 +1134,26 @@ body {
   justify-content: space-around;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;

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

@@ -2,6 +2,8 @@
 import { Button } from "@/components/ui/button"
 import {
   ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
 import {
@@ -13,7 +15,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { ComponentProps, useState } from "react"
+import { Component, ComponentProps, use, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -36,7 +38,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { CircleHelp, EyeIcon, Filter, Trash2 } from "lucide-react"
+import { CircleHelp, EyeIcon, Trash2 } from "lucide-react"
 import { usePathname, useSearchParams } from "next/navigation"
 import FormContextMenu from "./contextMenu"
 import { deleteRecord, deleteRecords } from "app/lib/del"
@@ -134,7 +136,7 @@ export function DataTable<TData, TValue>({
       <div className="flex gap-1">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><Filter className="block md:hidden" /> </Button>
+            <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><CircleHelp className="block md:hidden" /> </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             {/*@ts-ignore*/}

src/app/ui/tables/selectColumn.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { CellContext, Column, ColumnDef, ColumnMeta, Header, HeaderContext, RowSelectionTableState, Table, TableState } from "@tanstack/react-table";
 
-export const selectCol = {
+export const selectCol: ColumnDef<any, any> = {
   id: "select",
   header: (props: HeaderContext<any, any>) => {
     return (