From 8e5aba669e5af82bfa4026f9b3df774869ef79ac Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 25 Aug 2025 11:49:20 +0300
Subject: [PATCH] feat: url query filters for tables and grids (events, fields,
 tags)

---
 .../events/components/EventsDataTable.vue     |  18 +-
 .../src/modules/events/pages/EventsPage.vue   |   4 +
 .../fields/components/FieldsDataTable.vue     |  18 +-
 .../src/modules/fields/pages/FieldsPage.vue   |  10 +-
 .../modules/tags/components/TagsDataGrid.vue  |  73 ++++++
 frontend/src/modules/tags/pages/TagsPage.vue  |  98 ++------
 .../shared/composables/useDataTableSync.ts    | 186 +++++++++++++++
 .../composables/useDataTableWithUrlQuery.ts   |  41 ++++
 .../src/shared/composables/useUrlFilters.ts   | 225 ++++++++++++++++++
 frontend/src/shared/types/urlFilters.ts       |  47 ++++
 frontend/src/shared/utils/tableFilters.ts     |   2 +-
 11 files changed, 635 insertions(+), 87 deletions(-)
 create mode 100644 frontend/src/modules/tags/components/TagsDataGrid.vue
 create mode 100644 frontend/src/shared/composables/useDataTableSync.ts
 create mode 100644 frontend/src/shared/composables/useDataTableWithUrlQuery.ts
 create mode 100644 frontend/src/shared/composables/useUrlFilters.ts
 create mode 100644 frontend/src/shared/types/urlFilters.ts

diff --git a/frontend/src/modules/events/components/EventsDataTable.vue b/frontend/src/modules/events/components/EventsDataTable.vue
index d02f1d4..60df1f7 100644
--- a/frontend/src/modules/events/components/EventsDataTable.vue
+++ b/frontend/src/modules/events/components/EventsDataTable.vue
@@ -5,11 +5,12 @@ import { Icon } from '@iconify/vue'
 import { Button } from '@/shared/ui/button'
 import DataTablePagination from '@/shared/components/data/DataTablePagination.vue'
 import DataTable from '@/shared/components/data/DataTable.vue'
-import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
+import { useDataTableWithUrlQuery } from '@/shared/composables/useDataTableWithUrlQuery'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
 import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
 import type { Tag } from '@/modules/tags/types'
+import type { UrlFiltersReturn, EventsUrlFilters } from '@/shared/types/urlFilters'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
@@ -17,13 +18,18 @@ const props = defineProps<{
   tags: Tag[]
   isLoading: boolean
   isLoadingTags: boolean
+  urlFilters: UrlFiltersReturn<EventsUrlFilters>
 }>()
 
-const { table } = useDataTable({
-  data: () => props.data,
-  columns: () => props.columns,
-  defaultSorting: [{ id: 'id', desc: true }],
-})
+const { table } = useDataTableWithUrlQuery(
+  {
+    data: () => props.data,
+    columns: () => props.columns,
+    defaultSorting: [{ id: 'id', desc: true }],
+  },
+  props.urlFilters,
+  'events'
+)
 </script>
 
 <template>
diff --git a/frontend/src/modules/events/pages/EventsPage.vue b/frontend/src/modules/events/pages/EventsPage.vue
index 165ba77..ac1a688 100644
--- a/frontend/src/modules/events/pages/EventsPage.vue
+++ b/frontend/src/modules/events/pages/EventsPage.vue
@@ -10,6 +10,7 @@ import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { getEventColumns } from '@/modules/events/components/eventColumns'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import type { EventFormValues } from '@/modules/events/validation/eventSchema'
+import { useUrlFilters, eventsFiltersConfig } from '@/shared/composables/useUrlFilters'
 
 const DeleteModal = defineAsyncComponent(() => import('@/shared/components/modals/DeleteModal.vue'))
 const EventEditModal = defineAsyncComponent(
@@ -28,6 +29,8 @@ const tags = ref<Tag[]>([])
 const selectedEventId = ref<number | null>(null)
 const editedEvent = ref<Event | null>(null)
 
+const urlFilters = useUrlFilters(eventsFiltersConfig)
+
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
@@ -99,6 +102,7 @@ onMounted(() => {
         :tags="tags"
         :isLoading="isLoading"
         :isLoadingTags="isLoadingTags"
+        :url-filters="urlFilters"
       />
     </div>
 
diff --git a/frontend/src/modules/fields/components/FieldsDataTable.vue b/frontend/src/modules/fields/components/FieldsDataTable.vue
index c42ab61..c21ac93 100644
--- a/frontend/src/modules/fields/components/FieldsDataTable.vue
+++ b/frontend/src/modules/fields/components/FieldsDataTable.vue
@@ -6,22 +6,28 @@ import { Button } from '@/shared/ui/button'
 import DataTablePagination from '@/shared/components/data/DataTablePagination.vue'
 import { FieldType } from '@/modules/fields/types'
 import DataTable from '@/shared/components/data/DataTable.vue'
-import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
 import DataTableMultiSelectFilter from '@/shared/components/data/DataTableMultiSelectFilter.vue'
+import type { UrlFiltersReturn, FieldsUrlFilters } from '@/shared/types/urlFilters'
+import { useDataTableWithUrlQuery } from '@/shared/composables/useDataTableWithUrlQuery'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   isLoading: boolean
+  urlFilters: UrlFiltersReturn<FieldsUrlFilters>
 }>()
 
-const { table } = useDataTable({
-  data: () => props.data,
-  columns: () => props.columns,
-  defaultSorting: [{ id: 'id', desc: true }],
-})
+const { table } = useDataTableWithUrlQuery(
+  {
+    data: () => props.data,
+    columns: () => props.columns,
+    defaultSorting: [{ id: 'id', desc: true }],
+  },
+  props.urlFilters,
+  'fields'
+)
 
 const fieldTypes = Object.values(FieldType)
 </script>
diff --git a/frontend/src/modules/fields/pages/FieldsPage.vue b/frontend/src/modules/fields/pages/FieldsPage.vue
index d8033e5..02fe339 100644
--- a/frontend/src/modules/fields/pages/FieldsPage.vue
+++ b/frontend/src/modules/fields/pages/FieldsPage.vue
@@ -8,6 +8,7 @@ import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { getFieldColumns } from '@/modules/fields/components/fieldColumns'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import type { FieldFormValues } from '@/modules/fields/validation/fieldSchema'
+import { useUrlFilters, fieldsFiltersConfig } from '@/shared/composables/useUrlFilters'
 
 const DeleteModal = defineAsyncComponent(() => import('@/shared/components/modals/DeleteModal.vue'))
 const FieldEditModal = defineAsyncComponent(
@@ -24,6 +25,8 @@ const fields = ref<Field[]>([])
 const selectedFieldId = ref<number | null>(null)
 const editedField = ref<Field | null>(null)
 
+const urlFilters = useUrlFilters(fieldsFiltersConfig)
+
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
@@ -87,7 +90,12 @@ onMounted(() => {
   <div>
     <Header title="Fields" />
     <div class="container mx-auto">
-      <FieldsDataTable :columns="columns" :data="fields" :isLoading="isLoading" />
+      <FieldsDataTable
+        :columns="columns"
+        :data="fields"
+        :isLoading="isLoading"
+        :url-filters="urlFilters"
+      />
     </div>
 
     <!-- Modals -->
diff --git a/frontend/src/modules/tags/components/TagsDataGrid.vue b/frontend/src/modules/tags/components/TagsDataGrid.vue
new file mode 100644
index 0000000..0324cb7
--- /dev/null
+++ b/frontend/src/modules/tags/components/TagsDataGrid.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import TagItem from './TagItem.vue'
+import type { Tag } from '@/modules/tags/types'
+import type { UrlFiltersReturn, TagsUrlFilters } from '@/shared/types/urlFilters'
+import { Input } from '@/shared/ui/input'
+import { Button } from '@/shared/ui/button'
+import { Icon } from '@iconify/vue'
+import ItemSkeleton from '@/shared/components/skeletons/ItemSkeleton.vue'
+import { RouterLink } from 'vue-router'
+interface TagsDataGridProps {
+  filteredData: Tag[]
+  isLoading: boolean
+  urlFilters: UrlFiltersReturn<TagsUrlFilters>
+  onEdit: (tag: Tag) => void
+  onDelete: (tag: Tag) => void
+}
+
+const props = defineProps<TagsDataGridProps>()
+
+const handleSearchKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    props.urlFilters.clearFilters()
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- Toolbar -->
+    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
+      <div class="flex-1">
+        <Input
+          :model-value="urlFilters.filters.search"
+          @update:model-value="(value: string | number) => urlFilters.updateSearch?.(String(value))"
+          placeholder="Search tags..."
+          class="max-w-xs"
+          @keydown="handleSearchKeydown"
+        />
+      </div>
+      <Button as-child>
+        <RouterLink to="/tags/new">
+          <Icon icon="radix-icons:plus" class="mr-2 h-4 w-4" />
+          Add Tag
+        </RouterLink>
+      </Button>
+    </div>
+
+    <!-- Tags Grid -->
+    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
+      <template v-if="isLoading">
+        <ItemSkeleton v-for="n in 4" :key="n" />
+      </template>
+
+      <template v-else-if="filteredData.length > 0">
+        <TagItem
+          v-for="tag in filteredData"
+          :key="tag.id"
+          :tag="tag"
+          @updateMe="() => onEdit(tag)"
+          @deleteMe="() => onDelete(tag)"
+        />
+      </template>
+
+      <template v-else>
+        <div class="col-span-full flex items-center justify-center py-6">
+          <div class="text-center">
+            <div class="text-sm">No results.</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/modules/tags/pages/TagsPage.vue b/frontend/src/modules/tags/pages/TagsPage.vue
index 18d267e..a3bafc8 100644
--- a/frontend/src/modules/tags/pages/TagsPage.vue
+++ b/frontend/src/modules/tags/pages/TagsPage.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import TagItem from '../components/TagItem.vue'
+import TagsDataGrid from '../components/TagsDataGrid.vue'
 import { tagApi } from '@/modules/tags/api'
 import type { Tag } from '@/modules/tags/types'
-import { ref, onMounted, computed, defineAsyncComponent, watch } from 'vue'
+import { ref, onMounted, defineAsyncComponent, computed } from 'vue'
 import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import type { TagFormValues } from '@/modules/tags/validation/tagSchema'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { Input } from '@/shared/ui/input'
-import { Button } from '@/shared/ui/button'
-import { Icon } from '@iconify/vue'
-import ItemSkeleton from '@/shared/components/skeletons/ItemSkeleton.vue'
-import { useDebounceFn } from '@vueuse/core'
+import { useUrlFilters, tagsFiltersConfig } from '@/shared/composables/useUrlFilters'
 import { filterTags } from '@/shared/utils/tableFilters'
 
 const DeleteModal = defineAsyncComponent(() => import('@/shared/components/modals/DeleteModal.vue'))
@@ -22,8 +18,6 @@ const TagEditModal = defineAsyncComponent(
 const { showUpdated, showDeleted } = useEnhancedToast()
 
 const tags = ref<Tag[]>([])
-const searchQuery = ref('')
-const debouncedSearchQuery = ref('')
 const { run, isLoading } = useAsyncTask()
 const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
 const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
@@ -34,26 +28,12 @@ const showDeleteModal = ref(false)
 const selectedTagId = ref<string | null>(null)
 const editedTag = ref<Tag | null>(null)
 
-// Debounced update of search query
-const debouncedUpdateSearch = useDebounceFn((query: string) => {
-  debouncedSearchQuery.value = query
-}, 300)
-
-// Watch for search query changes and apply debounce
-watch(searchQuery, newQuery => {
-  debouncedUpdateSearch(newQuery)
-})
-
-// Handle escape key to clear search
-const handleSearchKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
-    searchQuery.value = ''
-    debouncedSearchQuery.value = ''
-  }
-}
+// URL filters with search synchronization
+const urlFilters = useUrlFilters(tagsFiltersConfig)
 
+// Filter tags based on URL search
 const filteredTags = computed(() => {
-  return filterTags(tags.value, debouncedSearchQuery.value)
+  return filterTags(tags.value, urlFilters.filters.search)
 })
 
 const handleDelete = () => {
@@ -79,6 +59,17 @@ const handleUpdate = (values: TagFormValues) => {
   )
 }
 
+// Handlers for TagsDataGrid
+const selectEditTag = (tag: Tag) => {
+  editedTag.value = tag
+  showEditModal.value = true
+}
+
+const selectDeleteTag = (tag: Tag) => {
+  selectedTagId.value = tag.id
+  showDeleteModal.value = true
+}
+
 onMounted(() => {
   run(
     () => tagApi.getAll(),
@@ -93,52 +84,13 @@ onMounted(() => {
   <div class="container mx-auto">
     <Header title="Tags" />
 
-    <!-- Toolbar -->
-    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
-      <div class="flex-1">
-        <Input
-          v-model="searchQuery"
-          placeholder="Search tags..."
-          class="max-w-xs"
-          :disabled="tags.length === 0"
-          @keydown="handleSearchKeydown"
-        >
-        </Input>
-      </div>
-      <Button as-child>
-        <RouterLink to="/tags/new">
-          <Icon icon="radix-icons:plus" class="mr-2 h-4 w-4" />
-          Add Tag
-        </RouterLink>
-      </Button>
-    </div>
-
-    <!-- Tags Grid -->
-    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
-      <template v-if="isLoading">
-        <ItemSkeleton v-for="n in 4" :key="n" />
-      </template>
-
-      <template v-else>
-        <TagItem
-          v-for="tag in filteredTags"
-          :key="tag.id"
-          :tag="tag"
-          @updateMe="
-            () => {
-              showEditModal = true
-              editedTag = tag
-            }
-          "
-          @deleteMe="
-            id => {
-              showDeleteModal = true
-              selectedTagId = id
-            }
-          "
-        />
-      </template>
-    </div>
+    <TagsDataGrid
+      :filtered-data="filteredTags"
+      :isLoading="isLoading"
+      :url-filters="urlFilters"
+      :onEdit="selectEditTag"
+      :onDelete="selectDeleteTag"
+    />
 
     <!-- Modals -->
     <TagEditModal
diff --git a/frontend/src/shared/composables/useDataTableSync.ts b/frontend/src/shared/composables/useDataTableSync.ts
new file mode 100644
index 0000000..64b954c
--- /dev/null
+++ b/frontend/src/shared/composables/useDataTableSync.ts
@@ -0,0 +1,186 @@
+import { watch } from 'vue'
+import type { Table } from '@tanstack/vue-table'
+import type { UrlFiltersReturn } from '@/shared/types/urlFilters'
+
+// Configuration for field synchronization
+export interface FieldSyncConfig {
+  columnId: string
+  transform?: {
+    urlToTable?: (value: unknown) => unknown
+    tableToUrl?: (value: unknown) => unknown
+  }
+}
+
+// Configuration for sort synchronization
+export interface SortSyncConfig<T> {
+  sortField: keyof T
+  orderField: keyof T
+  defaultSort?: { column: string; order: 'asc' | 'desc' }
+}
+
+// Complete sync configuration
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export interface DataTableSyncConfig<T extends Record<string, any>> {
+  mapping: Record<keyof T, FieldSyncConfig>
+  sortConfig?: SortSyncConfig<T>
+}
+
+// Utility function to capitalize first letter
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+// Setup synchronization for a single field
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function setupFieldSync<T extends Record<string, any>>(
+  urlField: keyof T,
+  fieldConfig: FieldSyncConfig,
+  table: Table<any>,
+  urlFilters: UrlFiltersReturn<T>
+) {
+  const { columnId, transform } = fieldConfig
+
+  // URL → Table synchronization
+  watch(
+    () => urlFilters.filters[urlField],
+    newValue => {
+      const transformedValue = transform?.urlToTable?.(newValue) ?? newValue
+      table.getColumn(columnId)?.setFilterValue(transformedValue || undefined)
+    },
+    { immediate: true }
+  )
+
+  // Table → URL synchronization
+  watch(
+    () => table.getColumn(columnId)?.getFilterValue(),
+    newValue => {
+      const transformedValue = transform?.tableToUrl?.(newValue) ?? newValue
+      const updateMethodName = `update${capitalize(String(urlField))}` as keyof UrlFiltersReturn<T>
+
+      if (typeof urlFilters[updateMethodName] === 'function') {
+        const currentValue = urlFilters.filters[urlField]
+        if (transformedValue !== currentValue) {
+          /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
+          ;(urlFilters[updateMethodName] as Function)(transformedValue || '')
+        }
+      }
+    }
+  )
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+// Setup sort synchronization
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function setupSortSync<T extends Record<string, any>>(
+  sortConfig: SortSyncConfig<T>,
+  table: Table<any>,
+  urlFilters: UrlFiltersReturn<T>
+) {
+  const { sortField, orderField, defaultSort } = sortConfig
+
+  // URL → Table sort synchronization
+  watch(
+    [() => urlFilters.filters[sortField], () => urlFilters.filters[orderField]],
+    ([newSort, newOrder]) => {
+      if (newSort && newOrder) {
+        const currentSorting = table.getState().sorting
+        const targetSorting = [{ id: String(newSort), desc: newOrder === 'desc' }]
+
+        if (JSON.stringify(currentSorting) !== JSON.stringify(targetSorting)) {
+          table.setSorting(targetSorting)
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  // Table → URL sort synchronization
+  watch(
+    () => table.getState().sorting,
+    newSorting => {
+      if (newSorting.length > 0) {
+        const sort = newSorting[0]
+        const newSortColumn = sort.id
+        const newSortOrder = sort.desc ? 'desc' : 'asc'
+
+        const isDefaultSort =
+          defaultSort && newSortColumn === defaultSort.column && newSortOrder === defaultSort.order
+
+        if (!isDefaultSort) {
+          const currentSort = urlFilters.filters[sortField]
+          const currentOrder = urlFilters.filters[orderField]
+
+          if (newSortColumn !== currentSort || newSortOrder !== currentOrder) {
+            urlFilters.updateSort?.(newSortColumn, newSortOrder)
+          }
+        } else if (urlFilters.filters[sortField] || urlFilters.filters[orderField]) {
+          // Clear URL parameters when returning to default sort
+          urlFilters.updateSort?.('', 'asc')
+        }
+      }
+    },
+    { deep: true }
+  )
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+// Main function to setup table synchronization
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function useDataTableSync<T extends Record<string, any>>(
+  table: Table<any>,
+  urlFilters: UrlFiltersReturn<T>,
+  config: DataTableSyncConfig<T>
+) {
+  // Setup field synchronization
+  Object.entries(config.mapping).forEach(([urlField, fieldConfig]) => {
+    setupFieldSync(urlField as keyof T, fieldConfig as FieldSyncConfig, table, urlFilters)
+  })
+
+  // Setup sort synchronization if configured
+  if (config.sortConfig) {
+    setupSortSync(config.sortConfig, table, urlFilters)
+  }
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+// Predefined transformation functions for common use cases
+export const transforms = {
+  // For comma-separated strings to arrays
+  stringToArray: {
+    urlToTable: (value: string) => (value ? value.split(',').filter(Boolean) : undefined),
+    tableToUrl: (value: string[]) => (Array.isArray(value) ? value.join(',') : ''),
+  },
+
+  // For simple string filters
+  string: {
+    urlToTable: (value: string) => value || undefined,
+    tableToUrl: (value: string) => value || '',
+  },
+}
+
+// Preset configurations for common table types
+export const tableSyncPresets = {
+  events: {
+    mapping: {
+      search: { columnId: 'name', transform: transforms.string },
+      tag: { columnId: 'tags', transform: transforms.string },
+    },
+    sortConfig: {
+      sortField: 'sort' as const,
+      orderField: 'order' as const,
+      defaultSort: { column: 'id', order: 'desc' as const },
+    },
+  },
+
+  fields: {
+    mapping: {
+      search: { columnId: 'name', transform: transforms.string },
+      type: { columnId: 'field_type', transform: transforms.stringToArray },
+    },
+    sortConfig: {
+      sortField: 'sort' as const,
+      orderField: 'order' as const,
+      defaultSort: { column: 'id', order: 'desc' as const },
+    },
+  },
+}
diff --git a/frontend/src/shared/composables/useDataTableWithUrlQuery.ts b/frontend/src/shared/composables/useDataTableWithUrlQuery.ts
new file mode 100644
index 0000000..a59715b
--- /dev/null
+++ b/frontend/src/shared/composables/useDataTableWithUrlQuery.ts
@@ -0,0 +1,41 @@
+import type { ColumnDef } from '@tanstack/vue-table'
+import { useDataTable } from './useDataTable'
+import type { UrlFiltersReturn } from '@/shared/types/urlFilters'
+import { useDataTableSync, tableSyncPresets } from './useDataTableSync'
+
+type SortingOption = {
+  id: string
+  desc: boolean
+}
+
+type UseDataTableOptions<TData, TValue> = {
+  data: () => TData[]
+  columns: () => ColumnDef<TData, TValue>[]
+  defaultSorting?: SortingOption[]
+  defaultPageSize?: number
+}
+
+export type TableType = 'events' | 'fields'
+
+export function useDataTableWithUrlQuery<TData, TValue>(
+  tableOptions: UseDataTableOptions<TData, TValue>,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  urlFilters: UrlFiltersReturn<any>,
+  tableType: TableType
+) {
+  const { table, sorting, columnFilters, pagination } = useDataTable(tableOptions)
+
+  // Use predefined configuration for the table type
+  const syncConfig = tableSyncPresets[tableType]
+
+  // Setup synchronization using the preset configuration
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  useDataTableSync(table, urlFilters, syncConfig as any)
+
+  return {
+    table,
+    sorting,
+    columnFilters,
+    pagination,
+  }
+}
diff --git a/frontend/src/shared/composables/useUrlFilters.ts b/frontend/src/shared/composables/useUrlFilters.ts
new file mode 100644
index 0000000..3217676
--- /dev/null
+++ b/frontend/src/shared/composables/useUrlFilters.ts
@@ -0,0 +1,225 @@
+import { ref, watch, onMounted, reactive, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDebounceFn } from '@vueuse/core'
+import type {
+  UrlFiltersConfig,
+  UrlFiltersReturn,
+  EventsUrlFilters,
+  FieldsUrlFilters,
+  TagsUrlFilters,
+} from '@/shared/types/urlFilters'
+
+// Utility function to capitalize first letter
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+// Utility function to get default value
+function getDefaultValue(filterConfig: { defaultValue?: unknown; type?: string }): unknown {
+  if (filterConfig.defaultValue !== undefined) {
+    return filterConfig.defaultValue
+  }
+
+  // Default values based on type
+  if (filterConfig.type === 'array') return []
+  if (filterConfig.type === 'boolean') return false
+  return ''
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export function useUrlFilters<T extends Record<string, any>>(
+  config: UrlFiltersConfig<T>
+): UrlFiltersReturn<T> {
+  const route = useRoute()
+  const router = useRouter()
+
+  // Create reactive state for all filters using refs
+  const filtersRefs: Record<string, Ref<unknown>> = {}
+
+  // Initialize all filters with default values
+  Object.keys(config).forEach(key => {
+    const filterConfig = config[key as keyof T]
+    filtersRefs[key] = ref(getDefaultValue(filterConfig))
+  })
+
+  // Create debounced update functions for search fields
+  const debouncedUpdaters: Record<string, (value: unknown) => void> = {}
+  Object.entries(config).forEach(([key, filterConfig]) => {
+    if (filterConfig.debounce) {
+      debouncedUpdaters[key] = useDebounceFn((value: unknown) => {
+        updateUrl({ [filterConfig.param]: value } as Record<
+          string,
+          string | string[] | boolean | null
+        >)
+      }, filterConfig.debounce)
+    }
+  })
+
+  // Initialize filters from URL on mount
+  const initializeFromUrl = () => {
+    Object.entries(config).forEach(([key, filterConfig]) => {
+      const urlValue = route.query[filterConfig.param] as string
+      if (urlValue) {
+        if (filterConfig.type === 'array') {
+          filtersRefs[key].value = urlValue.split(',')
+        } else if (filterConfig.type === 'boolean') {
+          filtersRefs[key].value = urlValue === 'true'
+        } else {
+          filtersRefs[key].value = urlValue
+        }
+      }
+    })
+  }
+
+  // Update URL with new query parameters
+  const updateUrl = (newQuery: Record<string, string | string[] | boolean | null>) => {
+    const currentQuery = { ...route.query }
+
+    Object.entries(newQuery).forEach(([param, value]) => {
+      if (
+        value === null ||
+        value === '' ||
+        value === false ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        delete currentQuery[param]
+      } else if (Array.isArray(value)) {
+        currentQuery[param] = value.join(',')
+      } else {
+        currentQuery[param] = String(value)
+      }
+    })
+
+    const currentQueryStr = JSON.stringify(route.query)
+    const newQueryStr = JSON.stringify(currentQuery)
+
+    if (currentQueryStr !== newQueryStr) {
+      router.replace({
+        path: route.path,
+        query: currentQuery,
+      })
+    }
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
+  const updateMethods: Record<string, Function> = {}
+
+  Object.entries(config).forEach(([key, filterConfig]) => {
+    const methodName = `update${capitalize(key)}`
+
+    if (filterConfig.debounce) {
+      // For debounced fields (like search)
+      updateMethods[methodName] = (value: unknown) => {
+        filtersRefs[key].value = value
+        debouncedUpdaters[key](value)
+      }
+    } else {
+      // For immediate update fields
+      updateMethods[methodName] = (value: unknown) => {
+        filtersRefs[key].value = value
+        updateUrl({ [filterConfig.param]: value } as Record<
+          string,
+          string | string[] | boolean | null
+        >)
+      }
+    }
+  })
+
+  // Special method for sort that updates both sort and order
+  if ('sort' in config && 'order' in config) {
+    updateMethods.updateSort = (column: string, direction: 'asc' | 'desc') => {
+      filtersRefs.sort.value = column
+      filtersRefs.order.value = direction
+
+      const sortConfig = config.sort as { param: string }
+      const orderConfig = config.order as { param: string }
+
+      updateUrl({
+        [sortConfig.param]: column || null,
+        [orderConfig.param]: column ? direction : null,
+      })
+    }
+  }
+
+  // Clear all filters
+  const clearFilters = () => {
+    const clearQuery: Record<string, null> = {}
+
+    Object.entries(config).forEach(([key, filterConfig]) => {
+      filtersRefs[key].value = getDefaultValue(filterConfig)
+      clearQuery[filterConfig.param] = null
+    })
+
+    updateUrl(clearQuery)
+  }
+
+  // Update filters method for bulk updates
+  const updateFilters = (newFilters: Record<string, string | null>) => {
+    updateUrl(newFilters)
+  }
+
+  // Watch for route changes to update filters
+  watch(
+    () => route.query,
+    newQuery => {
+      Object.entries(config).forEach(([key, filterConfig]) => {
+        const urlValue = (newQuery[filterConfig.param] as string) || ''
+        let newValue: unknown
+
+        if (filterConfig.type === 'array') {
+          newValue = urlValue ? urlValue.split(',') : []
+        } else if (filterConfig.type === 'boolean') {
+          newValue = urlValue === 'true'
+        } else {
+          newValue = urlValue
+        }
+
+        if (JSON.stringify(filtersRefs[key].value) !== JSON.stringify(newValue)) {
+          filtersRefs[key].value = newValue
+        }
+      })
+    },
+    { deep: true }
+  )
+
+  onMounted(() => {
+    initializeFromUrl()
+  })
+
+  // Create filters object from refs for return
+  const filters = reactive({}) as T
+  Object.keys(config).forEach(key => {
+    Object.defineProperty(filters, key, {
+      get: () => filtersRefs[key].value,
+      set: value => {
+        filtersRefs[key].value = value
+      },
+    })
+  })
+
+  return {
+    filters,
+    ...updateMethods,
+    updateFilters,
+    clearFilters,
+  } as UrlFiltersReturn<T>
+}
+
+// Preset configurations for common use cases
+export const eventsFiltersConfig: UrlFiltersConfig<EventsUrlFilters> = {
+  search: { param: 'search', debounce: 300, defaultValue: '' },
+  tag: { param: 'tag', defaultValue: '' },
+  sort: { param: 'sort', defaultValue: '' },
+  order: { param: 'order', defaultValue: '' },
+}
+
+export const fieldsFiltersConfig: UrlFiltersConfig<FieldsUrlFilters> = {
+  search: { param: 'search', debounce: 300, defaultValue: '' },
+  type: { param: 'type', defaultValue: '' },
+  sort: { param: 'sort', defaultValue: '' },
+  order: { param: 'order', defaultValue: '' },
+}
+
+export const tagsFiltersConfig: UrlFiltersConfig<TagsUrlFilters> = {
+  search: { param: 'search', debounce: 300, defaultValue: '' },
+}
diff --git a/frontend/src/shared/types/urlFilters.ts b/frontend/src/shared/types/urlFilters.ts
new file mode 100644
index 0000000..fffbae6
--- /dev/null
+++ b/frontend/src/shared/types/urlFilters.ts
@@ -0,0 +1,47 @@
+// URL Filter type definitions for each page
+
+export interface EventsUrlFilters {
+  search: string
+  tag: string
+  sort: string
+  order: 'asc' | 'desc' | ''
+}
+
+export interface FieldsUrlFilters {
+  search: string
+  type: string
+  sort: string
+  order: 'asc' | 'desc' | ''
+}
+
+export interface TagsUrlFilters {
+  search: string
+}
+
+// Configuration for each filter
+export interface FilterConfig<T = string> {
+  param: string // URL parameter name
+  debounce?: number // debounce delay for search inputs
+  defaultValue?: T // default value
+  type?: 'string' | 'array' | 'boolean'
+}
+
+// Configuration object for URL filters
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export type UrlFiltersConfig<T extends Record<string, any>> = {
+  [K in keyof T]: FilterConfig<T[K]>
+}
+
+// Return type for useUrlFilters
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export interface UrlFiltersReturn<T extends Record<string, any>> {
+  // All filter values as reactive refs
+  filters: T
+  // Update methods for each filter
+  updateSearch?: (value: string) => void
+  updateTag?: (value: string) => void
+  updateType?: (value: string) => void
+  updateSort?: (column: string, direction: 'asc' | 'desc') => void
+  updateFilters?: (filters: Record<string, string | null>) => void
+  clearFilters: () => void
+}
diff --git a/frontend/src/shared/utils/tableFilters.ts b/frontend/src/shared/utils/tableFilters.ts
index eb28876..0c36cb3 100644
--- a/frontend/src/shared/utils/tableFilters.ts
+++ b/frontend/src/shared/utils/tableFilters.ts
@@ -46,7 +46,7 @@ export function filterMultiField<T>(data: T[], fields: string[], searchQuery: st
  * @returns TanStack Table filter function
  */
 export function createTableFilter<TData>(fields: string[]): FilterFn<TData> {
-  return (row, columnId, filterValue) => {
+  return (row, _columnId, filterValue) => {
     return searchMultiField(row.original, fields, filterValue as string)
   }
 }