One of our most prominent strength is our first class support for hierarchical/tree shaped data. We like to beleive all data is essentially hierarchical. This is because data is nothing without relationships. We've built our component to support this. While most other grid components will show a simple master/detail or expand/collapse type rows, we've taken it many steps further, and integrated hierarchical filtering, floating rows that give your users context while scrolling, lazy loading at all levels, virtualized scrolling of hierarchical data, Selection Cascade, Group Headers, Very Large Hierarchcial Grids, Inner Level Renderers with Locked Column Support and many more features built around this. Its very easy to write features with for flat data. Once you add an additional depth dimension, which is the case with most real world data, things get a lot more complicated. Support for complex hierarchical data has been a cornerstone of our products for over two decades, and we've carried on that DNA into this component.
📄️ Types of Hierarchical Data
At a high level, we classify hierarchical data grids into two types:
📄️ Grouped DataGrids
Now that we have looked at the two different hierarchical data grid types, lets dig deeper into each of them
📄️ Nested DataGrids
As we discussed in the Intro tutorial, Nested DataGrids are Grids that have multiple sets of inner level columns. In the previous section, you saw how to create a hierarchy of levels using the nextLevel property. In this section, we will see how to use this property to create a nested DataGrid.
📄️ Inner Level Renderers
Inner level renderers are a variation of Nested Grids, but instead of rendering the next levels as a child grid, they are rendered as a child component. This is useful when you want to render a different type of component for each level. For example, you may want to render a chart or a table at the inner level, you can do so.