feat(angular-table): adds Angular adapter for tanstack/table (#5326) #5432

KevinVandy · 2024-03-25T04:16:47Z

Angular adapter for tanstack table initial
build with: ng packagr
Add angular examples basic grouping
Add angular examples basic grouping
Update angular examples basic grouping
Add angular example selection
regen lock file
package upgrades, angular table docs
prettier
move around some deps
removed unused dependency from angular package
fix deps

* Angular adapter for tanstack table initial * build with: ng packagr * Add angular examples basic grouping * Add angular examples basic grouping * Update angular examples basic grouping * Add angular example selection * regen lock file * package upgrades, angular table docs * prettier * move around some deps * removed unused dependency from angular package * fix deps --------- Co-authored-by: Kevin Van Cott <[email protected]>

nx-cloud · 2024-03-25T04:17:08Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 529bc29. 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

✅ Successfully ran 1 target

nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,build --parallel=3

Sent with 💌 from NxCloud.

KevinVandy · 2024-03-25T17:40:01Z

@imaksp @danielglejzner @crutchcorn @jrgokavalsa @Lord-AY @JeanMeche @tonivj5 Work continues on this branch for the TanStack Angular Table adapter. Anyone can make a PR to this branch instead of just code reviewing the original PR.

Things that need to be done:

Convert the angular adapter to go all in on Angular 17 signals. After discussion with @crutchcorn, we've decided that we should only support modern angular going forward, in order to simplify support, and provide the best performance for complicated data-grid features. The min supported version will probably be v17.3 for TypeScript purposes.
Rewrite the examples. The current examples in this PR seem bloated. Let's get the dependencies and configs to the bare minimum, and maybe consider using Vite like all the other examples (though this doesn't matter that much). Also, encourage the use of signals for state.
Write the Table State (Angular) docs with accurate information and syntax.
Get the dependencies, devDependencies, and peerDependencies in check for the adapter and the examples.
Bonus: Create sorting, filtering, and pagination examples since those are somewhat essential for those seeing TanStack Table for the first time.

After these 4-5 things are accomplished, we'll feel good about shipping this. I would appreciate help with these tasks, as Angular is the framework I am least familiar with.

riccardoperra · 2024-03-25T21:57:43Z

Hi, I'm currently working on a design system that will use angular w/ tanstack table. These days I already had to work on my own on an adapter that use signals, I'm following you to understand if I can directly integrate the official one, or keep ours anyway.

I still have some doubts about my current implementation, I tried these approaches:

return a table signal that updates on every option/state change (wrapped with lazy-signal-initializer in order to support required input signals)

const table = createAngularTable(() => ({
   ...
});
// re-run automatically on every change 
table().options.state
table().getHeaderGroups()
table().getRowModel() 
...

an approach like @tanstack/angular-query (signal-proxy.ts), where I return a proxified table object, which wraps in a computed:
- every plain property (like options, rowCount, etc...)
- every function that starts with get (like getState(), getPageCount() etc...)
- the computed will trigger on every state/option change

const table = createAngularTable(() => ({
   ...
});
table.options().state // `options` transformed from plain property to computed
table.getHeaderGroups() // This is a computed
table.getRowModel() // This is a computed
table.set... // Still same property
...

One problematic thing I'm trying to solve is supporting onPush change detection everywhere, so with the first approach I think it should be ok, but only if you don't memorize the signal or if you create a new reference of the object. The second one, however, could be riskier as I'm not sure that all the properties must be transformed into computed in the same way, or there is a risk that the table will not update correctly due to extra memoization.

This is what I'm using at the moment, hope it can help and if you can give me some advice 😄

export function createAngularTable<TData extends RowData>(
  options: () => TableOptions<TData>,
) {
  const injector = inject(Injector);
  // Supports required signal input (https://angular.io/errors/NG0950)
  return lazySignalInitializer(() => {
    return runInInjectionContext(injector, () => {
      const resolvedOptionsSignal = computed<TableOptionsResolved<TData>>(
        () => {
          return {
            state: {},
            onStateChange: () => {},
            renderFallbackValue: null,
            ...options(),
          };
        },
      );

      const table = createTable(resolvedOptionsSignal());
      const tableSignal = signal(table);
      const state = signal(table.initialState);

      function updateOptions() {
        const tableState = state();
        const resolvedOptions = resolvedOptionsSignal();
        table.setOptions(prev => ({
          ...prev,
          ...resolvedOptions,
          state: {...tableState, ...resolvedOptions.state},
          onStateChange: updater => {
            if (updater instanceof Function) {
              state.update(updater);
            } else {
              state.set(updater);
            }
          },
        }));

        // Spreading this otherwise signal with default `equals` will not trigger on state change
        // Another solution could be using `equal: () => false` on `lazySignalInitializer` and `tableSignal`
        untracked(() => tableSignal.set({...table}));
      }

      updateOptions();

      // Currently I'm using this to avoid updating options twice the first time.
      let skipUpdate = true;
      effect(() => {
        void [state(), resolvedOptionsSignal()];
        if (skipUpdate) {
          skipUpdate = false;
          return;
        }
        untracked(() => updateOptions());
      });

      return table;
    });
  });
}

One another important thing about flexRender

is it correct that with the current implementation once rendered, the component will not be updated anymore?

table/packages/angular-table/src/index.ts

Lines 40 to 48 in 54034ef

 ) {} 

 ngOnInit(): void { 

 // This ensures that if the 'flexRender' input is set before the directive initializes, 

 // the component will be rendered when ngOnInit is called. 

 if (this._flexRender) { 

 this.renderComponent() 

 } 

 }

Everything is placed inside the onInit, so if the "context" changes, the component would no longer be updated

KevinVandy · 2024-03-25T22:20:45Z

@riccardoperra, your described situation makes you sound like a god-send. lol

I'm not against totally re-implementing the adapter part of this PR if needed. Not that the original PR was bad, but signals are just going to be much better if we're requiring Angular 17+ anyway. I'd love @crutchcorn to review your adapter code, because my angular knowledge is limited. The initial state stuff looks good though.

You can make a PR to the branch that this PR is made from. If the adapter is changed, get at least 1 example using state (row selection) updated too if you could. We don't need 100% comprehensive PRs yet.

crutchcorn · 2024-03-26T00:23:48Z

I'll willingly admit that I haven't spent as much time in Angular signal land as you have @riccardoperra but your code LGTM I'd merge it (assuming tests passed)

Let's start a PR to keep track of your changes and we can do more minutia code review and testing.

And, of course, thank you so much for your help!!

JeanMeche · 2024-03-26T04:05:24Z

packages/angular-table/src/index.ts

+ }
+ }
+
+ renderComponent() {


is this method supposed to be public ?

JeanMeche · 2024-03-26T04:06:59Z

packages/angular-table/src/index.ts

+
+ renderComponent() {
+ this.vcr.clear()
+ if (!this._flexRender) {


This early return seem redundant with the following conditions

* update demo

riccardoperra · 2024-03-26T22:07:30Z

Hi, I've added something here 😄 #5442

riccardoperra · 2024-04-10T19:02:17Z

Hi @KevinVandy, I'm answering you for this, sorry for the late reply.

Unfortunately I had to pause the work on our table in our design system due to some priority needs. I accidentally pushed a few things that broke the pr examples and the build, which I can fix soon. Anyway, The current integration here is the latest one we have in our ds which seems working fine.

I would like to get some feedbacks from someone who works with angular to understand if what I did with the proxy approach is ok. Regardless, the returned object is a signal so it should work fine. We personally had to memorize some functions to optimize performance with this approach, but I think it's "normal"

KevinVandy · 2024-04-18T02:28:36Z

Thinking of closing this PR if we cannot make more progress on it. We need someone who is knowledgeable in Angular to not just advise, but actually make the adapter and examples.

merto20 · 2024-05-10T02:25:48Z

@merto20 No need to ask for permission to make improvements. Just make the PR

@riccardoperra I rewrote the adapter and table state docs for angular based off your examples. Only thing I left a TODO in was for how to create fully controlled state. Guessing it would require computed just like the adapter does it.

@KevinVandy will do.

fully controlled state should also work using input, signal, and model or any signal based types.

KevinVandy · 2024-05-10T18:53:18Z

As far as I'm concerned, there are just 2 more things to take care of this weekend before shipping.

I'm having @arnoud-dv advise on some build config stuff, and he also offered to review the PR more
Document Angular Signals and Table State a bit more in the table-state docs.

arnoud-dv · 2024-05-12T10:29:40Z

Rewrite the examples. The current examples in this PR seem bloated. Let's get the dependencies and configs to the bare minimum, and maybe consider using Vite like all the other examples (though this doesn't matter that much). Also, encourage the use of signals for state.

The examples for Query were in Vite before but I converted them to Angular CLI for two reasons:

Vast majority of Angular devs will use the CLI so examples are more representative
Not all Angular functionality was working correctly such as input signals

I would recommend staying on CLI, also the Angular CLI uses Vite internally

riccardoperra · 2024-05-12T11:16:32Z

I've added some pr for documentation here:

We may have to discuss about this case before releasing the library

docs(angular-table) Angular table state docs #5545 (comment)

arnoud-dv · 2024-05-12T11:40:14Z

@riccardoperra are the examples working correctly while developing the adapter? We've had trouble in Query before as there were two package.json files, one in the src directory and one in the build directory. It resulted in somewhat random errors where you'd had to run pnpm i and pnpm build until it got in some working (but still unreliable) state. Also when publishing the Angular query package for the first time we got an error. We fixed that in this commit: TanStack/query@4e8a6c5

riccardoperra · 2024-05-12T11:48:33Z

@arnoud-dv yes, in my environment examples seems working fine while developing, but i always call the build command manually after I made a change. If using watch, we should have thedeleteDestPath set to false (already updated). I remember about the error you mentioned but I didn't had to do in this repo 🤔 Could be something related to the nx cache

Also when publishing the Angular query package for the first time we got an error. We fixed that in this commit:

I forgot about the replicated package.json. Currently I think it will be broken, we have to fix it.

In my company we always published via changesets the /dist folder (through a configuration in the package.json) but we have to remove through script the .npmignore generated file and sync the package.json version. We had a lot of sub-entry so doing it manually in the root package.json was a waste of time.

Looking at the commit, you simply add the exports manually and publish the "root" folder, right? Are you also publishing the source code?

arnoud-dv · 2024-05-12T12:04:28Z

Looking at the commit, you simply add the exports manually and publish the "root" folder, right? Are you also publishing the source code?

Yes, but I did recently remove the source code from the published package. The published files are determined using files in package.json.

"files": [
  "build",
  "!**/*.d.ts",
  "!**/*.d.ts.map",
  "build/rollup.d.ts"
],

Note I also now exclude all type declarations except a rolled up one generated by Microsoft API extractor. Flattening type declarations using API extractor is recommend by the Angular package format for good reasons IMO but I see few Angular packages actually do this. If you want I could add a PR next week to do that for Table too? Could be done after a first package publish too. Also I like the API report API extractor generates, it allows to keep oversight of the public API easily.

arnoud-dv · 2024-05-12T12:14:34Z

I remember about the error you mentioned but I didn't had to do in this repo 🤔 Could be something related to the nx cache

Might have been an issue in the pnpm version used back then, pnpm got confused and would also change the package location in lockfile between the two package.json locations constantly.

arnoud-dv · 2024-05-12T12:46:01Z

Looks good to me, will there be a beta period after publishing where breaking changes could be made if necessary?

Very cool to have TanStack Table on Angular too ❤️

KevinVandy · 2024-05-12T13:02:19Z

Looks good to me, will there be a beta period after publishing where breaking changes could be made if necessary?

Very cool to have TanStack Table on Angular too ❤️

If breaking changes are needed to fix something in the first few weeks before a ton of people are using this, that's fine. Though we probably won't be giving the packages beta versions, unless we figure out configuration for that.

* tslib should be a dependency, see: https://angular.io/guide/angular-package-format#tslib * ensure angular examples are run as web container on code sandbox * update lock file --------- Co-authored-by: Kevin Vandy <[email protected]>

* add flexRender documentation * fix docs * fix rendering component section heading

KevinVandy · 2024-05-12T14:56:51Z

@arnoud-dv

Also when publishing the Angular query package for the first time we got an error. We fixed that in this commit: TanStack/query@4e8a6c5

Looks like we actually still have some inconsistencies in our package package.json, especially with "files". Thanks for linking that query PR.

Edit: maybe our implementation is ok. We might not find out until shipping...

We're also esm only right now. Wonder if this needs more consideration.

arnoud-dv · 2024-05-12T15:13:38Z

Looks like we actually still have some inconsistencies in our package package.json, especially with "files". Thanks for linking that query PR.

It's not the same as Query but it's correct I'd say. If we want to implement type declaration rollup using API extractor we could change it but it's optional.

Edit: there is the potential issue with the duplicate package.json but it seems to work fine so far in Table. If not, the same fix could be applied as in Query.

We're also esm only right now. Wonder if this needs more consideration.

That's correct, Angular packages are ESM-only.

KevinVandy · 2024-05-12T16:35:36Z

I don't think there is much more to review until we try shipping it, so will try to do that shortly. Thanks for all the help so far @arnoud-dv @riccardoperra @merto20 @jrgokavalsa
Chances are that there are still some issues that will need to be ironed out, so any help that you are able to give this week will be very appreciated.

packages/angular-table/src/flex-render.ts

JeanMeche · 2024-05-12T16:58:51Z

packages/angular-table/src/flex-render.ts

+ return this.renderComponent(content)
+ }
+
+ private renderStringContent() {


It would probably be great to explicit the return types.

KevinVandy · 2024-05-12T22:39:20Z

@merto20 Rendering is acting weird in the grouping example. That's the one you were testing your stuff with, right? fyi @riccardoperra

https://tanstack.com/table/latest/docs/framework/angular/examples/grouping

merto20 · 2024-05-18T03:43:41Z

@KevinVandy just got back after my vacation. This was fixed by @riccardoperra already. I will check what I can do on the 'flexRenderer'.

KevinVandy requested review from lachlancollins and crutchcorn March 25, 2024 04:16

docs config cleanup

54034ef

KevinVandy mentioned this pull request Mar 25, 2024

feat(angular-table): adds Angular adapter for tanstack/table #5326

Merged

KevinVandy added 2 commits March 25, 2024 22:43

Merge branch 'main' into feat-angular-table

a36a507

Merge branch 'main' into feat-angular-table

f118589

JeanMeche reviewed Mar 26, 2024

View reviewed changes

packages/angular-table/src/index.ts Outdated

}

}

renderComponent() {

Copy link

JeanMeche Mar 26, 2024

Choose a reason for hiding this comment

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

is this method supposed to be public ?

JeanMeche reviewed Mar 26, 2024

View reviewed changes

riccardoperra added 3 commits March 26, 2024 21:39

feat: signal angular table adapter implementation

361577e

* update demo

feat: table proxy detect memoized fns

8516ea7

fix proxy property returning value

9b195b3

feat: improve naming

bf32e66

riccardoperra mentioned this pull request Mar 26, 2024

feat(angular-table): angular adapter implementation with signals #5442

Merged

riccardoperra and others added 4 commits March 27, 2024 20:59

save new reference of table signal on every update

129f921

computed trap proxy for fns with 1 argument

3aab637

Merge branch 'main' into feat-angular-table

d0bd1dc

Merge branch 'main' into feat-angular-table

6b5d921

riccardoperra added 4 commits April 29, 2024 20:33

Merge remote-tracking branch 'origin/main' into feat-angular-table

5817368

update pnpm-lock.yaml

1aa5353

refactor proxy implementation

c5b1e71

fix dependencies

6df7cf6

Merge branch 'main' into feat-angular-table

1518ea8

garrettld mentioned this pull request May 10, 2024

feat(angular-virtual): add Angular adapter TanStack/virtual#726

Open

6 tasks

update docs config with angular examples

8493be0

riccardoperra and others added 3 commits May 12, 2024 09:40

update angular table state docs (#5545)

412c76c

docs(angular-table): Add documentation for FlexRenderDirective (#5543)

059c018

* add flexRender documentation * fix docs * fix rendering component section heading

KevinVandy added 3 commits May 12, 2024 10:53

remove double build package.json from angular build

abf605c

update link name

9984118

docs pass

ea7da50

update esm exports in package.json

4dc3d72

JeanMeche reviewed May 12, 2024

View reviewed changes

packages/angular-table/src/flex-render.ts Outdated Show resolved Hide resolved

JeanMeche reviewed May 12, 2024

View reviewed changes

update flexrender types

529bc29

KevinVandy merged commit 91f4360 into main May 12, 2024
2 checks passed

KevinVandy deleted the feat-angular-table branch May 12, 2024 19:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(angular-table): adds Angular adapter for tanstack/table (#5326) #5432

feat(angular-table): adds Angular adapter for tanstack/table (#5326) #5432

KevinVandy commented Mar 25, 2024

nx-cloud bot commented Mar 25, 2024 •

edited

KevinVandy commented Mar 25, 2024

riccardoperra commented Mar 25, 2024 •

edited

KevinVandy commented Mar 25, 2024

crutchcorn commented Mar 26, 2024

JeanMeche Mar 26, 2024

JeanMeche Mar 26, 2024

riccardoperra commented Mar 26, 2024

riccardoperra commented Apr 10, 2024

KevinVandy commented Apr 18, 2024

merto20 commented May 10, 2024

KevinVandy commented May 10, 2024

arnoud-dv commented May 12, 2024 •

edited

riccardoperra commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

riccardoperra commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024

arnoud-dv commented May 12, 2024

KevinVandy commented May 12, 2024

KevinVandy commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

KevinVandy commented May 12, 2024 •

edited

JeanMeche May 12, 2024

KevinVandy commented May 12, 2024

merto20 commented May 18, 2024

feat(angular-table): adds Angular adapter for tanstack/table (#5326) #5432

feat(angular-table): adds Angular adapter for tanstack/table (#5326) #5432

Conversation

KevinVandy commented Mar 25, 2024

nx-cloud bot commented Mar 25, 2024 • edited

☁️ Nx Cloud Report

KevinVandy commented Mar 25, 2024

riccardoperra commented Mar 25, 2024 • edited

KevinVandy commented Mar 25, 2024

crutchcorn commented Mar 26, 2024

JeanMeche Mar 26, 2024

Choose a reason for hiding this comment

JeanMeche Mar 26, 2024

Choose a reason for hiding this comment

riccardoperra commented Mar 26, 2024

riccardoperra commented Apr 10, 2024

KevinVandy commented Apr 18, 2024

merto20 commented May 10, 2024

KevinVandy commented May 10, 2024

arnoud-dv commented May 12, 2024 • edited

riccardoperra commented May 12, 2024 • edited

arnoud-dv commented May 12, 2024 • edited

riccardoperra commented May 12, 2024 • edited

arnoud-dv commented May 12, 2024 • edited

arnoud-dv commented May 12, 2024

arnoud-dv commented May 12, 2024

KevinVandy commented May 12, 2024

KevinVandy commented May 12, 2024 • edited

arnoud-dv commented May 12, 2024 • edited

KevinVandy commented May 12, 2024 • edited

JeanMeche May 12, 2024

Choose a reason for hiding this comment

KevinVandy commented May 12, 2024

merto20 commented May 18, 2024

nx-cloud bot commented Mar 25, 2024 •

edited

riccardoperra commented Mar 25, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

riccardoperra commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

riccardoperra commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

KevinVandy commented May 12, 2024 •

edited

arnoud-dv commented May 12, 2024 •

edited

KevinVandy commented May 12, 2024 •

edited