Skip to content

FE: 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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

Vixtir
Copy link
Contributor

@Vixtir Vixtir commented Jun 27, 2025

  • Breaking change? (if so, please describe the impact and migration path for existing application instances)

What changes did you make? (Give an overview)

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

const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
  {
    header: 'Connect',
    accessorKey: 'connect',
    cell: BreakableTextCell,
    meta: { filterVariant: 'multi-select' },
    filterFn: 'arrIncludesSome',
  }, ...
]

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 intoFilter/lib/persistermodule.

All persisters implement the following interface:

export interface Persister {
  getPrevState: () => ColumnFiltersState;
  update: (nextState: ColumnFiltersState, resetPagination?: boolean) => void;
}

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)

  • No need to
  • Manually (please, describe, if necessary)
  • Unit checks
  • Integration checks
  • Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
  • My changes generate no new warnings (e.g. Sonar is happy)
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

@Vixtir Vixtir requested a review from a team as a code owner June 27, 2025 13:09
@kapybro kapybro bot added status/triage Issues pending maintainers triage status/triage/manual Manual triage in progress status/triage/completed Automatic triage completed and removed status/triage Issues pending maintainers triage labels Jun 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status/triage/completed Automatic triage completed status/triage/manual Manual triage in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant