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 (
column.toggleVisibility(!!value)
}
+ onSelect={(e) => e.preventDefault()}
>
- {typeof column.columnDef.header ===
- "string"
- ? column.columnDef.header
- : column.id}
+ {displayName}
);
})}
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 (
column.toggleVisibility(!!value)
}
+ onSelect={(e) => e.preventDefault()}
>
- {typeof column.columnDef.header ===
- "string"
- ? column.columnDef.header
- : column.id}
+ {displayName}
);
})}
@@ -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 (
column.toggleVisibility(!!value)
}
+ onSelect={(e) => e.preventDefault()}
>
- {typeof column.columnDef.header ===
- "string"
- ? column.columnDef.header
- : column.id}
+ {displayName}
);
})}
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({
? 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({
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({
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
+ onSelect={(e) => e.preventDefault()}
>
{displayName}