Localisation

Usages Localisation

Localisation is done by overriding functionalities in PanemuTableService. Please refer to Customization 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:

import { LabelTranslation } from "./label-translation";

export const  DEFAULT_LABEL_TRANSLATION: LabelTranslation = {
  search: 'Type here or double click to search',
  loading: 'Loading...',
  day: 'Day',
  month: 'Month',
  year: 'Year',
  groupBy: 'Group By',
  noData: 'No data to display',
  searcForValueInColumn: 'Search for "{par0}" in:',
  selectColumnToSearchOn: 'Select a column to search on',
  columns: 'Columns',
  visibility_position_stickiness: 'Visibility, Position and Stickiness',
  stickyStart: 'Sticky Start',
  stickyEnd: 'Sticky End',
  reset: 'Reset',
  transpose: 'Transpose',
  transposeSearch: 'Search...',
  setting: 'Setting',
  export: 'Export',
  pleaseSelectARowToDisplay: 'Please select a row to display here',
  validationError: {
    required: 'This field is required',
    minlength: 'Minimum {par0} characters, actual {par1} characters',
    maxlength: 'Max {par0} characters, actual {par1} characters',
    email: 'Invalid Email',
    min: 'Min value is {par0}, actual value is {par1}',
    max: 'Max value is {par0}, actual value is {par1}',
    pattern: 'Invalid value'
  },
  queryEditor: 'Query Editor',
  column: 'Column',
  searchValue: 'Search Value',
  stringRepresentation: 'String Representation',
  cancel: 'Cancel',
  apply: 'Apply',
  yesterday: 'Yesterday',
  today: 'Today',
  tomorrow: 'Tomorrow'
};

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:';
    this.labelTranslation.validationError.required = 'Please specify value for this field.';
  }

  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;
  }

}