Data Table Substitute Rows

Substitute rows are used to show empty rows when there is a lesser amount of data is available than the declared limit. In such cases, ornamentum will leave the rest of the data rows empty instead of showing a blank area. If the data set is equally divided by the declared limit the substitute rows will not be displayed even though the substitute rows are enabled.

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
        
        
        
        
        
Results: 1 -5of5
/ 1

Basic Usage

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

  1. Substitute Rows Enabled
      <ng-data-table
        ...
        [showSubstituteRows]="true">
      </ng-data-table>
    

    To enable substitute rows, set showSubstituteRows to true, and by default, the property is in false state. In the example in What You Will See section, the data limit is declared as 10 items. Still, due to the lack of data availability the table shows 05 data rows with additional 05 empty rows to fill the gap of data table limit.

    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-substitute-rows-usage',
      templateUrl: './substitute-rows-usage.component.html'
    })
    export class SubstituteRowsUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData(0, 5);
      }
    }
    
  2. Substitute Rows Disabled
      <ng-data-table
        ...
        [showSubstituteRows]="false">
      </ng-data-table>
    

    In the following example limit is specified as 10 items, But due to the lack of data availability table is showing 05 data rows and instead of showing additional empty data rows it shows an empty area. That is because the substitute rows are not defined.

    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
    Results: 1 -5of5
    / 1
    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-substitute-rows-disabled-usage',
      templateUrl: './substitute-rows-disabled-usage.component.html'
    })
    export class SubstituteRowsDisabledUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData(0, 5);
      }
    }
    
Pagination
Column Binding
API Doc for Data Table Substitute Rows