WIP

app/composables/useDataTable.ts

@@ -1,4 +1,4 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
 import { useUrlState } from './useUrlState'
 import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'
 
@@ -22,6 +22,8 @@ export interface UseDataTableOptions {
   persistToUrl?: boolean
   /** Extra URL state params for page-specific filters */
   extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+  /** Column filter keys to persist in URL (prefixed with `f.` in query string) */
+  columnFilterKeys?: string[]
 }
 
 export interface UseDataTableReturn {
@@ -56,6 +58,7 @@ export function useDataTable(
     searchDebounceMs = 300,
     persistToUrl = true,
     extraParams = {},
+    columnFilterKeys = [],
   } = options
 
   let searchTerm: Ref<string>
@@ -64,6 +67,7 @@ export function useDataTable(
   let currentPage: Ref<number>
   let itemsPerPage: Ref<number>
   const filters: Record<string, Ref<string | number>> = {}
+  const columnFilterRefs: Record<string, Ref<string>> = {}
 
   if (persistToUrl) {
     const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
@@ -75,6 +79,10 @@ export function useDataTable(
       ...extraParams,
     }
 
+    for (const key of columnFilterKeys) {
+      paramDefs[`f.${key}`] = { default: '', debounce: 300 }
+    }
+
     const state = useUrlState(paramDefs, {
       onRestore: () => deps.fetchData(),
     })
@@ -88,6 +96,10 @@ export function useDataTable(
     for (const key of Object.keys(extraParams)) {
       filters[key] = (state as Record<string, Ref<string | number>>)[key]!
     }
+
+    for (const key of columnFilterKeys) {
+      columnFilterRefs[key] = (state as Record<string, Ref<string>>)[`f.${key}`]!
+    }
   }
   else {
     searchTerm = ref('')
@@ -137,8 +149,31 @@ export function useDataTable(
     deps.fetchData()
   }
 
-  // Column filters
-  const columnFilters = ref<DataTableColumnFilters>({})
+  // Column filters — seed from URL-persisted refs
+  const initialColumnFilters: DataTableColumnFilters = {}
+  for (const [key, r] of Object.entries(columnFilterRefs)) {
+    if (r.value) initialColumnFilters[key] = r.value
+  }
+  const columnFilters = ref<DataTableColumnFilters>(initialColumnFilters)
+
+  // Sync columnFilters → URL refs
+  if (persistToUrl && columnFilterKeys.length > 0) {
+    watch(columnFilters, (val) => {
+      for (const key of columnFilterKeys) {
+        columnFilterRefs[key]!.value = val[key] || ''
+      }
+    }, { deep: true })
+
+    // Sync URL refs → columnFilters (back/forward navigation)
+    for (const key of columnFilterKeys) {
+      watch(columnFilterRefs[key]!, (urlVal) => {
+        const current = columnFilters.value[key] || ''
+        if (current !== urlVal) {
+          columnFilters.value = { ...columnFilters.value, [key]: urlVal }
+        }
+      })
+    }
+  }
 
   const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
     columnFilters.value = newFilters