calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-31 23:29:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

persist column filters

Browse Source
This commit is contained in:
miloschwartz
2025-11-05 17:34:50 -08:00
parent 9fd6af3a31
commit 776c33d79d
3 changed files with 215 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/ClientsTable.tsx
View File

@@ -89,8 +89,13 @@ type ClientTableProps = {
const STORAGE_KEYS = {
PAGE_SIZE: "datatable-page-size",
COLUMN_VISIBILITY: "datatable-column-visibility",
getTablePageSize: (tableId?: string) =>
tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE,
getTableColumnVisibility: (tableId?: string) =>
tableId
? `datatable-${tableId}-column-visibility`
: STORAGE_KEYS.COLUMN_VISIBILITY
};
const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -122,6 +127,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
}
};
const getStoredColumnVisibility = (
tableId?: string,
defaultVisibility?: Record<string, boolean>
): Record<string, boolean> => {
if (typeof window === "undefined") return defaultVisibility || {};
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
const stored = localStorage.getItem(key);
if (stored) {
const parsed = JSON.parse(stored);
// Validate that it's an object
if (typeof parsed === "object" && parsed !== null) {
return parsed;
}
}
} catch (error) {
console.warn(
"Failed to read column visibility from localStorage:",
error
);
}
return defaultVisibility || {};
};
const setStoredColumnVisibility = (
visibility: Record<string, boolean>,
tableId?: string
): void => {
if (typeof window === "undefined") return;
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
localStorage.setItem(key, JSON.stringify(visibility));
} catch (error) {
console.warn(
"Failed to save column visibility to localStorage:",
error
);
}
};
export default function ClientsTable({
userClients,
machineClients,
@@ -157,15 +204,22 @@ export default function ClientsTable({
useState<ColumnFiltersState>([]);
const [machineGlobalFilter, setMachineGlobalFilter] = useState<any>([]);
const [userColumnVisibility, setUserColumnVisibility] = useState<VisibilityState>({
const defaultUserColumnVisibility = {
client: false,
subnet: false
});
const [machineColumnVisibility, setMachineColumnVisibility] = useState<VisibilityState>({
};
const defaultMachineColumnVisibility = {
client: false,
subnet: false,
userId: false
});
};
const [userColumnVisibility, setUserColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("user-clients", defaultUserColumnVisibility)
);
const [machineColumnVisibility, setMachineColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("machine-clients", defaultMachineColumnVisibility)
);
const currentView = searchParams.get("view") || defaultView;
@@ -522,10 +576,7 @@ export default function ClientsTable({
pageSize: userPageSize,
pageIndex: 0
},
columnVisibility: {
client: false,
subnet: false
}
columnVisibility: userColumnVisibility
},
state: {
sorting: userSorting,
@@ -551,11 +602,7 @@ export default function ClientsTable({
pageSize: machinePageSize,
pageIndex: 0
},
columnVisibility: {
client: false,
subnet: false,
userId: false
}
columnVisibility: machineColumnVisibility
},
state: {
sorting: machineSorting,
@@ -575,6 +622,15 @@ export default function ClientsTable({
setStoredPageSize(newPageSize, "machine-clients");
};
// Persist column visibility changes to localStorage
useEffect(() => {
setStoredColumnVisibility(userColumnVisibility, "user-clients");
}, [userColumnVisibility]);
useEffect(() => {
setStoredColumnVisibility(machineColumnVisibility, "machine-clients");
}, [machineColumnVisibility]);
return (
<>
{selectedClient && (

72
src/components/ResourcesTable.tsx
View File

@@ -116,8 +116,13 @@ type ResourcesTableProps = {
const STORAGE_KEYS = {
PAGE_SIZE: "datatable-page-size",
COLUMN_VISIBILITY: "datatable-column-visibility",
getTablePageSize: (tableId?: string) =>
tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE,
getTableColumnVisibility: (tableId?: string) =>
tableId
? `datatable-${tableId}-column-visibility`
: STORAGE_KEYS.COLUMN_VISIBILITY
};
const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -149,6 +154,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
}
};
const getStoredColumnVisibility = (
tableId?: string,
defaultVisibility?: Record<string, boolean>
): Record<string, boolean> => {
if (typeof window === "undefined") return defaultVisibility || {};
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
const stored = localStorage.getItem(key);
if (stored) {
const parsed = JSON.parse(stored);
// Validate that it's an object
if (typeof parsed === "object" && parsed !== null) {
return parsed;
}
}
} catch (error) {
console.warn(
"Failed to read column visibility from localStorage:",
error
);
}
return defaultVisibility || {};
};
const setStoredColumnVisibility = (
visibility: Record<string, boolean>,
tableId?: string
): void => {
if (typeof window === "undefined") return;
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
localStorage.setItem(key, JSON.stringify(visibility));
} catch (error) {
console.warn(
"Failed to save column visibility to localStorage:",
error
);
}
};
export default function ResourcesTable({
resources,
internalResources,
@@ -196,8 +243,12 @@ export default function ResourcesTable({
useState<ColumnFiltersState>([]);
const [internalGlobalFilter, setInternalGlobalFilter] = useState<any>([]);
const [isRefreshing, setIsRefreshing] = useState(false);
const [proxyColumnVisibility, setProxyColumnVisibility] = useState<VisibilityState>({});
const [internalColumnVisibility, setInternalColumnVisibility] = useState<VisibilityState>({});
const [proxyColumnVisibility, setProxyColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("proxy-resources", {})
);
const [internalColumnVisibility, setInternalColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("internal-resources", {})
);
const currentView = searchParams.get("view") || defaultView;
@@ -684,7 +735,8 @@ export default function ResourcesTable({
pagination: {
pageSize: proxyPageSize,
pageIndex: 0
}
},
columnVisibility: proxyColumnVisibility
},
state: {
sorting: proxySorting,
@@ -709,7 +761,8 @@ export default function ResourcesTable({
pagination: {
pageSize: internalPageSize,
pageIndex: 0
}
},
columnVisibility: internalColumnVisibility
},
state: {
sorting: internalSorting,
@@ -729,6 +782,15 @@ export default function ResourcesTable({
setStoredPageSize(newPageSize, "internal-resources");
};
// Persist column visibility changes to localStorage
useEffect(() => {
setStoredColumnVisibility(proxyColumnVisibility, "proxy-resources");
}, [proxyColumnVisibility]);
useEffect(() => {
setStoredColumnVisibility(internalColumnVisibility, "internal-resources");
}, [internalColumnVisibility]);
return (
<>
{selectedResource && (

85
src/components/ui/data-table.tsx
View File

@@ -44,8 +44,13 @@ import {
const STORAGE_KEYS = {
PAGE_SIZE: "datatable-page-size",
COLUMN_VISIBILITY: "datatable-column-visibility",
getTablePageSize: (tableId?: string) =>
tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE
tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE,
getTableColumnVisibility: (tableId?: string) =>
tableId
? `${tableId}-column-visibility`
: STORAGE_KEYS.COLUMN_VISIBILITY
};
const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -78,6 +83,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
}
};
const getStoredColumnVisibility = (
tableId?: string,
defaultVisibility?: Record<string, boolean>
): Record<string, boolean> => {
if (typeof window === "undefined") return defaultVisibility || {};
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
const stored = localStorage.getItem(key);
if (stored) {
const parsed = JSON.parse(stored);
// Validate that it's an object
if (typeof parsed === "object" && parsed !== null) {
return parsed;
}
}
} catch (error) {
console.warn(
"Failed to read column visibility from localStorage:",
error
);
}
return defaultVisibility || {};
};
const setStoredColumnVisibility = (
visibility: Record<string, boolean>,
tableId?: string
): void => {
if (typeof window === "undefined") return;
try {
const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
localStorage.setItem(key, JSON.stringify(visibility));
} catch (error) {
console.warn(
"Failed to save column visibility to localStorage:",
error
);
}
};
type TabFilter = {
id: string;
label: string;
@@ -104,6 +151,7 @@ type DataTableProps<TData, TValue> = {
defaultPageSize?: number;
columnVisibility?: Record<string, boolean>;
enableColumnVisibility?: boolean;
persistColumnVisibility?: boolean | string;
};
export function DataTable<TData, TValue>({
@@ -122,13 +170,30 @@ export function DataTable<TData, TValue>({
persistPageSize = false,
defaultPageSize = 20,
columnVisibility: defaultColumnVisibility,
enableColumnVisibility = false
enableColumnVisibility = false,
persistColumnVisibility = false
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
// Determine table identifier for storage
// Use persistPageSize string if provided, otherwise use persistColumnVisibility string, otherwise undefined
const tableId =
typeof persistPageSize === "string" ? persistPageSize : undefined;
typeof persistPageSize === "string"
? persistPageSize
: typeof persistColumnVisibility === "string"
? persistColumnVisibility
: undefined;
// Compute initial column visibility (from localStorage if enabled, otherwise from prop/default)
const initialColumnVisibility = (() => {
if (persistColumnVisibility) {
return getStoredColumnVisibility(
tableId,
defaultColumnVisibility
);
}
return defaultColumnVisibility || {};
})();
// Initialize page size from storage or default
const [pageSize, setPageSize] = useState<number>(() => {
@@ -143,9 +208,8 @@ export function DataTable<TData, TValue>({
);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
defaultColumnVisibility || {}
);
const [columnVisibility, setColumnVisibility] =
useState<VisibilityState>(initialColumnVisibility);
const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || ""
);
@@ -180,7 +244,7 @@ export function DataTable<TData, TValue>({
pageSize: pageSize,
pageIndex: 0
},
columnVisibility: defaultColumnVisibility || {}
columnVisibility: initialColumnVisibility
},
state: {
sorting,
@@ -202,6 +266,13 @@ export function DataTable<TData, TValue>({
}
}, [pageSize, table, persistPageSize, tableId]);
useEffect(() => {
// Persist column visibility to localStorage when it changes
if (persistColumnVisibility) {
setStoredColumnVisibility(columnVisibility, tableId);
}
}, [columnVisibility, persistColumnVisibility, tableId]);
const handleTabChange = (value: string) => {
setActiveTab(value);
// Reset to first page when changing tabs