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

jrgokavalsa · 2024-02-05T05:03:09Z

Adds angular adapter for tanstack/table

# Conflicts: # .gitignore # pnpm-lock.yaml

KevinVandy · 2024-02-14T02:19:30Z

so how does this adapter work? I just see config files. Could a basic example using the adapter be created in the examples dir?

jrgokavalsa · 2024-02-14T15:16:49Z

Sure, definately

KevinVandy · 2024-02-17T14:18:13Z

@crutchcorn , I'm not really well-versed in how the Angular ecosystem works. Would you be able to help with this? FYI @lachlancollins too

KevinVandy · 2024-02-17T18:43:46Z

Thanks for your work @jrgokavalsa . Going to bring in more help polishing this and getting more docs ready before we ship. Your continued involvement will still be appreciated.

Lord-AY · 2024-02-17T19:19:20Z

@jrgokavalsa, I noticed the lib directory that is being referenced in the public-api.ts file is not available in this PR, this is most likely due to lib being referenced in .gitignore

KevinVandy · 2024-02-17T19:38:56Z

Yeah, that's what I was confused about. It seems the actual adapter is not in this PR yet.

Lord-AY · 2024-02-17T19:43:29Z

Yeah he might have to change the folder name to something else

ducin · 2024-02-17T20:28:24Z

hi 👋 do I see correctly that the actual adapter (lib folder) is outside of that PR?

packages/angular-table/src/public-api.ts:

export * from '@tanstack/table-core'
export * from './lib/flexrender.directive'
export * from './lib/index'

JeanMeche · 2024-02-17T20:20:20Z

examples/angular/grouping/src/app/app.component.html

+          <tr>
+            @for (header of headerGroup.headers; track header.id) {
+              <th [attr.colSpan]="header.colSpan">
+                @if (!header.isPlaceholder) {


nit: Why not a single @if block ?

JeanMeche · 2024-02-17T20:21:44Z

examples/angular/grouping/src/app/app.component.html

+                  >
+                    {{ aggregatedCell }}
+                  </ng-container>
+                } @else if (cell.getIsPlaceholder()) {


Nit: Would be interesting to know why this is empty.

JeanMeche · 2024-02-17T20:27:30Z

packages/angular-table/src/public-api.ts

+export * from './lib/flexrender.directive'
+export * from './lib/index'


Where are those files ?

Actually got messed up by this commit : 91117bc

@KevinVandy @JeanMeche @Lord-AY
export * from './lib/flexrender.directive'
export * from './lib/index'
moved above files from lib folder to src folder, updated examples

JeanMeche · 2024-02-19T09:13:41Z

packages/angular-table/src/flexrender.directive.ts

+  standalone: true,
+})
+export class FlexRenderDirective implements OnInit {
+  // private vcr = inject(ViewContainerRef)


nit: remove the commented code.

JeanMeche · 2024-02-19T09:17:36Z

packages/angular-table/src/flexrender.directive.ts

+  // private vcr = inject(ViewContainerRef)
+  // private templateRef = inject(TemplateRef)
+
+  private _flexRender: any


We can probably do better than any

Suggested change

private _flexRender: any

private _flexRender: string|() => any|null

Maybe we could make the function a generic one, so that we can reuse the generic for flexRenderProps.

JeanMeche · 2024-02-19T09:19:12Z

packages/angular-table/src/flexrender.directive.ts

+  private _flexRenderProps: any
+
+  @Input({ required: true })
+  set flexRender(render: any) {


Same here, let add constraints on the input type.

is this looks good or any suggestions

type FlexRenderType = string | null | (() => any) | ((props: any) => any)

tried changing the type getting the following error
Type 'ColumnDefTemplate<HeaderContext<Person, unknown>> | undefined' is not assignable to type 'FlexRenderType'.

I moved back to any

# Conflicts: # package.json # pnpm-lock.yaml

jrgokavalsa · 2024-02-24T10:20:47Z

@JeanMeche Updated the library with selection example and moved flexrender.directive to index.ts file

nx-cloud · 2024-02-24T10:24:41Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3955792. 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:sherif,test:knip,test:lib,test:types,build --parallel=3`

Sent with 💌 from NxCloud.

KevinVandy · 2024-03-05T21:51:02Z

packages/angular-table/package.json

+    "build:types": "tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",


Why is tslib a package dependency? Maybe this should just be in the root package.json? Or a devDep here?

Yes we can move it root package.json

KevinVandy · 2024-03-05T21:56:02Z

examples/angular/basic/package.json

+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {


Maybe a dumb question, but would using Vite with Angular be better or worse for these examples?

I think we're wanting to consolidate on Vite as our build tooling for both examples and script packaging - might not be a bad idea to switch both over

crutchcorn · 2024-03-06T16:36:01Z

packages/angular-table/src/index.ts

+    // 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()


This code overall LGTM, but I thought ngOnInit doesn't have access to @Input props - how does this code ever run?

imaksp · 2024-03-08T06:10:01Z

packages/angular-table/src/index.ts

+  /** properties to render */
+  private _flexRenderProps: any
+
+  @Input({ required: true })


Hi, all input/output should now use signal based input/model/output.

Yeah, that was a question for me. If using Angular 17 as the minimum peerDep, should this use signals? Or should we support much lower versions of Angular?

I am assuming initial version will be experimental like Angular tanstack query so its safe to use latest angular as minimum version I think 17.3 (currently in rc) could be used as minimum if output api is needed, and later it can be changed to 18 too, if this adapter stays as experimental until May 24.

KevinVandy · 2024-03-20T18:37:35Z

@imaksp @crutchcorn @jrgokavalsa @Lord-AY @JeanMeche I think that today I will solve merge conflicts, and then merge this into a branch off of main. That way, anyone can work off of the work of the adapter and make a PR to get this over the finish line. I think there might be some work left to do before shipping this.

packages/angular-table/package.json

KevinVandy

Merging into the feat-angular-table branch where work will continue.

KevinVandy · 2024-03-25T17:27:13Z

#5432

* feat(angular-table): adds Angular adapter for tanstack/table (#5326) * 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 <kevinvandy656@gmail.com> * docs config cleanup * feat: signal angular table adapter implementation * update demo * feat: table proxy detect memoized fns * fix proxy property returning value * feat: improve naming * save new reference of table signal on every update * computed trap proxy for fns with 1 argument * update pnpm-lock.yaml * refactor proxy implementation * fix dependencies * cleanup imports * refactor basic example * fix build * run prettier * add grouping example, fix ci * add grouping example, fix ci * add row selection example * add column visibility example * update examples add signal input required example * improve angular table impl, fix flex-render change detection issues * fix build * feat(angular-table): improve adapter implementation (#5524) * feat(angular-table): support render dynamic components and templateRefs in table * update row selection example using dynamic rendered components * support change detection on push with flex render * add column ordering example * fix flexRender change detection issues * rename properties * fix prettier and adjust example budget options * update basic example * add again support for table signal * add column-pinning example * add column pinning example * add filters example * cleanup code * example cleanup * update lock file * feat(angular-table): added injector optional parameter for more flexibility (#5525) * feat(angular-table): improve adapter implementation (#5524) * Added optional injector for more flexibility * Replace runInInjectionContext with injector in effect * feat(angular-table): Added proxifyTable back * feat(angular-table): adding back notifier signal for table changed * feat(angular-table): Improve logic in setting table options *set table options inside computed before returning the table instance *remove redundant signals and effect *remove injector as it no longer required *update Grouping example to show how to pass signal when creating table * update angular adapter and state docs * prettier * update docs config with angular examples * update angular table state docs (#5545) * Angular examples and dependencies improvements (#5546) * 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 <kevinvandy656@gmail.com> * docs(angular-table): Add documentation for FlexRenderDirective (#5543) * add flexRender documentation * fix docs * fix rendering component section heading * remove double build package.json from angular build * update link name * docs pass * update esm exports in package.json * update flexrender types --------- Co-authored-by: jrgokavalsa <86955546+jrgokavalsa@users.noreply.github.com> Co-authored-by: riccardoperra <riccardo.perra@icloud.com> Co-authored-by: Riccardo Perra <perrariccardo0@gmail.com> Co-authored-by: mamerto-g <merto.20@gmail.com> Co-authored-by: Arnoud <6420061+arnoud-dv@users.noreply.github.com>

jrgokavalsa added 3 commits January 30, 2024 14:31

Angular adapter for tanstack table initial

72635a0

build with: ng packagr

91117bc

Merge branch 'main' into feat-angular-adapter

703203a

# Conflicts: # .gitignore # pnpm-lock.yaml

jrgokavalsa added 2 commits February 17, 2024 15:09

Add angular examples basic grouping

6af6725

Add angular examples basic grouping

8ff627c

KevinVandy requested a review from lachlancollins February 17, 2024 14:18

JeanMeche reviewed Feb 17, 2024

View reviewed changes

Update angular examples basic grouping

1fa2e47

JeanMeche reviewed Feb 19, 2024

View reviewed changes

jrgokavalsa added 2 commits February 24, 2024 14:44

Add angular example selection

51c11a6

Merge branch 'main' into feat-angular-adapter

73d90a3

# Conflicts: # package.json # pnpm-lock.yaml

KevinVandy added 2 commits March 5, 2024 15:47

Merge branch 'main' into feat-angular-adapter and regen lock file

426e8ff

regen lock file

6f915e0

KevinVandy reviewed Mar 5, 2024

View reviewed changes

KevinVandy added 2 commits March 5, 2024 16:15

package upgrades, angular table docs

dea82b1

prettier

3d865e6

crutchcorn reviewed Mar 6, 2024

View reviewed changes

move around some deps

8bf304f

imaksp reviewed Mar 8, 2024

View reviewed changes

Merge branch 'main' into feat-angular-adapter and regen lock file

2b81bed

crutchcorn reviewed Mar 23, 2024

View reviewed changes

packages/angular-table/package.json Outdated Show resolved Hide resolved

jrgokavalsa and others added 3 commits March 23, 2024 12:17

removed unused dependency from angular package

8de932d

Merge branch 'main' into feat-angular-adapter

81702ec

fix deps

3955792

KevinVandy changed the base branch from main to feat-angular-table March 25, 2024 04:14

KevinVandy approved these changes Mar 25, 2024

View reviewed changes

KevinVandy merged commit afa27ad into TanStack:feat-angular-table Mar 25, 2024
1 of 2 checks passed

This was referenced Jun 4, 2024

[Snyk] Upgrade @tanstack/react-table from 8.16.0 to 8.17.0 MTthoas/Dex#119

Open

[Snyk] Upgrade @tanstack/react-table from 8.16.0 to 8.17.3 MTthoas/Dex#122

Open

CalPinSW mentioned this pull request Jun 5, 2024

[Snyk] Upgrade @tanstack/react-table from 8.16.0 to 8.17.3 CalPinSW/playlist-manager#24

Open

dbcrypton mentioned this pull request Jun 5, 2024

[Snyk] Upgrade @tanstack/react-table from 8.16.0 to 8.17.3 CRYPTON-AU/rental_fleet#9

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jrgokavalsa commented Feb 5, 2024

KevinVandy commented Feb 14, 2024

jrgokavalsa commented Feb 14, 2024

KevinVandy commented Feb 17, 2024

KevinVandy commented Feb 17, 2024

Lord-AY commented Feb 17, 2024 •

edited

KevinVandy commented Feb 17, 2024

Lord-AY commented Feb 17, 2024

ducin commented Feb 17, 2024

JeanMeche Feb 17, 2024

JeanMeche Feb 17, 2024

JeanMeche Feb 17, 2024

JeanMeche Feb 17, 2024

jrgokavalsa Feb 19, 2024

JeanMeche Feb 19, 2024

JeanMeche Feb 19, 2024 •

edited

JeanMeche Feb 19, 2024

jrgokavalsa Feb 19, 2024

jrgokavalsa Feb 19, 2024 •

edited

jrgokavalsa commented Feb 24, 2024

nx-cloud bot commented Feb 24, 2024 •

edited

KevinVandy Mar 5, 2024

jrgokavalsa Mar 6, 2024

KevinVandy Mar 5, 2024 •

edited

crutchcorn Mar 6, 2024

crutchcorn Mar 6, 2024

imaksp Mar 8, 2024

KevinVandy Mar 8, 2024

imaksp Mar 9, 2024

KevinVandy commented Mar 20, 2024

KevinVandy left a comment

KevinVandy commented Mar 25, 2024

		export * from './lib/flexrender.directive'
		export * from './lib/index'

	private _flexRender: any
	private _flexRender: string\|() => any\|null

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

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

Conversation

jrgokavalsa commented Feb 5, 2024

KevinVandy commented Feb 14, 2024

jrgokavalsa commented Feb 14, 2024

KevinVandy commented Feb 17, 2024

KevinVandy commented Feb 17, 2024

Lord-AY commented Feb 17, 2024 • edited

KevinVandy commented Feb 17, 2024

Lord-AY commented Feb 17, 2024

ducin commented Feb 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JeanMeche Feb 19, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jrgokavalsa Feb 19, 2024 • edited

Choose a reason for hiding this comment

jrgokavalsa commented Feb 24, 2024

nx-cloud bot commented Feb 24, 2024 • edited

☁️ Nx Cloud Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KevinVandy Mar 5, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KevinVandy commented Mar 20, 2024

KevinVandy left a comment

Choose a reason for hiding this comment

KevinVandy commented Mar 25, 2024

Lord-AY commented Feb 17, 2024 •

edited

JeanMeche Feb 19, 2024 •

edited

jrgokavalsa Feb 19, 2024 •

edited

nx-cloud bot commented Feb 24, 2024 •

edited

KevinVandy Mar 5, 2024 •

edited