[Angular Table] poor performance of flexRenderComponent

[RndUsername]

TanStack Table version

8.21.3

Framework/Library version

Angular 19.2.15

Describe the bug and the steps to reproduce it

When creating the columns array inside of createAngularTable, the components used with flexRenderComponent will be remounted every time the table rerenders. This absolutely tanks performance. When creating the columns array outside of createAngularTable (as shown in the docs) it works fine and only rerenders the cell without destroying it. The docs should make it clear to never add the array inside the options function or the implementation should handle this case.

Try the StackBlitz linked below by pressing the "Rerender" button and you'll see in the console, that the ngOnInit is logged every time.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-pwizyit7?file=src%2Fapp%2Fapp.component.ts

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[riccardoperra]

The given function in createAngularTable get re-evaluated every time a signal in that scope will notify an update. Since the columns object is recreated from scratch, its reference changes, which cause the re-render.

<ng-container
                *flexRender="
                  cell.column.columnDef.cell; <----- this reference changes
                  props: cell.getContext();
                  let cell
                "
              >
                <div [innerHTML]="cell"></div>
              </ng-container>

Expecially in this case, the cell property you are passing into the *flexRender directive will change, then Angular will also trigger FlexRenderDirective#ngOnChanges, which will clear the view and recreate the component from scratch. I could look if we can add some sort of optimization that detect previous component type, but It's something that depends also on trackBy. I'd say this is an "intended behavior" because the reference of the cell defs change, and you're passing a different function reference.

---

Moving the columns value out as a readonly property will prevent that, since you are using a stable reference. If you need dynamic columns, you can use the columnVisibility feature, or a computed that cache the value of the columns, if they are dependant on something else.

The docs should make it clear to never add the array inside the options function or the implementation should handle this case

I know this is something hidden, or maybe not very well documented for the angular adapter, but that's something already discussed also on the F.A.Q: https://tanstack.com/table/latest/docs/faq#how-do-i-stop-infinite-rendering-loops

TanStack Table is designed to trigger a re-render whenever either the data or columns that are passed into the table change, or whenever any of the table's state changes.

[RndUsername]

Thank you for the quick and thorough response. I think it would really help to put what you explained into the docs for the Angular adapter. Especially as it was hard to find out as someone, who tried the lib for the first time.

[riccardoperra]

Hey @RndUsername, I am revisiting angular docs (alpha) to make sure that's something not missing for everyone else. Do you think that could be enough? I've updated the injectTabledescription, and I'll also add some jsdoc into the function in order to display that while using an IDE

https://tanstack.com/table/alpha/docs/framework/angular/angular-table

[RndUsername]

Yes! That's a lot better. Thank you. Closing the issue as I would see this as resolved...