IntegralUI TreeGrid is a native Angular component that displays hierarchical data structures in multiple columns. You can load data on demand during run-time from local or remote data sources, and add custom HTML content or other Angular components in each treegrid cell.
In above demo, the treegrid has columns with different content: checkbox, rating and label. When you click on header with check box, all rows become checked or unchecked. In addition, a click on parent row changes the check box value to its child rows. In this example, check boxes can have 2 values: checked or unchecked, but you can change this easily by providing three values.
Some columns have their content aligned to center, while others have their alignment set to left. You may also notice that expand icon is shown in second column. This is customizable, you can set which column has the expand box in your code.
To select multiple rows, hold SHIFT or CTRL key and click on specific row.
In order to see columns with different kinds of editors, check out this example Built-In Editors. By default editor is not specified, and the content in each cell is determined by its template, where you can add any custom HTML elements.
This example also shows an animation effect during hovering or selection of columns and rows. This is controlled by the allowAnimation property, which by default is set to false.
For more information check out the source code of this sample (treegrid/trg-overview.ts) file, or read the following article: