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, text and image. 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.
The Ratings column in this example uses an image. Instead of an image, you can use the Rating component that allows user interaction and changes to the rating value on the fly. An example that shows a TreeGrid where cells have a rating component, is available here: TreeGrid Cells with Rating Component.
To select multiple rows, hold SHIFT or CTRL key and click on specific row.
For more information check out the source code of this sample (treegrid/treegrid-overview.ts) file, or read the following article: