Row Expand Template

Assume, if you want to show additional view in data table each rows in these kind of situations you can use expandable view template and ornamentum will allows to customize the data table row expandable section by your own templates.

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

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

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

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 , Following code snippet depicts how to setup expandable row for as expandable customer 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>

Following code snippet will show the respective code segments for row expanding detail view (app-row-expand-template-detail-view).

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 use after enabling expandableRows property.

Row

row: DataTableRow

This property can be accessed as shown in the above What You Will See sections's example.

Expand On Row Click

expandOnRowClick: boolean  
Default Value: false

Enable/disable ability to expand the table row on user row click or row expand button click event when expandableRows is enabled.

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

Enables loading spinner when data is fetching to the table row expandable section. This can be clear seen when there is 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-row-expand-loading-spinner-detail-view *ngIf="row.expanded || row.dataLoaded"
                                       [row]="row"></app-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);
  }
}
Responsive Configuration
Events
Data Loading Spinner
API Doc for Data Table Row Expand Template