No Records Template

No Records Template provides the capability to customize the appearance of the Ornamentum grid when there is no data to be displayed. To define the no-records template, nest an <ng-template> tag with the ngDataTableNoRecords directive inside.

No records template can be integrated into expandable rows. Please refer Row Expand Template for further details.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

No data have been detected.

Please read our documentation about data retrieval process

import { Component } from '@angular/core';

@Component({
  selector: 'app-no-records-template-usage',
  templateUrl: './no-records-template-usage.component.html'
})
export class NoRecordsTemplateUsageComponent {
  public items: any[] = [];
}

The above demo snippet depicts a sample no data scenario. A Data Loading Spinner will be displayed until the data is being loaded into the grid.

Basic Usage

Similar to the other templates, it is possible to bind a specific directive #ngDataTableNoRecords into <ng-template> to indicate unavailability of data.

  <ng-template #ngDataTableNoRecords>
     <h1>No data have been detected.</h1>
     <h2>Please read our documentation about data retrieval process</h2>
  </ng-template>
  <ng-template #ngDataTableNoRecords>
     <h1 style="font-family: 'Helvetica Neue'; color: #8f893f;">No data have been detected.</h1>
     <h2>Please read our <a href="#">documentation</a> about data retrieval process</h2>
  </ng-template>
Data Loading Template
Header Details
Translations
Client Side Basic Data Binding
Server Side Basic Data Binding
API Doc for Data Table No Records Template