Skip to content
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

feat(angular-table): Support Tanstack v9 alpha and Angular 19, fix examples #5817

Merged

Conversation

riccardoperra
Copy link
Contributor

@riccardoperra riccardoperra commented Nov 24, 2024

I'm updating the Angular adapter and related examples to support the new helpers and _features property. It's mostly finished, but here's some points:

injectTable types

Due to the new TableOptions types, I've seen that there are some typescript issues while passing the _rowModels property, probably since we pass a function as an argument and _rowModels is using NoInfer :/

The error Screenshot 2024-11-24 alle 14 48 15
Screenshot 2024-11-24 alle 14 50 24

Overriding the properties in that way seems resolving the issue, but could there be some contraindications doing this? Would it make sense to have a less strict type?

export type AngularTableOptions<
  TFeatures extends TableFeatures,
  TData extends RowData,
> = Omit<TableOptions<TFeatures, TData>, '_rowModels'> & {
  _rowModels?: CreateRowModels_All<TFeatures, TData>
  // This type is not currently exported, but it should have the same issues
  // _rowModelsFns: RowModelFns<TFeatures, TData>
}

constructTableHelper/createTableHelper

Since we need to pass a function as an argument to the injectTable/createAngularTable fn, I think for Angular we should have our own implementation of the core "constructTableHelper" function.

In the future we might need to update this function to be invoked within the context of the angular app, for example if we need to create the helper as a constant and still allowing to inject data/options from a token or service.

I've then added a constructTableHelper.ts file the updated signature. This helper is used internally by createTableHelper, which is exported publicly.


Continue on #5816 for the new proxy implementation

@riccardoperra riccardoperra changed the base branch from main to alpha November 24, 2024 14:58
Copy link

nx-cloud bot commented Nov 24, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5125947. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


🟥 Failed Commands
nx affected --targets=test:format,test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build --parallel=3
✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

Copy link

pkg-pr-new bot commented Nov 24, 2024

Open in Stackblitz

More templates

@tanstack/angular-table

pnpm add https://pkg.pr.new/@tanstack/angular-table@5817

@tanstack/lit-table

pnpm add https://pkg.pr.new/@tanstack/lit-table@5817

@tanstack/qwik-table

pnpm add https://pkg.pr.new/@tanstack/qwik-table@5817

@tanstack/match-sorter-utils

pnpm add https://pkg.pr.new/@tanstack/match-sorter-utils@5817

@tanstack/react-table

pnpm add https://pkg.pr.new/@tanstack/react-table@5817

@tanstack/react-table-devtools

pnpm add https://pkg.pr.new/@tanstack/react-table-devtools@5817

@tanstack/solid-table

pnpm add https://pkg.pr.new/@tanstack/solid-table@5817

@tanstack/svelte-table

pnpm add https://pkg.pr.new/@tanstack/svelte-table@5817

@tanstack/table-core

pnpm add https://pkg.pr.new/@tanstack/table-core@5817

@tanstack/vue-table

pnpm add https://pkg.pr.new/@tanstack/vue-table@5817

commit: 5125947

@@ -39,10 +39,10 @@ import type { Column, Table } from '@tanstack/angular-table'
standalone: true,
imports: [CommonModule],
})
export class FilterComponent<T> implements OnInit {
export class FilterComponent<T extends RowData> implements OnInit {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be changing these generics to include TFeatures since it effects what APIs can be used in the logic of this component.

createColumnHelper,
features: tableHelperOptions._features,
options: _tableHelperOptions as any,
tableCreator: (tableOptions) =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is the only difference, we might explore just making some TS overloads and an option for how it needs to work for Angular in the table-core constructTableHelper function. Good to be here for now.

@KevinVandy KevinVandy marked this pull request as ready for review November 24, 2024 20:40
@KevinVandy KevinVandy merged commit 525fbcb into TanStack:alpha Nov 24, 2024
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants