This is an example of Angular 2 Grouping. The grouping functionality enables collapsible data groups which can be customized via the 'Group By' header menu option or via drag and drop of the column headers. You can expand and collapse the groups one by one or all at once. The built-in rendering of the groups’ headers can be overridden. Groups and sub groups can be toggled. In addition you can enable aggregates in the footer of the grid.