dont auto close hide col popover on click

This commit is contained in:
miloschwartz
2025-11-07 18:22:13 -08:00
parent 020cb2d794
commit fb9ed8f592
3 changed files with 35 additions and 15 deletions

View File

@@ -568,6 +568,12 @@ export default function ClientsTable({
.getAllColumns() .getAllColumns()
.filter((column) => column.getCanHide()) .filter((column) => column.getCanHide())
.map((column) => { .map((column) => {
const columnDef = column.columnDef as any;
const friendlyName = columnDef.friendlyName;
const displayName = friendlyName ||
(typeof columnDef.header === "string"
? columnDef.header
: column.id);
return ( return (
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
key={column.id} key={column.id}
@@ -576,11 +582,9 @@ export default function ClientsTable({
onCheckedChange={(value) => onCheckedChange={(value) =>
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
} }
onSelect={(e) => e.preventDefault()}
> >
{typeof column.columnDef.header === {displayName}
"string"
? column.columnDef.header
: column.id}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
); );
})} })}

View File

@@ -785,6 +785,12 @@ export default function ResourcesTable({
.getAllColumns() .getAllColumns()
.filter((column) => column.getCanHide()) .filter((column) => column.getCanHide())
.map((column) => { .map((column) => {
const columnDef = column.columnDef as any;
const friendlyName = columnDef.friendlyName;
const displayName = friendlyName ||
(typeof columnDef.header === "string"
? columnDef.header
: column.id);
return ( return (
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
key={column.id} key={column.id}
@@ -793,11 +799,9 @@ export default function ResourcesTable({
onCheckedChange={(value) => onCheckedChange={(value) =>
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
} }
onSelect={(e) => e.preventDefault()}
> >
{typeof column.columnDef.header === {displayName}
"string"
? column.columnDef.header
: column.id}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
); );
})} })}
@@ -992,6 +996,12 @@ export default function ResourcesTable({
.getAllColumns() .getAllColumns()
.filter((column) => column.getCanHide()) .filter((column) => column.getCanHide())
.map((column) => { .map((column) => {
const columnDef = column.columnDef as any;
const friendlyName = columnDef.friendlyName;
const displayName = friendlyName ||
(typeof columnDef.header === "string"
? columnDef.header
: column.id);
return ( return (
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
key={column.id} key={column.id}
@@ -1000,11 +1010,9 @@ export default function ResourcesTable({
onCheckedChange={(value) => onCheckedChange={(value) =>
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
} }
onSelect={(e) => e.preventDefault()}
> >
{typeof column.columnDef.header === {displayName}
"string"
? column.columnDef.header
: column.id}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
); );
})} })}

View File

@@ -193,9 +193,16 @@ export function DataTable<TData, TValue>({
? persistColumnVisibility ? persistColumnVisibility
: undefined; : 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) // Compute initial column visibility (from localStorage if enabled, otherwise from prop/default)
const initialColumnVisibility = (() => { const initialColumnVisibility = (() => {
if (persistColumnVisibility) { if (shouldPersistColumnVisibility) {
return getStoredColumnVisibility( return getStoredColumnVisibility(
tableId, tableId,
defaultColumnVisibility defaultColumnVisibility
@@ -277,10 +284,10 @@ export function DataTable<TData, TValue>({
useEffect(() => { useEffect(() => {
// Persist column visibility to localStorage when it changes // Persist column visibility to localStorage when it changes
if (persistColumnVisibility) { if (shouldPersistColumnVisibility) {
setStoredColumnVisibility(columnVisibility, tableId); setStoredColumnVisibility(columnVisibility, tableId);
} }
}, [columnVisibility, persistColumnVisibility, tableId]); }, [columnVisibility, shouldPersistColumnVisibility, tableId]);
const handleTabChange = (value: string) => { const handleTabChange = (value: string) => {
setActiveTab(value); setActiveTab(value);
@@ -440,6 +447,7 @@ export function DataTable<TData, TValue>({
onCheckedChange={(value) => onCheckedChange={(value) =>
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
} }
onSelect={(e) => e.preventDefault()}
> >
{displayName} {displayName}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>