Treegrid in 18.2

[apollisa]

trafficstars

Hello,

Since 18.2, FlatTreeControl, MatTreeFlatDataSource and MatTreeFlattener are deprecated, and I was relying on them to create a treegrid, as suggested by @andrewseguin in https://github.com/angular/components/issues/15187#issuecomment-463715842:

You should be able to do this using the table currently, and to make it easier you can use the TreeControl to help you traverse your data and manage expansion state https://stackblitz.com/edit/angular-m77g7e-semvxp?file=app%2Ftable-basic-example.html

So I was wondering if there was a new recommended way of creating a treegrid, or if I needed to reimplement those deprecated classes. 🤔

Thanks for your help!

[jimivdw]

Tagging along here for the more general use case of using the programmatic implementation of the tree without actually using the CdkTree/MatTree components. Do I now have to use a CdkTree component just for the tree "behavior"? Or is there anything else I can do (besides just building my own)?

[f-mon]

same problem for me. I would be grateful if you could indicate a valid alternative to those classes to implement a tree table. I was very surprised to see them deprecated in the new version

[faraz-ahmad-uft]

I am facing the same issue.

Please comment If someone has any alternate approach for the deprecated classes.

[fua03]

Hi guys, I have the same issue as you...any news on some alternative to fix this deprecation?

[MelanieW97]

Same here. I thought I could already fix it to be safe in the future. However, it's not something you can simply do within a few minutes. Fun Fact: Take a look at the examples of the newly released Angular 19. They still use the deprecated classes themselves for flat nodes. How am I supposed to fix this in time if I don't even get an example of how I can achieve that? They might change the examples but as of now ... they use the deprecated classes for sure.

[fua03]

Any news ?

[faraz-ahmad-uft]

@fua03 Hope this help you.

https://stackblitz.com/run?file=src%2Fexample%2Fcdk-tree-complex-example.html

[fua03]

Hi @faraz-ahmad-uft, the link is not working. Thank you!

[faraz-ahmad-uft]

Try to search cdk-tree example on Google. You will find the example of this. This is the new class component for mat tree provided by the Google team.

[italosll]

@faraz-ahmad-uft sadly i couldn't find the example, anyone has an suggestion on how to refactor the old tree-grid?

i found examples on how to set up mat-tree, bu not mat-tree + mat-table, wich is what i currently have on my project...

[faraz-ahmad-uft]

@faraz-ahmad-uft sadly i couldn't find the example, anyone has an suggestion on how to refactor the old tree-grid?

i found examples on how to set up mat-tree, bu not mat-tree + mat-table, wich is what i currently have on my project...

Here is the example- https://material.angular.dev/cdk/tree/examples

[italosll]

@faraz-ahmad-uft sadly i couldn't find the example, anyone has an suggestion on how to refactor the old tree-grid?

i found examples on how to set up mat-tree, bu not mat-tree + mat-table, wich is what i currently have on my project...

Here is the example- https://material.angular.dev/cdk/tree/examples

I tried a few times with the docs examples combine the mat-tree/cdk-tree with mat-table and it Just doesnt work.

What i need is a Tree grid with nested data, somethig that in previous versions i acomplished by leveraging MatTreeFlatDatasource and Tree Control as shown in this example: https://stackblitz.com/edit/angular-table-tree-example?file=app%2Ftable-basic-example.ts.

@andrewseguin, @BobobUnicorn @zarend @jelbourn i saw that all of you worked togheter somehaw in some improvements to the documentation (#27626) and (#29062) regarding mat-tree, but could you land us a hand here?

What would be the proper way of creating an mat-table with expanble rows with angular material >= 18.2 ?

This is the result we aim for:

[UmPedroDev]

i am facing the same issue

[italosll]

Hi!!!

with the help of @moniuch in #31524 i've acomplished the goal of creating an generic tree grid without any deprecated classes, i will share it with you, but keep in mind that i keeped the example very simple and without any styling worth of mention.

this is the stackblitz:

https://stackblitz.com/edit/2ehxjap8-e9exebi2?file=src%2Fexample%2Ftree-nested-overview-example.html

I dont know for sure if this is the most correct way of creating this functionality but at least this works.