From fb9ed8f592d8642e0596e6db59cca311a095ee7c Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 7 Nov 2025 18:22:13 -0800
Subject: [PATCH] dont auto close hide col popover on click

---
 src/components/ClientsTable.tsx   | 12 ++++++++----
 src/components/ResourcesTable.tsx | 24 ++++++++++++++++--------
 src/components/ui/data-table.tsx  | 14 +++++++++++---
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/components/ClientsTable.tsx b/src/components/ClientsTable.tsx
index 4ce9eb34..418488d6 100644
--- a/src/components/ClientsTable.tsx
+++ b/src/components/ClientsTable.tsx
@@ -568,6 +568,12 @@ export default function ClientsTable({
                                         .getAllColumns()
                                         .filter((column) => column.getCanHide())
                                         .map((column) => {
+                                            const columnDef = column.columnDef as any;
+                                            const friendlyName = columnDef.friendlyName;
+                                            const displayName = friendlyName ||
+                                                (typeof columnDef.header === "string"
+                                                    ? columnDef.header
+                                                    : column.id);
                                             return (
                                                 <DropdownMenuCheckboxItem
                                                     key={column.id}
@@ -576,11 +582,9 @@ export default function ClientsTable({
                                                     onCheckedChange={(value) =>
                                                         column.toggleVisibility(!!value)
                                                     }
+                                                    onSelect={(e) => e.preventDefault()}
                                                 >
-                                                    {typeof column.columnDef.header ===
-                                                    "string"
-                                                        ? column.columnDef.header
-                                                        : column.id}
+                                                    {displayName}
                                                 </DropdownMenuCheckboxItem>
                                             );
                                         })}
diff --git a/src/components/ResourcesTable.tsx b/src/components/ResourcesTable.tsx
index a288c099..994c710a 100644
--- a/src/components/ResourcesTable.tsx
+++ b/src/components/ResourcesTable.tsx
@@ -785,6 +785,12 @@ export default function ResourcesTable({
                                     .getAllColumns()
                                     .filter((column) => column.getCanHide())
                                     .map((column) => {
+                                        const columnDef = column.columnDef as any;
+                                        const friendlyName = columnDef.friendlyName;
+                                        const displayName = friendlyName ||
+                                            (typeof columnDef.header === "string"
+                                                ? columnDef.header
+                                                : column.id);
                                         return (
                                             <DropdownMenuCheckboxItem
                                                 key={column.id}
@@ -793,11 +799,9 @@ export default function ResourcesTable({
                                                 onCheckedChange={(value) =>
                                                     column.toggleVisibility(!!value)
                                                 }
+                                                onSelect={(e) => e.preventDefault()}
                                             >
-                                                {typeof column.columnDef.header ===
-                                                "string"
-                                                    ? column.columnDef.header
-                                                    : column.id}
+                                                {displayName}
                                             </DropdownMenuCheckboxItem>
                                         );
                                     })}
@@ -992,6 +996,12 @@ export default function ResourcesTable({
                                     .getAllColumns()
                                     .filter((column) => column.getCanHide())
                                     .map((column) => {
+                                        const columnDef = column.columnDef as any;
+                                        const friendlyName = columnDef.friendlyName;
+                                        const displayName = friendlyName ||
+                                            (typeof columnDef.header === "string"
+                                                ? columnDef.header
+                                                : column.id);
                                         return (
                                             <DropdownMenuCheckboxItem
                                                 key={column.id}
@@ -1000,11 +1010,9 @@ export default function ResourcesTable({
                                                 onCheckedChange={(value) =>
                                                     column.toggleVisibility(!!value)
                                                 }
+                                                onSelect={(e) => e.preventDefault()}
                                             >
-                                                {typeof column.columnDef.header ===
-                                                "string"
-                                                    ? column.columnDef.header
-                                                    : column.id}
+                                                {displayName}
                                             </DropdownMenuCheckboxItem>
                                         );
                                     })}
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index 0ecf0ef1..9dfbd5cc 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -193,9 +193,16 @@ export function DataTable<TData, TValue>({
               ? persistColumnVisibility
               : undefined;
 
+    // Auto-enable persistence if column visibility is enabled
+    // Use explicit persistColumnVisibility if provided, otherwise auto-enable when enableColumnVisibility is true and we have a tableId
+    const shouldPersistColumnVisibility = 
+        persistColumnVisibility === true || 
+        typeof persistColumnVisibility === "string" ||
+        (enableColumnVisibility && tableId !== undefined);
+
     // Compute initial column visibility (from localStorage if enabled, otherwise from prop/default)
     const initialColumnVisibility = (() => {
-        if (persistColumnVisibility) {
+        if (shouldPersistColumnVisibility) {
             return getStoredColumnVisibility(
                 tableId,
                 defaultColumnVisibility
@@ -277,10 +284,10 @@ export function DataTable<TData, TValue>({
 
     useEffect(() => {
         // Persist column visibility to localStorage when it changes
-        if (persistColumnVisibility) {
+        if (shouldPersistColumnVisibility) {
             setStoredColumnVisibility(columnVisibility, tableId);
         }
-    }, [columnVisibility, persistColumnVisibility, tableId]);
+    }, [columnVisibility, shouldPersistColumnVisibility, tableId]);
 
     const handleTabChange = (value: string) => {
         setActiveTab(value);
@@ -440,6 +447,7 @@ export function DataTable<TData, TValue>({
                                                                                         onCheckedChange={(value) =>
                                                                                             column.toggleVisibility(!!value)
                                                                                         }
+                                                                                        onSelect={(e) => e.preventDefault()}
                                                                                     >
                                                                                         {displayName}
                                                                                     </DropdownMenuCheckboxItem>