diff --git a/web/default/src/features/channels/components/channels-table.tsx b/web/default/src/features/channels/components/channels-table.tsx index e599679e..81a59a33 100644 --- a/web/default/src/features/channels/components/channels-table.tsx +++ b/web/default/src/features/channels/components/channels-table.tsx @@ -18,7 +18,12 @@ For commercial licensing, please contact support@quantumnous.com */ import { useQuery } from '@tanstack/react-query' import { getRouteApi } from '@tanstack/react-router' -import type { OnChangeFn, SortingState, Row } from '@tanstack/react-table' +import type { + ColumnFiltersState, + OnChangeFn, + SortingState, + Row, +} from '@tanstack/react-table' import { Eye, EyeOff } from 'lucide-react' import { useState, useMemo, useEffect } from 'react' import { useTranslation } from 'react-i18next' @@ -63,6 +68,7 @@ import { DataTableBulkActions } from './data-table-bulk-actions' const route = getRouteApi('/_authenticated/channels/') const CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY = 'channels:column-visibility' const CHANNELS_VIEW_MODE_STORAGE_KEY = 'channels:view-mode' +const CHANNELS_STATUS_FILTER_STORAGE_KEY = 'channel-status-filter' const CHANNEL_SORTABLE_COLUMNS = new Set([ 'id', @@ -111,13 +117,40 @@ export function ChannelsTable() { }, globalFilter: { enabled: true, key: 'filter' }, columnFilters: [ - { columnId: 'status', searchKey: 'status', type: 'array' }, + { + columnId: 'status', + searchKey: 'status', + type: 'array', + deserialize: (value) => { + if (value !== undefined) return value + const stored = localStorage.getItem( + CHANNELS_STATUS_FILTER_STORAGE_KEY + ) + return stored === 'enabled' || stored === 'disabled' ? [stored] : [] + }, + }, { columnId: 'type', searchKey: 'type', type: 'array' }, { columnId: 'group', searchKey: 'group', type: 'array' }, { columnId: 'model', searchKey: 'model', type: 'string' }, ], }) + const handleColumnFiltersChange: OnChangeFn = ( + updater + ) => { + onColumnFiltersChange((previous) => { + const next = typeof updater === 'function' ? updater(previous) : updater + const status = next.find((f) => f.id === 'status')?.value as + | string[] + | undefined + localStorage.setItem( + CHANNELS_STATUS_FILTER_STORAGE_KEY, + status?.[0] ?? 'all' + ) + return next + }) + } + // Extract filters from column filters const statusFilter = (columnFilters.find((f) => f.id === 'status')?.value as string[]) || [] @@ -290,7 +323,7 @@ export function ChannelsTable() { ? (row: Row) => !isTagAggregateRow(row.original) : false, onSortingChange: handleSortingChange, - onColumnFiltersChange, + onColumnFiltersChange: handleColumnFiltersChange, onPaginationChange, onGlobalFilterChange, getSubRows: (row: Channel & { children?: Channel[] }) => row.children,