Localisation

Usages Localisation

Localisation is done by overriding functionalities in PanemuTableService. Please refer to Configuration on how to set it up in regards with Angular Dependency Injection.

The service accept Angular LOCALE_ID global variable. Changing the default local will affect Date and DateTime cell formatter.

Texts displayed in NgxPanemuTable is using LabelTranslation interface. The default are:

DEFAULT_LABEL_TRANSLATION: LabelTranslation = {
  search: 'Search',
  loading: 'Loading...',
  day: 'Day',
  month: 'Month',
  year: 'Year',
  groupBy: 'Group By',
  noData: 'No data to display',
  searcForValueInColumn: 'Search for "{par0}" in:'
};

Notice the searcForValueInColumn has {par0} part. It is a variable that will be replaced by text entered in search input field.

One way to change some or all the translation is as follow:

import { formatDate } from '@angular/common';
import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { CellFormatter, DefaultColumnOptions, LabelTranslation, PanemuTableService, TableOptions } from 'ngx-panemu-table';

@Injectable({providedIn: 'root'})
export class CustomPanemuTableService extends PanemuTableService {
  
  labelTranslation: LabelTranslation;

  constructor(@Inject(LOCALE_ID) locale: string) { 
    super(locale)
    
    this.labelTranslation = super.getLabelTranslation();
    this.labelTranslation.searcForValueInColumn = 'Filter "{par0}" on column:'
  }

  override getLabelTranslation()  {
    return this.labelTranslation;
  }

  override getDateCellFormatter(): CellFormatter {
    return (val) => {
      return formatDate(val, 'd MMM yyyy', this.locale) || ''
    }
  }

  override getColumnOptions(): Required<DefaultColumnOptions> {
      const options = super.getColumnOptions();
      options.sortable = false;
      return options;
  }

}