default to first *filterable* column

src/app/tailwind.css

@@ -715,6 +715,11 @@ body {
   margin-right: -0.25rem;
 }
 
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -745,11 +750,6 @@ body {
   margin-bottom: auto;
 }
 
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1118,10 +1118,6 @@ body {
   align-items: baseline;
 }
 
-.justify-start {
-  justify-content: flex-start;
-}
-
 .justify-end {
   justify-content: flex-end;
 }
@@ -1138,18 +1134,6 @@ body {
   justify-content: space-around;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-0 {
   gap: 0px;
 }
@@ -1158,6 +1142,18 @@ body {
   gap: 0.125rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.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

@@ -129,11 +129,11 @@ export function DataTable<TData, TValue>({
 
   const router = useRouter()
 
-  const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+  const [filterBy, setFilterBy] = useState(table.getAllColumns().filter(e => e.getCanFilter())[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex gap-1 justify-between items-center py-1 md:py-4">
+    <div className="flex gap-2 justify-between items-center py-1 md:py-4">
-      <div className="flex gap-0.5">
+      <div className="flex gap-1">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><CircleHelp className="block md:hidden" /> </Button>
@@ -155,7 +155,6 @@ export function DataTable<TData, TValue>({
           onChange={(event) =>
             table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
           }
-          disabled={filterBy.id === "select"}
           className="max-w-sm"
         />
       </div>

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 (
@@ -16,7 +16,7 @@ export const selectCol = {
 
     )
   },
-
+  enableColumnFilter: false,
   cell: (props: CellContext<any, any>) => {
     return (
       <div className="flex items-start justify-left">