Data Table Row Expand Template

The row expand template of the Grid enables the user to provide additional details about a particular row of the table data, through expanding or collapsing its content.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1 -10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-row-expand-template-usage',
  templateUrl: './row-expand-template-usage.component.html'
})
export class RowExpandTemplateUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Basic Usage

expandableRows: boolean   Default Value: falseTarget Component: <ng-data-table>

This feature can be enabled by setting the expandableRows as true. The default status of this property is false.

To define the detail template, nest an <ng-template> tag with the ngDataTableRowExpand directive inside the <ng-data-table> tag. The template context is set to the current row.

The Data table will not show anything, although it has been set as true for expandableRows property due to the unavailability of a custom template. Therefore, it is essential to provide a custom template if this property is set to true.

The following code snippet depicts how to set a custom template.

  <ng-template #ngDataTableRowExpand let-row="row">
    // your template goes here
  </ng-template>

In What You Will See section used the following code snippets to show expandable row functionality, for as expandable custom template.

  <ng-template #ngDataTableRowExpand let-row="row">
    <app-row-expand-template-detail-view *ngIf="row.expanded || row.dataLoaded"
                                       [row]="row"></app-row-expand-template-detail-view>
  </ng-template>
import { Component, Input, OnInit } from '@angular/core';

import { DataTableRow } from 'ornamentum';

import { ExampleData, Store } from 'helper-models';

@Component({
  selector: 'app-row-expand-template-detail-view',
  templateUrl: './row-expand-template-detail-view.component.html'
})
export class RowExpandTemplateDetailViewComponent implements OnInit {
  @Input()
  public row: DataTableRow<ExampleData>;

  public stores: Store[];

  public ngOnInit(): void {
    this.stores = this.row.item.availableStores;
    this.row.dataLoaded = true;
  }
}

Useful Properties

There are few more properties available that can be used after enabling expandableRows property.

Row

row: DataTableRowTarget Component: <ng-template> inside <ng-data-table>

This property can be used to access data rows, as shown in the above What You Will See section example.

Expand On Row Click

expandOnRowClick: boolean   Default Value: falseTarget Component: <ng-data-table>

This property allows to enable/disable expand the detail row, on row click or row expand button click when expandableRows is set to true.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1 -10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-expand-on-row-click-usage',
  templateUrl: './expand-on-row-click-usage.component.html'
})
export class ExpandOnRowClickUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Show Row Expand Loading Spinner

showRowExpandLoadingSpinner: boolean  
Default Value: false
Target Component: <ng-data-table>

Enables loading spinner when data is fetching to the table row expandable section. This can be clearly seen when there is a scenario to show data by calling a REST API to a expandable row in a slow network.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1 -10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-show-row-expand-loading-spinner-usage',
  templateUrl: './show-row-expand-loading-spinner-usage.component.html'
})
export class ShowRowExpandLoadingSpinnerUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

In the above data table, following template selector and properties are applied for all expandable rows to see the loading spinner behaviour.

  <ng-template #ngDataTableRowExpand let-row="row">
    <app-show-row-expand-loading-spinner-detail-view *ngIf="row.expanded || row.dataLoaded"
                                       [row]="row"></app-show-row-expand-loading-spinner-detail-view>
  </ng-template>

Below code snippet will show the respective code segments for row expanding detail view and you can use row property to control the behaviour of the loading spinner as shown in the below snippet.

import { Component, Input, OnInit } from '@angular/core';

import { DataTableRow } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-show-row-expand-loading-spinner-detail-view',
  templateUrl: './show-row-expand-loading-spinner-detail-view.component.html'
})
export class ShowRowExpandLoadingSpinnerDetailViewComponent implements OnInit {
  @Input()
  public row: DataTableRow<ExampleData>;

  public rowDetails: string;

  public ngOnInit(): void {
    setTimeout(() => {
      this.rowDetails = this.row.item.product;
      this.row.dataLoaded = true;
    }, 2000);
  }
}
Cell Template
Responsive Configuration
Events
Data Loading Spinner
API Doc for Data Table Row Expand Template