feat(web): implement progressive data table with robust pagination and filters#33
Merged
Conversation
…d version - DataTableFacetedFilter now pure UI component: accepts selectedValues Set<string>, onSelect, and onclear callbacks — no SvelteKit coupling - tickets-table.svelte wires URL search params as source of truth via (Set) + toggleFilter/clearFilter/resetFilters handlers - report.service.ts: inArray() for multi-value comma-separated filters (status, priority, categoryId) - parseTicketFilters validates multi-value params, strips invalid values - TicketFacetedFilter removed (merged into shared component)
- search + filters now wrap to next line when badges overflow - search input has shrink-0 to prevent shrinking - export row separated into its own row below filters
Add a comprehensive, reusable table system with URL-synced filters, search, export, and column visibility. The new system uses a configuration-driven approach that makes it easy to create complex tables across the application. Key features: - Configuration-driven table setup with type-safe filter definitions - Automatic URL synchronization for filters, search, and pagination - Modular toolbar components (SearchBar, FilterBar, ExportButton, ColumnToggle) - Support for single-select and multi-select filters with proper UI indicators - Generic TableBuilder component for reusable table implementations - FilterManager for parsing and validating filter state - State management abstraction with URL sync capabilities Changes: - Add table types, filter config system, and state management - Create ProgressiveTable and TableBuilder components - Add modular toolbar components (SearchBar, FilterBar, etc.) - Refactor tickets table to use new system (229 → 54 lines) - Update data-table index exports for backward compatibility The system supports progressive enhancement from simple tables to full-featured data tables with all advanced features.
Add ticket list filter behavior and data-table toolbar enhancements, including search, filter bar, column toggle, and table configuration updates for the tickets view. Co-Authored-By: Oz <oz-agent@warp.dev>
…5 bindable loop issue
|
🎉 This PR is included in version 1.1.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new, more flexible and type-safe filtering and table management system for data tables, while maintaining backward compatibility with legacy components. The main focus is on improving filter configuration, state management, and UI extensibility for data tables. Key changes include the addition of a
FilterManagerutility, a newProgressiveTableSvelte component, and several improvements to the faceted filter UI.New Filtering and Table System
FilterManagerclass infilter-config.tsfor type-safe filter definitions, parsing, validation, and state management, along with helper functions for creating different filter types.index.tsfor the progressive table system (ProgressiveTable,TableBuilder), toolbar components, types, and filter utilities, while retaining legacy exports for backward compatibility.progressive-table.sveltecomponent that supports advanced features like pagination, sorting, row selection, column visibility, and a customizable toolbar, using the new table and filter infrastructure.Faceted Filter UI Improvements
data-table-faceted-filter.svelteto decouple filter state from the table column, making it controlled viaselectedValuesand callback props (onSelect,onclear), and updated the UI to use checkboxes for filter selection. [1] [2]These changes lay the groundwork for a more robust, maintainable, and extensible data table and filtering system in the application.