chore: correct tfeatures usage in examples by KevinVandy · Pull Request #6304 · TanStack/table

KevinVandy · 2026-06-07T20:10:37Z

🎯 Changes

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm test:pr.

Summary by CodeRabbit

Refactor
- Enhanced TypeScript type safety across examples and core library by replacing generic types with concrete feature configurations.
- Improved code organization by extracting reusable feature configurations in several examples.
- Updated filter and sort function signatures for better type accuracy and consistency.

coderabbitai · 2026-06-07T20:10:50Z

📝 Walkthrough

Walkthrough

The PR systematically refactors TanStack Table's filter typing contracts and public APIs across table-core and forty example applications. Filter function registries transition from row-data-generic (TData) to RowData-based signatures, table feature configurations are exported for reuse, and component inputs are retyped from broad any to concrete typeof features generics for stronger compile-time safety.

Changes

Core and Example Typing Alignment

Layer / File(s)	Summary
Table-core filter contract updates `packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts`, `columnFilteringFeature.utils.ts`, `createFilteredRowModel.ts`, `packages/table-core/src/features/global-filtering/globalFilteringFeature.utils.ts`	`RowModelFns_ColumnFiltering.filterFns` stores functions typed against `RowData` instead of `TData`. Core filter resolution and dispatch functions are updated with intermediate `filterFn` variables and explicit type casts to preserve return type contracts.
Angular feature exports and component input typing `examples/angular/column-pinning-sticky/src/app/app.ts`, `examples/angular/filters-fuzzy/src/app/app.ts`, `examples/angular/kitchen-sink/src/app/app.ts`, `examples/angular/row-selection-signal/src/app/`, `examples/angular/row-selection/src/app/`, `examples/angular/sub-components/src/app/`	`features` constants are exported from component modules. Filter/column/row/table input types change from `Column<any, T>` / `Table<any, T>` / `Row<any, T>` to `Column<typeof features, T>` / `Table<typeof features, T>` / `Row<typeof features, T>`. Fuzzy filter augmentations transition from `Person`-specific to `RowData`-generic types.
Lit composable table features and typed signatures `examples/lit/composable-tables/src/components/cell-components.ts`, `header-components.ts`, `examples/lit/composable-tables/src/hooks/table.ts`, `examples/lit/filters-fuzzy/src/main.ts`, `examples/lit/kitchen-sink/src/main.ts`, `examples/lit/sorting/src/main.ts`	`features` constant is extracted from inline initialization into a named export. Cell and header component functions retarget parameter types from `Cell<any, any, T>` / `Header<any, any, any>` to `Cell<typeof features, RowData, T>` / `Header<typeof features, RowData, unknown>`. Fuzzy and sort function signatures tighten from `SortFn<any, any>` to `SortFn<typeof features, Person>`.
React kitchen-sink filter and feature refactoring `examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts`, `src/main.tsx`, `examples/react/kitchen-sink-mantine/src/lib/data-table.ts`, `src/main.tsx`, `examples/react/kitchen-sink-material-ui/src/lib/data-table.ts`, `src/main.tsx`, `examples/react/kitchen-sink-react-aria/src/lib/data-table.ts`, `src/main.tsx`, `examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts`, `src/main.tsx`, `examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts`, `src/main.tsx`	Across all six kitchen-sink variants, `fuzzyFilter` and enhanced filter helpers (`filterFn_enhancedEquals`, `filterFn_enhancedGreaterThan`, etc.) are converted from generic `FilterFn<any, any>` or `FilterFn<TFeatures, TData>` implementations to concrete `FilterFn<typeof features, RowData>` constants. `dynamicFilterFn` is narrowed similarly. Module augmentations for `FilterFns.fuzzy` are updated to match. `features` constants are exported from main modules.
Cross-framework fuzzy/sort type tightening `examples/preact/filters-fuzzy/src/main.tsx`, `examples/preact/kitchen-sink/src/main.tsx`, `examples/preact/sorting/src/main.tsx`, `examples/react/filters-fuzzy/src/main.tsx`, `examples/react/kitchen-sink/src/main.tsx`, `examples/react/sorting/src/main.tsx`, `examples/react/virtualized-columns/src/main.tsx`, `examples/react/with-tanstack-router/src/utils/userColumns.tsx`, `examples/solid/filters-fuzzy/src/App.tsx`, `examples/solid/kitchen-sink/src/App.tsx`, `examples/solid/with-tanstack-router/src/utils/userColumns.tsx`, `examples/vue/kitchen-sink/src/App.vue`, `examples/vanilla/sorting/src/main.ts`	Fuzzy filter module augmentations transition from `Person`-specific to `RowData` generics. Sort function types tighten from `SortFn<any, any>` to `SortFn<typeof features, Person>`. Column helper and column definition types narrow from `createColumnHelper<any, T>()` / `ColumnDef<any, T>` to `createColumnHelper<typeof features, T>()` / `ColumnDef<typeof features, T>`.
Svelte feature module extraction and prop typing `examples/svelte/filtering/src/App.svelte`, `ColumnFilter.svelte`, `features.ts`, `examples/svelte/filters-faceted/src/App.svelte`, `ColumnFilter.svelte`, `features.ts`, `examples/svelte/filters-fuzzy/src/App.svelte`, `features.ts`, `main.ts`, `examples/svelte/kitchen-sink/src/App.svelte`, `table-augmentations.ts`	Feature configurations are moved from inline `tableFeatures(...)` calls in app components into dedicated `features.ts` modules. Components import and use the exported `features` constant. Module augmentations and fuzzy filter types transition from `Person` to `RowData`. Component `$props()` destructuring narrows `column` and `table` types from `any` to `typeof features`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

schiller-manuel

Poem

🐰 Whisker-twitching at precision's gleam,
Filter types align like a fuzzy dream,
Features exported, generics now tight,
RowData speaks where any lost sight!
From core to examples, the pattern flows true—
Type safety hops through and through! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 27.27% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'chore: correct tfeatures usage in examples' accurately describes the main changes: improving TypeScript typing for generic table features (TFeatures) across multiple example files and core packages.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch update-tfeatures

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-06-07T20:10:59Z

View your CI Pipeline Execution ↗ for commit ea8fa7a

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:sherif,t...`	✅ Succeeded	2m 24s	View ↗
`nx run-many --targets=build --exclude=examples/**`	✅ Succeeded	23s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

☁️ Nx Cloud last updated this comment at 2026-06-07 20:15:42 UTC

pkg-pr-new · 2026-06-07T20:14:50Z

More templates

@tanstack/angular-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table@6304

@tanstack/angular-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table-devtools@6304

@tanstack/lit-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/lit-table@6304

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/TanStack/table/@tanstack/match-sorter-utils@6304

@tanstack/preact-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table@6304

@tanstack/preact-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table-devtools@6304

@tanstack/react-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table@6304

@tanstack/react-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table-devtools@6304

@tanstack/solid-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table@6304

@tanstack/solid-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table-devtools@6304

@tanstack/svelte-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/svelte-table@6304

@tanstack/table-core

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-core@6304

@tanstack/table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-devtools@6304

@tanstack/vue-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table@6304

@tanstack/vue-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table-devtools@6304

commit: c11e635

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/table-core/src/features/column-filtering/columnFilteringFeature.utils.ts (1)

62-68: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Array auto-filter detection is shadowed by the object branch.

At Line 62, arrays are matched as objects first, so Line 66 (arrIncludes) is never reached. Array-valued columns will incorrectly use equals instead of arrIncludes.

Suggested fix

-  if (value !== null && typeof value === 'object') {
-    return filterFns?.equals
-  }
-
   if (Array.isArray(value)) {
     return filterFns?.arrIncludes
   }
+
+  if (value !== null && typeof value === 'object') {
+    return filterFns?.equals
+  }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/table-core/src/features/column-filtering/columnFilteringFeature.utils.ts`
around lines 62 - 68, The object branch (if (value !== null && typeof value ===
'object')) currently catches arrays before the Array.isArray check, causing
arrays to use filterFns?.equals instead of filterFns?.arrIncludes; fix by
checking Array.isArray(value) first (or refine the object condition to exclude
arrays) so that Array.isArray(value) returns filterFns?.arrIncludes and
non-array objects return filterFns?.equals; update the logic around the branches
that return filterFns?.equals and filterFns?.arrIncludes accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In
`@packages/table-core/src/features/column-filtering/columnFilteringFeature.utils.ts`:
- Around line 62-68: The object branch (if (value !== null && typeof value ===
'object')) currently catches arrays before the Array.isArray check, causing
arrays to use filterFns?.equals instead of filterFns?.arrIncludes; fix by
checking Array.isArray(value) first (or refine the object condition to exclude
arrays) so that Array.isArray(value) returns filterFns?.arrIncludes and
non-array objects return filterFns?.equals; update the logic around the branches
that return filterFns?.equals and filterFns?.arrIncludes accordingly.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: eda689d1-abd9-43ef-bd59-43a6ed718ca3

📥 Commits

Reviewing files that changed from the base of the PR and between 0de0bed and c11e635.

📒 Files selected for processing (56)

examples/angular/column-pinning-sticky/src/app/app.ts
examples/angular/filters-fuzzy/src/app/app.ts
examples/angular/kitchen-sink/src/app/app.ts
examples/angular/row-selection-signal/src/app/app.component.ts
examples/angular/row-selection-signal/src/app/filter.ts
examples/angular/row-selection-signal/src/app/selection-column.component.ts
examples/angular/row-selection/src/app/table-filter/table-filter.ts
examples/angular/row-selection/src/app/table.ts
examples/angular/sub-components/src/app/app.ts
examples/angular/sub-components/src/app/sub-component/sub-component.ts
examples/lit/composable-tables/src/components/cell-components.ts
examples/lit/composable-tables/src/components/header-components.ts
examples/lit/composable-tables/src/hooks/table.ts
examples/lit/filters-fuzzy/src/main.ts
examples/lit/kitchen-sink/src/main.ts
examples/lit/sorting/src/main.ts
examples/preact/filters-fuzzy/src/main.tsx
examples/preact/kitchen-sink/src/main.tsx
examples/preact/sorting/src/main.tsx
examples/react/filters-fuzzy/src/main.tsx
examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts
examples/react/kitchen-sink-hero-ui/src/main.tsx
examples/react/kitchen-sink-mantine/src/lib/data-table.ts
examples/react/kitchen-sink-mantine/src/main.tsx
examples/react/kitchen-sink-material-ui/src/lib/data-table.ts
examples/react/kitchen-sink-material-ui/src/main.tsx
examples/react/kitchen-sink-react-aria/src/lib/data-table.ts
examples/react/kitchen-sink-react-aria/src/main.tsx
examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts
examples/react/kitchen-sink-shadcn-base/src/main.tsx
examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts
examples/react/kitchen-sink-shadcn-radix/src/main.tsx
examples/react/kitchen-sink/src/main.tsx
examples/react/sorting/src/main.tsx
examples/react/virtualized-columns/src/main.tsx
examples/react/with-tanstack-router/src/utils/userColumns.tsx
examples/solid/filters-fuzzy/src/App.tsx
examples/solid/kitchen-sink/src/App.tsx
examples/solid/with-tanstack-router/src/utils/userColumns.tsx
examples/svelte/filtering/src/App.svelte
examples/svelte/filtering/src/ColumnFilter.svelte
examples/svelte/filtering/src/features.ts
examples/svelte/filters-faceted/src/App.svelte
examples/svelte/filters-faceted/src/ColumnFilter.svelte
examples/svelte/filters-faceted/src/features.ts
examples/svelte/filters-fuzzy/src/App.svelte
examples/svelte/filters-fuzzy/src/features.ts
examples/svelte/filters-fuzzy/src/main.ts
examples/svelte/kitchen-sink/src/App.svelte
examples/svelte/kitchen-sink/src/table-augmentations.ts
examples/vanilla/sorting/src/main.ts
examples/vue/kitchen-sink/src/App.vue
packages/table-core/src/features/column-filtering/columnFilteringFeature.types.ts
packages/table-core/src/features/column-filtering/columnFilteringFeature.utils.ts
packages/table-core/src/features/column-filtering/createFilteredRowModel.ts
packages/table-core/src/features/global-filtering/globalFilteringFeature.utils.ts

chore: correct tfeatures usage in examples

ea8fa7a

ci: apply automated fixes

c11e635

coderabbitai Bot reviewed Jun 7, 2026

View reviewed changes

KevinVandy merged commit e42da9e into beta Jun 7, 2026
8 checks passed

KevinVandy deleted the update-tfeatures branch June 7, 2026 20:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: correct tfeatures usage in examples#6304

chore: correct tfeatures usage in examples#6304
KevinVandy merged 2 commits into
betafrom
update-tfeatures

KevinVandy commented Jun 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 7, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Jun 7, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 7, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

KevinVandy commented Jun 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Jun 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jun 7, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

KevinVandy commented Jun 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 7, 2026 •

edited

Loading

nx-cloud Bot commented Jun 7, 2026 •

edited

Loading