-
-
Notifications
You must be signed in to change notification settings - Fork 158
FE: UX: Column Filtering Support for Kafka connects table #1154
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
frontend/src/components/common/NewTable/FIlter/lib/persisters/types.ts
Outdated
Show resolved
Hide resolved
both fields now seem to have "protected" widths based on the maximum length of their content, but the result looks a bit odd - also not the good solution maybe it's worth considering setting a maximum length for each field, along with line wrapping, for example. |
We try to discuss it with design, there are no solution fow overflow for topic tags yet |
Thanks for the new feature. Note that I filled an issue about this via #1177 |
What changes did you make? (Give an overview)
Resolves #244
What’s Added
Extended column meta definition for TanStack Table with a new property:
meta.filterVariant?: 'multi-select'
Added support for column-level filtering based on filter variant.
How to Enable Filtering for a Column
A column that supports filtering must define:
accessorKey
meta.filterVariant
e.g. 'multi-select'filterFn
(e.g. 'arrIncludesSome')Example
URL Filter Persistence
Introduced
queryPersister
to sync filters with the URL.This avoids polluting the main Table component with filter state management logic.
Columns filtering Persistence logic is extracted into
Filter/lib/persister
module.All persisters implement the following interface:
The approach is scalable — new filter variants or persisters (e.g., localStorage, session, or in-memory) can be added with minimal changes.
Pagination can optionally be reset on filter change via the resetPagination argument.
Is there anything you'd like reviewers to focus on?
How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)
Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)
Check out Contributing and Code of Conduct
A picture of a cute animal (not mandatory but encouraged)