refactor(frontend): simplify tanstack table url synchronization

[ivanskv2000]

📌 refactor(frontend): simplify tanstack table url synchronization

✨ What’s Changed?

Refactored the URL synchronization logic for TanStack Tables across the frontend to use a cleaner, unidirectional data flow pattern.

• Simplified Architecture: Replaced the over-engineered useUrlFilters and useDataTableSync (which relied on "ping-pong" watchers) with a single useDataTableUrlSync composable.
• TanStack Native Integration: Leveraged TanStack Table's "Controlled State" features. The table's state is now derived directly from the URL, and updates are pushed to the URL via native onStateChange callbacks.
• Eliminated Infinite Loops: By removing bidirectional watchers and using the URL as the single source of truth, the risk of synchronization race conditions is eliminated.
• Improved Performance: Added local debouncing for search inputs in TagsDataGrid, EventsDataTable, and FieldsDataTable to ensure a responsive UI while minimizing URL update frequency.
• Type Safety: Removed brittle dynamic string manipulations (update${capitalize(key)}) in favor of explicit configuration objects and proper TypeScript types.
• Code Cleanup: Deleted legacy files: useUrlFilters.ts, useDataTableSync.ts, useDataTableWithUrlQuery.ts, and urlFilters.ts.

🧪 How to Test It

Manual Verification

1. Navigate to the Events, Fields, or Tags pages.
2. Apply filters (search, select tags, select field types).
3. Verify the URL updates correctly (including comma-separated values for multi-selects).
4. Refresh the page and verify the table state is correctly restored from the URL.
5. Use the browser's back/forward buttons and verify the table state stays in sync with the URL.
6. Verify sorting updates the URL and is preserved on reload.

Automated Tests

Ran unit tests for the core synchronization logic:

• useDataTableUrlSync.spec.ts: 7 tests passed.
  • ✅ URL-to-Table: Parses sorting and filters (including arrays) correctly.
  • ✅ Table-to-URL: Correctly maps state changes to router navigation.
  • ✅ Functional Updaters: Supports standard TanStack toggle patterns.
  • ✅ Empty States: Handles missing or cleared parameters gracefully.

📂 Scope

• frontend
• backend
• common/shared
• CI/config

📝 Notes (Optional)

This refactor significantly improves maintainability by consolidating synchronization logic and ensuring a clear, one-way data flow.

✅ Checklist

• PR title uses Conventional Commit format
• Code is clean and commented where needed
• I’ve manually tested relevant parts
• I’ve updated docs (if needed)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud