Add preact integration for tanstack-table#6173
Add preact integration for tanstack-table#6173JoviDeCroock wants to merge 1 commit intoTanStack:mainfrom
Conversation
|
📝 WalkthroughWalkthroughAdds a new Preact integration package to TanStack Table with complete setup including source code, build configuration, and tests. Updates documentation and configuration files to reference the new Preact adapter alongside existing frameworks. Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Preact Component
participant Hook as usePreactTable Hook
participant State as Internal State
participant TableCore as Table Core
participant Callback as User Callbacks
Component->>Hook: Call usePreactTable(options)
Hook->>State: Initialize/Update state
Hook->>TableCore: createTable<TData>(mergedOptions)
TableCore->>Hook: Return table instance
Hook->>Hook: Store table in ref
Note over Component,Hook: Component renders with table
Component->>Hook: User triggers state change (e.g., sort)
Hook->>State: Update internal state
Hook->>Callback: Call onStateChange if provided
Callback->>Hook: Return merged state
Hook->>TableCore: Update table options
Hook->>Component: Return updated table instance
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@docs/framework/preact/guide/table-state.md`:
- Around line 188-195: The example incorrectly types the state as
useState<SortingState[]> which produces a nested array; change the state to
useState<SortingState> so sorting is a single SortingState (alias for
ColumnSort[]). Update the variable declaration using SortingState (and keep
setSorting signature) in the example where usePreactTable and useState are used
so autocomplete and types work correctly for sorting.id and sorting.desc.
- Line 96: The sentence contains a stray trailing backtick after "state"; update
the prose so the mention of the column sizing state is correctly formatted
(e.g., `columnSizingInfo` state) by removing the extra backtick; this change
applies near the mention of the onStateChange table option and the symbol
columnSizingInfo in the documentation.
In `@packages/preact-table/tests/core/core.test.tsx`:
- Around line 89-99: The test "keeps a stable table instance across re-renders"
currently uses expect(prev).toStrictEqual(next) which checks structural equality
not referential identity; update the assertion using the tableRef variables to
expect(prev).toBe(next) so the test verifies the exact same object reference is
preserved across re-renders (keep the existing prev/next setup and act() block,
just replace the toStrictEqual assertion).
🧹 Nitpick comments (1)
packages/preact-table/tests/core/core.test.tsx (1)
38-42: Consider extracting a sharedafterEachcleanup instead of manual teardown in every test.Each test manually renders
nulland removes the container. A sharedafterEach(or a helper that returns a cleanup function) would reduce boilerplate and guard against forgotten teardown if more tests are added.
|
|
||
| #### Fully Controlled State | ||
|
|
||
| Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a preact tree, like `columnSizingInfo` state`, might cause bad performance issues. |
There was a problem hiding this comment.
Typo: stray backtick in prose.
There's a mismatched backtick: `columnSizingInfo` state` — the trailing backtick after "state" is erroneous.
Proposed fix
-A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+raising some frequently changing state values up a preact tree, like `columnSizingInfo` state, might cause bad performance issues.More precisely, on line 96 fix:
-like `columnSizingInfo` state`, might cause bad performance issues.
+like `columnSizingInfo` state, might cause bad performance issues.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a preact tree, like `columnSizingInfo` state`, might cause bad performance issues. | |
| Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a preact tree, like `columnSizingInfo` state, might cause bad performance issues. |
🧰 Tools
🪛 LanguageTool
[grammar] ~96-~96: Ensure spelling is correct
Context: ...e frequently changing state values up a preact tree, like columnSizingInfo state`, m...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
In `@docs/framework/preact/guide/table-state.md` at line 96, The sentence contains
a stray trailing backtick after "state"; update the prose so the mention of the
column sizing state is correctly formatted (e.g., `columnSizingInfo` state) by
removing the extra backtick; this change applies near the mention of the
onStateChange table option and the symbol columnSizingInfo in the documentation.
| import { usePreactTable, type SortingState } from '@tanstack/preact-table' | ||
| //... | ||
| const [sorting, setSorting] = useState<SortingState[]>([ | ||
| { | ||
| id: 'age', //you should get autocomplete for the `id` and `desc` properties | ||
| desc: true, | ||
| } | ||
| ]) |
There was a problem hiding this comment.
Incorrect type usage: SortingState[] should be SortingState.
SortingState is already defined as ColumnSort[] in table-core. Writing useState<SortingState[]> creates a ColumnSort[][] (array of arrays), which is wrong and will cause type errors.
Proposed fix
-const [sorting, setSorting] = useState<SortingState[]>([
+const [sorting, setSorting] = useState<SortingState>([📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { usePreactTable, type SortingState } from '@tanstack/preact-table' | |
| //... | |
| const [sorting, setSorting] = useState<SortingState[]>([ | |
| { | |
| id: 'age', //you should get autocomplete for the `id` and `desc` properties | |
| desc: true, | |
| } | |
| ]) | |
| import { usePreactTable, type SortingState } from '@tanstack/preact-table' | |
| //... | |
| const [sorting, setSorting] = useState<SortingState>([ | |
| { | |
| id: 'age', //you should get autocomplete for the `id` and `desc` properties | |
| desc: true, | |
| } | |
| ]) |
🤖 Prompt for AI Agents
In `@docs/framework/preact/guide/table-state.md` around lines 188 - 195, The
example incorrectly types the state as useState<SortingState[]> which produces a
nested array; change the state to useState<SortingState> so sorting is a single
SortingState (alias for ColumnSort[]). Update the variable declaration using
SortingState (and keep setSorting signature) in the example where usePreactTable
and useState are used so autocomplete and types work correctly for sorting.id
and sorting.desc.
| const prev = tableRef | ||
|
|
||
| act(() => { | ||
| triggerRerender?.() | ||
| }) | ||
|
|
||
| const next = tableRef | ||
|
|
||
| expect(prev).toBeDefined() | ||
| expect(next).toBeDefined() | ||
| expect(prev).toStrictEqual(next) |
There was a problem hiding this comment.
toStrictEqual does not verify referential identity — use toBe instead.
The test is named "keeps a stable table instance across re-renders", which implies the same object reference is returned. toStrictEqual only checks deep structural equality, so two different objects with the same shape would also pass. Use toBe for reference equality.
Proposed fix
- expect(prev).toStrictEqual(next)
+ expect(prev).toBe(next)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const prev = tableRef | |
| act(() => { | |
| triggerRerender?.() | |
| }) | |
| const next = tableRef | |
| expect(prev).toBeDefined() | |
| expect(next).toBeDefined() | |
| expect(prev).toStrictEqual(next) | |
| const prev = tableRef | |
| act(() => { | |
| triggerRerender?.() | |
| }) | |
| const next = tableRef | |
| expect(prev).toBeDefined() | |
| expect(next).toBeDefined() | |
| expect(prev).toBe(next) |
🤖 Prompt for AI Agents
In `@packages/preact-table/tests/core/core.test.tsx` around lines 89 - 99, The
test "keeps a stable table instance across re-renders" currently uses
expect(prev).toStrictEqual(next) which checks structural equality not
referential identity; update the assertion using the tableRef variables to
expect(prev).toBe(next) so the test verifies the exact same object reference is
preserved across re-renders (keep the existing prev/next setup and act() block,
just replace the toStrictEqual assertion).
|
@JoviDeCroock Thanks for working on this. We already have a preact adapter in the alpha v9 branch following better state patterns with TanStack Preact Store. Maybe we will still release this for backwards compat for v8 though. |
2 participants
🎯 Changes
@tanstack/preact-tableadapter package aligned with existing framework integrations.usePreactTableandflexRenderwith@tanstack/table-corere-exports.README, install docs, framework pages, and docs config).preactignore intest:sherifand updated lockfile.Summary by CodeRabbit
New Features
Documentation