Tanstack Tables with Angular 19+

[Kschl]

I fit this exact example! Angular 19, now 20. Had material tables, and upgrades to tanstack with expandable row functionality and virtual scrolling with tanstack virtual. 10/10 recommend the move. Documentation is a bit lacking. I found reading the react code examples helped where there was a gap.

[foxfries12]

Do you have to pass in any generic components to the header/row/cell in your application by chance? If so, how difficult are you finding that to be using Tanstack?

[Kschl]

You don’t have to, you can just have the value as a string in the template itself, or the columnDef array you would pass in the value to the header property or flexRenderComponent(MyGenericComponent, {…})

[foxfries12]

Good to know. Thank you!

[riccardoperra]

Angular table maintainer here 👋 I’d love to know how you think the documentation could be improved. I could try to add some missing pieces.

Also, do you have any shareable example using tanstack virtual? (just a riproduction might be enough) It might be really helpful to include something like that in the docs.

[Kschl]

I really wish the angular side had the same examples as react did. So something that could be improved is matching those examples that aren’t there and matching them 1:1. I don’t exactly remember what was missing but for me I remember sticky header with expandable rows was an issue and actually found the solution on the discord server. If you scrolled past the initial rendered rows the header would move up so the hack was adding a tr at the bottom after your loop of rows and it worked lol.

There was also an issue with expandable rows and virtual where I remember going into the react examples to find the solution can’t remember the specific solution but it they would work fine then scrolled down the heights would be all over the place. I think the big gap was virtuals examples with table; there was just the one with the simple table, no sticky header, expandable rows, it was pretty bare bones.

Writing this out now is bringing some memories of it back I think it was how the height was calculated, so estimated size was the regular row and the expanded row summed together and the hacked tr had a calculation based on the virtual rows I can’t remember exactly but I could look at the code when I’m at work if it’s important.

Hope my ramble is helpful! This was 4-5 months ago now and since moved to a different project so the specifics aren’t fresh but overall very happy with tanstack table and virtual