fix(dashboard): Fix issues with facet value table

packages/dashboard/src/app/routes/_authenticated/_facets/components/facet-values-table.tsx

@@ -3,13 +3,16 @@ import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-d
 import { Button } from '@/vdb/components/ui/button.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
-import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { SortingState } from '@tanstack/react-table';
 import { PlusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { DeleteFacetValuesBulkAction } from './facet-value-bulk-actions.js';
 
+const pageId = 'facet-values-table';
+
 export const facetValueListDocument = graphql(`
     query FacetValueList($options: FacetValueListOptions) {
         facetValues(options: $options) {
@@ -35,9 +38,21 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const { setTableSettings, settings } = useUserSettings();
     const refreshRef = useRef<() => void>(() => {});
 
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+    const defaultVisibility = {
+        name: true,
+        code: true,
+    };
+
+    const columnVisibility = pageId
+        ? (tableSettings?.columnVisibility ?? defaultVisibility)
+        : defaultVisibility;
+    const columnOrder = pageId ? (tableSettings?.columnOrder ?? []) : ['name', 'code'];
+    const columnFilters = pageId ? tableSettings?.columnFilters : [];
+
     return (
         <>
             <PaginatedListDataTable
@@ -45,16 +60,27 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
                 page={page}
                 itemsPerPage={pageSize}
                 sorting={sorting}
-                columnFilters={filters}
-                onPageChange={(_, page, perPage) => {
-                    setPage(page);
-                    setPageSize(perPage);
+                columnFilters={columnFilters}
+                defaultColumnOrder={columnOrder}
+                defaultVisibility={columnVisibility}
+                onPageChange={(table, page, perPage) => {
+                    if (pageId) {
+                        setPageSize(perPage);
+                        setPage(page);
+                    }
                 }}
-                onSortChange={(_, sorting) => {
+                onSortChange={(table, sorting) => {
                     setSorting(sorting);
                 }}
-                onFilterChange={(_, filters) => {
-                    setFilters(filters);
+                onFilterChange={(table, filters) => {
+                    if (pageId) {
+                        setTableSettings(pageId, 'columnFilters', filters);
+                    }
+                }}
+                onColumnVisibilityChange={(table, columnVisibility) => {
+                    if (pageId) {
+                        setTableSettings(pageId, 'columnVisibility', columnVisibility);
+                    }
                 }}
                 registerRefresher={refresher => {
                     refreshRef.current = refresher;