Tree Grid overview

NbTreeGridComponent

Tree grid component that can be used to display nested rows of data. Supports filtering and sorting.

Installation

Import NbTreeGridModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbTreeGridModule,
  ],
})
export class PageModule { }

Usage

As the most basic usage you need to define nbTreeGridRowDef where you should pass columns to display in rows and nbTreeGridColumnDef - component containing cell definitions for each column passed to row definition.

NbTreeGridComponent's source input and NbTreeGridDataSourceBuilder.create expecting data to be an array of objects with data, children and expanded properties. If your data doesn't match this interface, you can pass getter functions for each property as arguments to NbTreeGridDataSourceBuilder.create method.

To use sorting you can add nbSort directive to table and subscribe to sort method. When user click on header, sort event will be emitted. Event object contain clicked column name and desired sort direction.

You can use Data Source Builder to create NbTreeGridDataSource which would have toggle, sort and filter methods. Then you can call this methods to change sort or toggle rows programmatically. Also nbSort and nbFilterInput directives both support NbTreeGridDataSource, so you can pass it directly as an input and directives will trigger sort, toggle themselves.

You can create responsive grid by setting hideOn and showOn inputs of nbTreeGridColumnDef directive. When viewport reaches specified width grid hides or shows columns.

To customize sort or row toggle icons you can use nbSortHeaderIcon and nbTreeGridRowToggle directives respectively. nbSortHeaderIcon is a structural directive and it's implicit context set to current direction. Also context has three properties: isAscending, isDescending and isNone.

By default, row to toggle happens when user clicks anywhere in the row. Also double click expands row deeply. To disable this you can set [clickToToggle]="false" input of nbTreeGridRow.

NbTreeGridPresentationNode

Implicit context of cells and rows

NbTreeGridSortService

Service used to sort tree grid data. Uses Array.prototype.sort method. If you need custom sorting, you can extend this service and override comparator or whole sort method.

NbTreeGridFilterService

Service used to filter tree grid data. Searched searchString in all object values. If you need custom filter, you can extend this service and override filterPredicate or whole filter method.

NbTreeGridColumnDefDirective

Column definition for the tree-grid. Defines a set of cells available for a table column.

NbTreeGridRowDefDirective

Data row definition for the tree-grid. Captures the header row's template and columns to display.

NbTreeGridRowComponent

Cells container. Adds the right class and role.

NbSortDirective

Directive triggers sort method of passed object when sort header changes direction

NbSortHeaderComponent

Marks header as sort header so it emitting sort event when clicked.

NbFilterInputDirective

Helper directive to trigger data source's filter method when user types in input

NbTreeGridRowToggleDirective

When using custom row toggle, apply this directive on your toggle to toggle row on element click.