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

improve local table state

Browse Source
This commit is contained in:
miloschwartz
2025-12-18 18:08:07 -05:00
parent 4f1dc19569
commit bc45e16109
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ClientResourcesTable.tsx
View File

@@ -317,6 +317,9 @@ export default function ClientResourcesTable({
defaultSort={defaultSort}
enableColumnVisibility={true}
persistColumnVisibility="internal-resources"
columnVisibility={{
niceId: false
}}
stickyLeftColumn="name"
stickyRightColumn="actions"
/>

2
src/components/SidebarNav.tsx
View File

@@ -346,7 +346,7 @@ export function SidebarNav({
<button
className={cn(
"flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
isActive
isActive || isChildActive
? "bg-secondary text-primary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled &&

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

@@ -30,7 +30,7 @@ import {
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw, Columns } from "lucide-react";
@@ -236,6 +236,12 @@ export function DataTable<TData, TValue>({
defaultTab || tabs?.[0]?.id || ""
);
// Track initial values to avoid storing defaults on first render
const initialPageSize = useRef(pageSize);
const initialColumnVisibilityState = useRef(columnVisibility);
const hasUserChangedPageSize = useRef(false);
const hasUserChangedColumnVisibility = useRef(false);
// Apply tab filter to data
const filteredData = useMemo(() => {
if (!tabs || activeTab === "") {
@@ -278,18 +284,26 @@ export function DataTable<TData, TValue>({
}
});
// Persist pageSize to localStorage when it changes
// Persist pageSize to localStorage when it changes (but not on initial mount)
useEffect(() => {
if (persistPageSize && pagination.pageSize !== pageSize) {
setStoredPageSize(pagination.pageSize, tableId);
// Only store if user has actually changed it from initial value
if (hasUserChangedPageSize.current && pagination.pageSize !== initialPageSize.current) {
setStoredPageSize(pagination.pageSize, tableId);
}
setPageSize(pagination.pageSize);
}
}, [pagination.pageSize, persistPageSize, tableId, pageSize]);
useEffect(() => {
// Persist column visibility to localStorage when it changes
// Persist column visibility to localStorage when it changes (but not on initial mount)
if (shouldPersistColumnVisibility) {
setStoredColumnVisibility(columnVisibility, tableId);
const hasChanged = JSON.stringify(columnVisibility) !== JSON.stringify(initialColumnVisibilityState.current);
if (hasChanged) {
// Mark as user-initiated change and persist
hasUserChangedColumnVisibility.current = true;
setStoredColumnVisibility(columnVisibility, tableId);
}
}
}, [columnVisibility, shouldPersistColumnVisibility, tableId]);
@@ -301,6 +315,7 @@ export function DataTable<TData, TValue>({
// Enhanced pagination component that updates our local state
const handlePageSizeChange = (newPageSize: number) => {
hasUserChangedPageSize.current = true;
setPagination((prev) => ({
...prev,
pageSize: newPageSize,
@@ -308,7 +323,7 @@ export function DataTable<TData, TValue>({
}));
setPageSize(newPageSize);
// Persist immediately when changed
// Persist immediately when user changes it
if (persistPageSize) {
setStoredPageSize(newPageSize, tableId);
}