Translations

Translations can be used to override the data table visible properties in two special cases. Those translatable properties are required to bound into translations property in table level configuration, in any developer preferred language. The properties that can be configured in translations are,

Please note the below example does not show the implementation of the full translation, hence for Data table translations for pagination usage refer Translations for Pagination section.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Sample No Data Message Header

Sample No Data Message Body

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

import { DataTableTranslations } from 'ornamentum';

@Component({
  selector: 'app-translations-usage',
  templateUrl: './translations-usage.component.html'
})
export class TranslationsUsageComponent {
  public emptyItemSet: any = [];

  public DataTableTranslations: DataTableTranslations = {
    paginationLimit: 'Sample Pagination Limit',
    paginationRange: 'Sample Pagination Range',
    noDataMessageHeader: 'Sample No Data Message Header',
    noDataMessageBody: 'Sample No Data Message Body'
  };
}

Basic Usage

translations: DataTableTranslations   Target Component: <ng-data-table>

As mention in the above translation sections, It can be overridden in the data table template level configuration. By default, translations are initialized to their default pre-set values.

  <ng-data-table
    ...
    [translations]=dataTableTranslations>
  </ng-data-table>

Binding the DataTableTranslations type of object into translations property is enough to take control over translations.

As mention in the above there are two scenarios that translations are useful. Let's see how we can configure each demonstrated properties as we required.

Translations for No Data

The default template will be shown when data is not available by mentioning a header and the message body. In no data scenario, users can customize the message that needs to be appear using translations property.

No Data Message Header

noDataMessageHeader: DataTableTranslations  
Default Value: 'Whoops!'

This configuration is used to set the message header to be shown in the table body when there are no data to display. The default value for this property is 'Whoops!'

No Data Message Body

noDataMessageBody: DataTableTranslations  
Default Value: 'No data to display. Added data will appear here.'

This configuration is used to set the message body on the message to be shown in the table body when there are no data to display. The default value for this property is 'No data to display. Added data will appear here'.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Sample No Data Message Header

Sample No Data Message Body

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

import { DataTableTranslations } from 'ornamentum';

@Component({
  selector: 'app-translations-no-data-usage',
  templateUrl: './translations-no-data-usage.component.html'
})
export class TranslationsNoDataUsageComponent {
  public DataTableTranslations: DataTableTranslations = {
    noDataMessageHeader: 'Sample No Data Message Header',
    noDataMessageBody: 'Sample No Data Message Body'
  };

  public emptyItemSet: any;

  constructor() {
    this.emptyItemSet = [];
  }
}

Translations for Pagination

Pagination translations property can be used to customize the pagination naming, which allows the user to override the pagination limit and range namings.

Pagination Limit

paginationLimit: DataTableTranslations  
Default Value: 'Limit'

This is used to customize the pagination limit naming. The default value for this config is 'Limit'.

Pagination Range

paginationRange: DataTableTranslations  
Default Value: 'Results'

This is used to customize the pagination range naming. The default value for this config is 'Results'.

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
Sample Pagination Rage: 1-10of10
/ 1
import { Component } from '@angular/core';

import { DataTableTranslations } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-translations-pagination-usage',
  templateUrl: './translations-pagination-usage.component.html'
})
export class TranslationsPaginationUsageComponent {
  public DataTableTranslations: DataTableTranslations = {
    paginationLimit: 'Sample Pagination Limit',
    paginationRange: 'Sample Pagination Rage'
  };

  public paginationItems: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.paginationItems = this.dataFetchService.fetchStaticData();
  }
}
No Records Template
Pagination
Data Loading Spinner
API Doc for Data Table Translations