locale

Comment les cellules écrivent les nombres et les dates, et comment le texte se trie — à part de la langue des textes.

Type	string
Par défaut	la langue du paquet de textes (messages.locale)
Modifiable en direct (update())	Oui
Angular	l’entrée [locale]
<dz-grid>	l’attribut locale
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Une étiquette de langue ('en-GB', 'fr-CH', 'ar-DZ') : 1 234,5 ou 1,234.5, 03/02/2026 ou 2026-03-02, et la place du « é » parmi les autres lettres quand une colonne de texte est triée. Sans lui, la grille prend le locale du paquet messages — des textes français avec des nombres suisses, c’est messages: FR, locale: 'fr-CH'.

Le calendrier est toujours le grégorien, quoi que dise l’étiquette, et les chiffres sont latins sauf si numerals demande ceux de la langue. Une étiquette mal formée lève une RangeError : depuis createGrid, ou depuis update(), qui laisse alors la grille comme elle était. L’attribut de <dz-grid> ne lève rien : il écarte la valeur et signale un avertissement invalid-setting.

Exemple

TypeScript

import { createGrid } from '@dzgrid/dom';
import { FR } from '@dzgrid/dom/locales/fr';

type Cheese = { id: string; name: string; price: number; aged: string };

const grid = createGrid<Cheese>(document.getElementById('fromages')!, {
  rows: [{ id: 'c1', name: 'Meule des alpages', price: 1234.5, aged: '2025-11-02' }],
  columns: [
    { id: 'name', header: 'Fromage' },
    { id: 'price', header: 'Prix', type: 'number' },
    { id: 'aged', header: 'Affiné depuis', type: 'day' },
  ],
  getRowId: (c) => c.id,
  messages: FR,
  locale: 'fr-CH',
});

grid.update({ locale: 'fr-FR' });

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { FR } from '@dzgrid/dom/locales/fr';

type Cheese = { id: string; name: string; price: number; aged: string };

@Component({
  selector: 'app-fromages',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" locale="fr-CH" />`,
})
export class Cheeses {
  readonly rows: Cheese[] = [{ id: 'c1', name: 'Meule des alpages', price: 1234.5, aged: '2025-11-02' }];
  readonly columns: DzgColumnOrGroup<Cheese>[] = [
    { id: 'name', header: 'Fromage' },
    { id: 'price', header: 'Prix', type: 'number' },
    { id: 'aged', header: 'Affiné depuis', type: 'day' },
  ];
  readonly rowId = (c: Cheese) => c.id;
  readonly messages = FR;
}

Web Component

<dz-grid locale="fr-CH"></dz-grid>

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { FR } from '@dzgrid/dom/locales/fr';

type Cheese = { id: string; name: string; price: number; aged: string };

const grid = document.querySelector<DzGridElement<Cheese>>('dz-grid')!;
grid.columns = [
  { id: 'name', header: 'Fromage' },
  { id: 'price', header: 'Prix', type: 'number' },
  { id: 'aged', header: 'Affiné depuis', type: 'day' },
];
grid.getRowId = (c) => c.id;
grid.messages = FR;
grid.rows = [{ id: 'c1', name: 'Meule des alpages', price: 1234.5, aged: '2025-11-02' }];

Démo

Textes français, nombres et dates suisses (fr-CH).

Voir aussi

• numerals — les chiffres propres à la langue.
• timeZone — le fuseau où s’affichent les instants.
• messages — la langue des textes.