Texts and localization

Texts by the part of the table since 1.2.0

The texts of the parts that the core renders come first, flat and named as the options of the config: rowCounterTitle, rowCounterLabel and rowDetailsLoadingMessage. The texts of a component of the skin go into the group named as the component, in the order of the components of the skin: filterDrawer, paginator, progressBar, state, toolbarMain and toolbarSearch. The labels of paginator have the names and the order of MatPaginatorIntl of Angular Material, from itemsPerPageLabel to getRangeLabel.

The flat fields of 1.1.0, as texts.itemsPerPage for texts.paginator.itemsPerPageLabel and texts.rowCounter for texts.rowCounterTitle, still work and are deprecated: the editor marks them, and 2.0 removes them. A field in a group and a text of the core win over their flat field.

A field that is undefined, as {toolbarMain: {search: undefined}}, changes nothing: the text stays the default one, or the flat field of 1.1.0 below it.

Messages of the states

The group state gives the messages of the states by their names, loading, no-data, not-found and fail; the icons stay the ones of the skin. The states, their icons and their Lottie animations are on the page Animated table states.

Filter drawer

The filter drawer of every skin takes its title and the name of its close button from texts.filterDrawer of the config of its table, title and close. The container of Bootstrap and Native reads them when it connects and when it opens, so a new configure() of the table shows at the next opening. The property texts of ‹table-bro-filter-drawer-container› of 1.1.0 still works and wins over the config of the table; it is deprecated and removed in 2.0.

Tags without items since 1.2.0

A cell of tags without items shows No data. The text belongs to the tags of the skin: withTags({texts: {empty: 'No data'}}) gives it, and later setTagsTexts({empty}) of @table-bro/bootstrap and @table-bro/native, or the signal empty of the service TableBroMatTagsTexts of @table-bro/angular-material, changes it at any time: the tags on the page take it at once. The deprecated texts.noItems of a config still works below them.

import {withTags} from '@table-bro/bootstrap';

// The tags of the skin bs, with the text of a cell without items
withTags({texts: {empty: 'No data'}});

Paginator of Angular Material

The skin mat renders the paginator of Angular Material, which takes its texts from MatPaginatorIntl of the application, as every mat-paginator does. Of the group paginator, the skin mat reads only label, the name of the paginator. Provide your MatPaginatorIntl once, in the config of the application:

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

import {MatPaginatorIntl} from '@angular/material/paginator';

/** The texts of the paginators of Angular Material with their default values: change the words for the language of your application. */
@Injectable()
export class AppPaginatorIntl extends MatPaginatorIntl {
  override itemsPerPageLabel = 'Items per page:';
  override nextPageLabel = 'Next page';
  override previousPageLabel = 'Previous page';
  override firstPageLabel = 'First page';
  override lastPageLabel = 'Last page';

  override getRangeLabel = (page: number, pageSize: number, length: number): string => {
    if (length === 0 || pageSize === 0) {
      return `0 of ${length}`;
    }

    length = Math.max(length, 0);

    const start = page * pageSize;
    // A start after the end of the list keeps the end of its page
    const end = (start < length) ? Math.min(start + pageSize, length) : start + pageSize;

    return `${start + 1} – ${end} of ${length}`;
  };
}

import type {ApplicationConfig} from '@angular/core';

import {MatPaginatorIntl}                 from '@angular/material/paginator';
import {provideTableBroMatSkin, withTags} from '@table-bro/angular-material';

import {AppPaginatorIntl} from './paginator-intl';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTableBroMatSkin(withTags({texts: {empty: 'No data'}})),
    {provide: MatPaginatorIntl, useClass: AppPaginatorIntl}
  ]
};

Change of the language

The table takes its texts with its config. A new language is a new config: configure({cols, rows, conf}) with the new texts, or a new value of the input conf of ‹table-bro-ng›, renders the table anew. The filter drawer takes the new texts of its table, with Bootstrap and Native at its next opening, the tags take their new text from setTagsTexts() or TableBroMatTagsTexts, and the paginator of Angular Material takes the new labels of MatPaginatorIntl after its changes.next().

import {setTagsTexts}                                   from '@table-bro/bootstrap';
import type {BroCol, BroConfig, BroRow, BroTextsConfig} from '@table-bro/core';

/**
 * Shows the table in another language: the new config renders the table anew, with the same columns and rows.
 * @param cols - the columns of the table
 * @param rows - the rows of the table
 * @param conf - the config of the table in its language before
 * @param texts - the texts of the table in the new language
 * @param empty - the text of a cell of tags without items in the new language
 */
export function setLanguage(cols: BroCol[], rows: BroRow[], conf: BroConfig, texts: BroTextsConfig, empty: string): void {
  document.querySelector('table-bro')!.configure({cols, rows, conf: {...conf, texts}});
  setTagsTexts({empty});
}