Expandable

The ui.grid.expandable module adds the subgrid feature to grid. To show the subgrid you need to provide following grid option:

$scope.gridOptions = {
  //This is the template that will be used to render subgrid.
  expandableRowTemplate: 'expandableRowTemplate.html',
  //This will be the height of the subgrid
  expandableRowHeight: 140,
  //Variables of object expandableScope will be available in the scope of the expanded subgrid
  expandableRowScope: expandableScope
}

expandableRowTemplate will be the template for subgrid and expandableRowHeight will be the height of the subgrid. expandableRowScope can be used to add variables to the scope of expanded grid. These variables can then be accessed from expandableRowTemplate. The grid api provides the following events and methods for subGrids:

//rowExpandedStateChanged is fired for each row as its expanded:
gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
});
//Following methods can be used to expand/ collapse all rows of the grid:
gridApi.expandable.expandAllRows();
gridApi.expandable.collapseAllRows();

SubGrid nesting can be done upto multiple levels.

In addition to the above configuration, 'scrollFillerClass' is also available and can be used to style the scroll filler. The scroll filler appears when you quickly scroll through the grid.