Aller au contenu
DzGrid

Thèmes et droite à gauche

Pas à pas — la hauteur des lignes et des titres, la police, les couleurs, les traits, une colonne ou une ligne — voir Changer l’apparence. Cette page est la référence : les feuilles, chaque variable, la droite à gauche.

Le thème

Section intitulée « Le thème »

@dzgrid/dom injecte de lui-même le CSS de mise en page de la grille ; @dzgrid/theme la rend présentable (couleurs, traits, en-tête, survol, sélection, focus, fenêtres surgissantes), en clair et en sombre, avec des contrastes vérifiés. Chaque fonction qui a un aspect a sa propre feuille, chargée après dzgrid.css : columns.css, menu.css, grouping.css, pivot.css, edit.css, range.css, fill.css, dock.css, columns-panel.css, filters-panel.css, find.css, search.css, print.css, row-drag.css, pinned-rows.css, row-numbers.css, fresh-rows.css ; variables.css pour les réglages de présentation (plus bas).

import '@dzgrid/theme/dzgrid.css';
import '@dzgrid/theme/menu.css';
import '@dzgrid/theme/contrast.css';   // plus de contraste quand le système le demande
  • Couche de cascade. Chaque règle est dans la couche dzgrid : vos propres classes l’emportent sans !important. Quand vous rangez votre propre CSS en couches, nommez l’ordre une fois, en premier : @layer theme, base, dzgrid, components, utilities;. Avec une remise à zéro hors couche (le preflight de Tailwind 3, le Reboot de Bootstrap), chargez plutôt les copies *.unlayered.css.
  • Passerelles. tailwind.css (Tailwind 4), tailwind3.css, bootstrap.css (5.3, suit data-bs-theme) rattachent les couleurs, la police et les coins de la grille à ceux de votre framework.
  • Thèmes vitrines. midnight.css et clinic.css, chacun avec un jumeau clair et un sombre ; data-dzg-skin="midnight" sur un conteneur n’habille que cette zone.

Couleurs et tailles

Section intitulée « Couleurs et tailles »

Les couleurs sont uniquement des variables CSS. La palette (partagée avec tzslot), chacune une paire light-dark() sur :root : --tz-bg, --tz-bg-raised, --tz-fg, --tz-fg-muted, --tz-border, --tz-accent, --tz-accent-fg, --tz-danger, --tz-warning, --tz-success. Ce que la grille en tire, à poser sur n’importe quel ancêtre de .dzg : --dzg-font, --dzg-radius, --dzg-cell-padding-inline, --dzg-header-bg, --dzg-row-hover-bg, --dzg-row-selected-bg, --dzg-focus-ring, --dzg-line, --dzg-pill-radius, --dzg-header-size, --dzg-select-bar, --dzg-flash, --dzg-flash-color — chacune dans le tableau ci-dessous. L’accent propre à ce site est le --tz-accent de la grille : passez le site en sombre et chaque démo suit.

:root { --tz-accent: light-dark(#7c3aed, #c4b5fd); }
.dzg { --dzg-radius: 6px; --dzg-font: 400 0.875rem/1.45 "Atkinson Hyperlegible", system-ui, sans-serif; }
.dzg-cell.is-late { color: var(--tz-danger); }

Toutes les variables

Section intitulée « Toutes les variables »

Posez n’importe laquelle sur un ancêtre de .dzg (ou sur .dzg), ou depuis le code avec le réglage theme ci-dessous. Feuille dit quelle feuille de style la lit : base = dzgrid.css (et la mise en page qu’injecte @dzgrid/dom) ; variables = @dzgrid/theme/variables.css, chargée après dzgrid.css (variables.unlayered.css après la copie hors couche) — elle ne change rien à elle seule ; la feuille d’une fonction est nommée. Clé est la clé du réglage theme.

Variable Clé Ce qu’elle règle Défaut Feuille
--tz-bg, --tz-bg-raised, --tz-fg, --tz-fg-muted, --tz-border bg, bgRaised, fg, fgMuted, border Les surfaces, le texte et les traits de la palette la palette de tzslot base
--tz-accent, --tz-accent-fg, --tz-danger, --tz-warning, --tz-success accent, accentFg, danger, warning, success Accent et tons la palette de tzslot base
--dzg-font font Le raccourci font de la grille : une taille et une police au moins (400 .875rem/1.45 Inter, sans-serif) héritée base
--dzg-radius radius Coins des boutons, fenêtres surgissantes, infobulles (et du cadre) .375rem base
--dzg-line line Épaisseur de chaque trait 1px base
--dzg-pill-radius pillRadius Les coins d’un badge 1em base
--dzg-cell-padding-inline cellPaddingInline Marge intérieure latérale des cellules (× la densité) .5rem base
--dzg-cell-padding-block cellPaddingBlock Marge intérieure haute et basse d’une cellule à la ligne 0 variables
--dzg-cell-align-block cellAlignBlock Le contenu d’une cellule à la ligne ou dessinée par une partie : start, center, end en haut variables
--dzg-cell-font-size cellFontSize La taille du texte des cellules celle de la grille variables
--dzg-num-figures numFigures Les chiffres des cellules de nombres (normal pour ne plus les avoir de même largeur) tabular-nums base
--dzg-space space L’unité d’espacement : écart de l’en-tête ×1, calque ×2, marge des fenêtres surgissantes ×3, pied ×1 / ×2 .25rem variables
--dzg-target-min targetMin Le plus petit bouton, poignée et bascule (WCAG 2.5.8) 24px base
--dzg-header-bg headerBg En-tête, pied, lignes de groupe, boutons --tz-bg-raised base
--dzg-header-fg headerFg Texte de l’en-tête --tz-fg variables
--dzg-header-size headerSize Taille du texte de l’en-tête 1em base
--dzg-header-weight headerWeight Graisse de l’en-tête 600 variables
--dzg-header-font-family headerFontFamily Famille de police de l’en-tête celle de la grille variables
--dzg-header-tracking headerTracking Espacement des lettres de l’en-tête (jamais en arabe) normal base
--dzg-header-case headerCase Titres en uppercase (l’arabe n’a pas de casse) none variables
--dzg-header-align-block headerAlignBlock Le titre d’un en-tête haut : start, center, end center variables
--dzg-header-hover-bg headerHoverBg Un en-tête triable sous le pointeur inchangé variables
--dzg-frame frame Le bord extérieur de la grille (une bordure ; none) --dzg-line solid --tz-border variables
--dzg-frame-radius frameRadius Les coins du cadre --dzg-radius variables
--dzg-row-line rowLine Le trait entre les lignes (une bordure ; none) comme le cadre variables
--dzg-column-line columnLine Un trait entre les colonnes (une bordure) none variables
--dzg-header-line headerLine Le trait sous chaque ligne d’en-tête comme le cadre variables
--dzg-header-separator, --dzg-header-separator-size, --dzg-header-separator-height headerSeparator, headerSeparatorSize, headerSeparatorHeight Les marques entre les cellules d’en-tête redimensionnables --tz-border, 2px, 50% variables
--dzg-pinned-column-line pinnedColumnLine Le bord des colonnes figées comme le cadre variables
--dzg-pinned-shadow pinnedShadow Un box-shadow à ce bord tant que du contenu passe dessous, écrit pour le côté de début (mis en miroir par la grille) aucune base
--dzg-detail-line detailLine Le filet de début d’un panneau de détail 3px solid --tz-border variables
--dzg-row-odd-bg rowOddBg Lignes alternées (la 2e, la 4e… affichées) aucun base
--dzg-row-hover-bg, --dzg-row-selected-bg, --dzg-row-active-bg rowHoverBg, rowSelectedBg, rowActiveBg Ligne sous le pointeur, sélectionnée, qui a le focus teintes de la palette base
--dzg-cell-active-bg, --dzg-focus-ring cellActiveBg, focusRing La teinte et l’anneau de la cellule qui a le focus teintes de l’accent base
--dzg-column-hover-bg columnHoverBg La colonne sous le pointeur, avec columnHover() aucune (rien n’est dessiné) columnHover()
--dzg-focus-width focusWidth L’épaisseur de l’anneau (jamais sous 2 px) 2px variables
--dzg-select-bar selectBar La barre d’une ligne sélectionnée, à son début 0 base
--dzg-stale-fg, --dzg-context-fg, --dzg-toggle-fg staleFg, contextFg, toggleFg Lignes gardées pendant un chargement, lignes de contexte d’un arbre, chevrons --tz-fg-muted base
--dzg-detail-bg detailBg La surface d’un panneau de détail --tz-bg-raised base
--dzg-group-row-bg groupRowBg Les lignes de groupe et leurs pieds --dzg-header-bg grouping.css
--dzg-pinned-bg, --dzg-pinned-line pinnedBg, pinnedLine La surface et le bord des lignes figées --tz-bg-raised, --tz-fg-muted pinned-rows.css
--dzg-busy-bar busyBar La barre d’activité --tz-accent base
--dzg-flash-color flashColor Le flash d’une valeur changée --tz-warning base
--dzg-flash — La force du flash, de 1 à 0, écrite sur la cellule par motion() : pas une couleur à régler 1 base
--dzg-fresh-color, --dzg-fresh-bg, --dzg-fresh-bar freshColor, freshBg, freshBar Les lignes apportées par un rafraîchissement --tz-success, 14 %, 3px fresh-rows.css
--dzg-saving-color, --dzg-saved-color, --dzg-refused-color, --dzg-refused-bg savingColor, savedColor, refusedColor, refusedBg Marques d’enregistrement, une valeur refusée tons edit.css, base
--dzg-editor-border editorBorder Le cadre d’un éditeur ouvert --dzg-focus-ring edit.css
--dzg-range-bg, --dzg-range-edge, --dzg-fill-handle rangeBg, rangeEdge, fillHandle Un bloc de cellules, son bord, la poignée de recopie teinte de sélection, --tz-success range.css, fill.css
--dzg-move-bar, --dzg-resize-mode moveBar, resizeMode L’endroit où arrive une colonne déplacée ; le redimensionnement au clavier --tz-accent columns.css
--dzg-search-mark, --dzg-find-color, --dzg-find-bg, --dzg-find-current-bg, --dzg-find-mark, --dzg-find-mark-current searchMark, findColor, findBg, findCurrentBg, findMark, findMarkCurrent Marques de recherche mélanges de la palette search.css, find.css
--dzg-box-size, --dzg-box-radius boxSize, boxRadius La case de sélection (sa colonne garde sa largeur) 1rem, .25rem variables
--dzg-box-on-bg, --dzg-box-edge boxOnBg, boxEdge Le fond d’une case cochée, le bord d’une case non cochée --tz-accent, --tz-fg-muted variables
--dzg-icon-size iconSize Marque de tri, chevrons, poignée, entonnoir, les icônes de l’application dans les boutons celle de chaque marque (entonnoir 12px) variables, mises en page des fonctions
--dzg-popup-bg, --dzg-popup-shadow popupBg, popupShadow Fenêtres de filtre et menus --tz-bg, une ombre douce variables
--dzg-tooltip-bg, --dzg-tooltip-fg tooltipBg, tooltipFg L’infobulle --tz-fg sur --tz-bg inversés variables
--dzg-tooltip-font-size, --dzg-tooltip-font-family, --dzg-tooltip-font-weight, --dzg-tooltip-line-height tooltipFontSize, tooltipFontFamily, tooltipFontWeight, tooltipLineHeight Le texte de l’infobulle (1.12.0) la taille des cellules, la police de la grille base, variables
--dzg-tooltip-max-width, --dzg-tooltip-padding-block, --dzg-tooltip-padding-inline, --dzg-tooltip-radius tooltipMaxWidth, tooltipPaddingBlock, tooltipPaddingInline, tooltipRadius La boîte de l’infobulle (1.12.0) 20rem, 1 et 2 unités d’espacement, --dzg-radius variables
--dzg-tooltip-white-space tooltipWhiteSpace pre-line garde les retours à la ligne de la valeur (1.12.0) normal variables
--dzg-tooltip-arrow-size, --dzg-tooltip-arrow-color tooltipArrowSize, tooltipArrowColor La flèche vers la cellule, du côté où l’infobulle s’ouvre (0 : aucune ; 1.12.0) .375rem, le fond de l’infobulle variables
--dzg-input-bg, --dzg-input-border inputBg, inputBorder Les champs des filtres : leur fond, leur bord (une couleur, ou none ; 1.12.0 : jamais effacé par la remise à zéro d’une page) --tz-bg ; clair : --tz-fg-muted à 75 % dans --tz-bg, sombre : --tz-fg-muted base
--dzg-input-fg, --dzg-input-radius inputFg, inputRadius Les champs des filtres : texte, coins (1.12.0) --tz-fg, --dzg-radius variables
--dzg-button-bg, --dzg-button-border buttonBg, buttonBorder Boutons de la pagination, du pied des filtres, de nouvel essai (Appliquer garde l’accent) --dzg-header-bg, --tz-fg-muted variables
--dzg-menu-item-height, --dzg-menu-disabled menuItemHeight, menuDisabled Éléments de menu (jamais sous 24 px), un élément désactivé 32px, --tz-fg-muted menu.css, columns.css
--dzg-panel-bg panelBg Le dock et le panneau des filtres --tz-bg dock.css, filters-panel.css
--dzg-chip-bg, --dzg-chip-hover-bg, --dzg-control-active-bg chipBg, chipHoverBg, controlActiveBg Pastilles ; un bouton de panneau enfoncé mélanges d’accent et de texte feuilles des fonctions
--dzg-scrollbar, --dzg-scrollbar-thumb, --dzg-scrollbar-thumb-active scrollbar, scrollbarThumb, scrollbarThumbActive Barres de défilement fines ou du système, le curseur au repos et sous le pointeur thin, --tz-border, --tz-fg-muted dzgrid.comfort.css
--dzg-row-hover-fg, --dzg-row-selected-fg, --dzg-row-active-fg rowHoverFg, rowSelectedFg, rowActiveFg Le texte d’une ligne survolée, sélectionnée, qui a le focus ; un contenu à couleur propre la garde (1.12.0) la couleur de la ligne variables
--dzg-column-separator, --dzg-column-separator-size, --dzg-column-separator-height columnSeparator, columnSeparatorSize, columnSeparatorHeight Une marque entre les colonnes du corps : couleur, épaisseur, hauteur (60% : un court trait centré) ; pas après la dernière colonne (1.12.0) aucune, --dzg-line, 100% variables
--dzg-last-row-line, --dzg-last-column-line lastRowLine, lastColumnLine Le trait sous la dernière ligne affichée, après la dernière colonne (bordures ; 1.12.0) --dzg-row-line, --dzg-column-line variables
--dzg-header-separator-end headerSeparatorEnd La marque d’élargissement après la dernière colonne (transparent l’ôte ; 1.12.0) comme les autres variables
--dzg-header-padding-inline headerPaddingInline La marge latérale des titres (× la densité ; 1.12.0) celle des cellules variables
--dzg-header-button-fg, --dzg-header-button-active-fg headerButtonFg, headerButtonActiveFg Les boutons filtre et menu des titres ; l’entonnoir d’une colonne filtrée (1.12.0) --tz-fg-muted, --tz-accent variables
--dzg-header-group-line headerGroupLine Le trait de fin d’un groupe de colonnes (1.12.0) comme le cadre variables
--dzg-sort-fg sortFg Les marques de tri (1.12.0) --tz-fg-muted variables
--dzg-button-fg, --dzg-button-radius buttonFg, buttonRadius Le texte et les coins des boutons (1.12.0) --tz-fg, --dzg-radius variables
--dzg-popup-radius, --dzg-popup-border, --dzg-popup-padding popupRadius, popupBorder, popupPadding Fenêtres de filtre et menus : coins, bord (une bordure), marge (1.12.0) --dzg-radius, comme le cadre, 3 unités d’espacement variables
--dzg-option-selected-bg optionSelectedBg Une valeur cochée de la liste d’un filtre par valeurs (1.12.0) aucun variables
--dzg-overlay-fg, --dzg-overlay-bg overlayFg, overlayBg Le message de chargement, d’absence de lignes, d’erreur (1.12.0) --tz-fg-muted, --tz-bg variables
--dzg-footer-fg, --dzg-footer-bg footerFg, footerBg La bande de la pagination (1.12.0) --tz-fg-muted, --dzg-header-bg variables

En lecture seule (écrites par la grille ; pas de clé) : --dzg-row-height, --dzg-header-height, --dzg-density (.75 compact, 1, 1.25 spacious : la marge latérale suit la densité ; .dzg { --dzg-density: 1 } dans votre propre CSS la garde fixe).

Les classes ne sont pas une API (1.12.0) : les classes de la grille, ses pseudo-éléments, ses marques data-* et l’ordre de son DOM sont internes et peuvent changer à toute version. Tout ce qu’une apparence demande est une variable ci-dessus, une clé de theme ou un réglage ; s’il en manque une, demandez-la plutôt que de viser une classe interne. Vos propres classes (rowClass, ui.cellClass, ui.headerClass) restent les vôtres. Une liste déroulante à vous, ouverte dans une fenêtre de filtre, doit s’afficher dans la fenêtre (elle est dans la couche du dessus : une liste ajoutée à body passe dessous).

Le réglage theme

Section intitulée « Le réglage theme »

La démo ci-dessous règle quelques-unes de ces clés depuis le code, sur une seule grille : lignes alternées, traits entre les colonnes, une graisse d’en-tête plus légère.

 
import { createGrid } from '@dzgrid/dom';
import { theming } from '@dzgrid/dom/theme';
import { FR } from '@dzgrid/dom/locales/fr';
import '@dzgrid/theme/dzgrid.css';
import '@dzgrid/theme/variables.css';


type Hive = { id: string; name: string; frames: number };


const grid = createGrid<Hive>(document.getElementById('hives')!, {
  rows: [{ id: 'h1', name: 'Ruche du verger', frames: 10 }],
  columns: [{ id: 'name', header: 'Ruche' }, { id: 'frames', header: 'Cadres', type: 'number' }],
  getRowId: (h) => h.id,
  messages: FR,
  theme: { accent: 'light-dark(#0f766e, #5eead4)', rowOddBg: 'color-mix(in srgb, var(--tz-accent) 6%, var(--tz-bg))', headerWeight: 500, columnLine: 'var(--dzg-line, 1px) solid var(--tz-border)' },
  features: [theming()],
});
grid.update({ theme: { headerWeight: 700 } });   // en direct : les clés précédentes qui ne sont pas redonnées sont retirées

Les clés sont celles du tableau ; chacune est écrite sur la racine de la grille, si bien qu’elle l’emporte sur vos feuilles de style pour cette grille seulement. Une valeur est une valeur CSS ou un nombre (600) ; une clé absente du tableau ou une valeur avec ;, {, }, <, \, ! ou url( est signalée (invalid-setting, chemin settings.theme.<key>) et laissée de côté. Le contraste reste à votre charge : npm run check:contrast -- --palette vérifie un fichier de palette.

Icônes

Section intitulée « Icônes »

La grille dessine ses propres marques (caractères et formes, aucun fichier, dans la couleur du texte). Pour dessiner les vôtres :

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


type Hive = { id: string; name: string; frames: number };
const funnel = document.querySelector<SVGSVGElement>('#my-funnel')!;   // un <svg> déjà dans la page : copié


createGrid<Hive>(document.getElementById('hives')!, {
  rows: [{ id: 'h1', name: 'Ruche du verger', frames: 10 }],
  columns: [{ id: 'name', header: 'Ruche' }, { id: 'frames', header: 'Cadres', type: 'number' }],
  getRowId: (h) => h.id,
  messages: FR,
  icons: { sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 3l5 8H3z"/></svg>', filter: funnel },
  features: [theming()],
});

Noms : sortAsc, sortDesc, filter, filterActive (celle d’une colonne filtrée ; sinon filter dans la couleur d’accent — donnez-la pour garder une marque qui ne tienne pas qu’à la couleur), menu, chevron (arbres, détails, groupes d’en-têtes : tournée et mise en miroir comme celle par défaut), submenu, grip. Une chaîne SVG ou un élément (copié). Sa forme est dessinée dans la couleur et la taille de la marque (--dzg-icon-size), quel que soit son propre remplissage. Refusé, avec la marque par défaut gardée et invalid-setting signalé : tout ce qui n’est pas un <svg> fait de formes, groupes, dégradés, use et title ; un <script>, <style> ou <foreignObject> ; un attribut on… ; un lien ou un url() qui sort de l’icône (seulement #…) ; plus de 20 000 caractères. Dessinée comme une image data: : une CSP doit permettre img-src data:. Avec injectStyles: false, chargez aussi ICONS_CSS de @dzgrid/dom/theme.

Lignes alternées, traits, le bord figé

Section intitulée « Lignes alternées, traits, le bord figé »
.dzg {
  --dzg-row-odd-bg: color-mix(in srgb, var(--tz-accent) 6%, var(--tz-bg));     /* base */
  --dzg-pinned-shadow: 6px 0 6px -4px color-mix(in srgb, var(--tz-fg) 35%, transparent); /* base */
  --dzg-column-line: var(--dzg-line, 1px) solid var(--tz-border);                     /* variables.css */
  --dzg-frame: none;                                                             /* variables.css */
}

Le titre d’un en-tête suit l’align de sa colonne (les nombres à la fin) ; headerAlign sur une colonne le place autrement.

Clair et sombre suivent le système ; data-theme="light" ou data-theme="dark" sur n’importe quel ancêtre en impose un.

La hauteur des lignes vient du réglage density (compact 28 px, comfortable 32 px, le défaut, spacious 40 px) ou de rowHeight en pixels, qui l’emporte. Les lignes suivent le zoom du texte du lecteur. Le menu de colonne peut proposer la densité à l’utilisateur (columnMenu({ density: true })), et l’état la garde.

La hauteur de l’en-tête : les lignes d’en-tête ont la hauteur d’une ligne, sauf si headerHeight (en pixels, 24 au moins, en direct) les rend plus hautes — { rowHeight: 40, headerHeight: 70 }, Angular [headerHeight]="70", <dz-grid header-height="70">. Elle règle la ligne des en-têtes de colonnes et les lignes de groupes de colonnes au-dessus (un en-tête de 70 px avec une ligne de groupe fait 140 px) ; la ligne de filtres garde la hauteur des lignes. Elle suit le zoom du texte comme les lignes ; des titres verticaux font encore grandir la ligne quand ils en ont besoin. La grille l’écrit sur sa racine en --dzg-header-height (en lecture seule, comme --dzg-row-height).

Depuis 1.10.0, les lignes de groupes ont leur propre hauteur : headerHeight: { columns: 70, groups: 30 } (columns absent : la hauteur des lignes ; groups absent : celle des colonnes). La ligne de filtres a aussi la sienne : filters({ floating: true, rowHeight: 44 }). Des titres sur plusieurs lignes (headerWrap, colonnes) font grandir la ligne des en-têtes de colonnes ; la plus haute l’emporte.

La hauteur de la grille vient de son conteneur, jamais de ses lignes : donnez une hauteur à l’hôte (fixe, une part de flex ou de grid, 100dvh moins une barre) et la grille la remplit quel que soit son nombre de lignes (depuis 1.11.0) ; les lignes défilent à l’intérieur. Il n’y a pas de mode « aussi haute que ses lignes » — la page sauterait chaque fois qu’un filtre change leur nombre.

La colonne sous le pointeur (1.10.0) : columnHover() de @dzgrid/dom/column-hover écrit data-hover-col sur la racine et data-col-hover sur les cellules de cette colonne (souris et stylet seulement, jamais le clavier) ; la teinte est à vous :

.dzg { --dzg-column-hover-bg: color-mix(in srgb, var(--tz-accent) 8%, transparent); }

Droite à gauche

Section intitulée « Droite à gauche »

Le sens d’écriture est pensé dès le départ : colonnes figées, défilement, touches fléchées (en arabe, → va vers le début, qui est à droite), fenêtres surgissantes, retrait de l’arbre et thème le suivent tous. Tout dans DzGrid parle de début et de fin, jamais de gauche et de droite : pinned: 'start', align: 'end', la zone start du dock.

La grille en arabe (ar-DZ), de droite à gauche : la colonne figée est à droite, les touches fléchées suivent l’ordre de lecture.

 
import { createGrid } from '@dzgrid/dom';
import { AR } from '@dzgrid/dom/locales/ar';


type Souk = { id: string; name: string; stalls: number };


const grid = createGrid<Souk>(document.getElementById('souks')!, {
  rows: [{ id: 's1', name: 'سوق النجوم', stalls: 48 }],
  columns: [
    { id: 'name', header: 'السوق', pinned: 'start' },
    { id: 'stalls', header: 'الدكاكين', type: 'number', align: 'end' },
  ],
  getRowId: (s) => s.id,
  messages: AR,
  locale: 'ar-DZ',
  direction: 'rtl',
  numerals: 'locale',
});


grid.update({ direction: 'auto' });   // suivre plutôt l’attribut `dir` le plus proche
  • direction : 'ltr', 'rtl', ou 'auto' (le dir de l’ancêtre le plus proche).
  • numerals: 'locale' affiche les chiffres propres à la langue (arabes orientaux pour ar) ; le défaut 'latn' garde 0–9.
  • Le tri et la recherche suivent la langue : formes de la hamza, voyelles brèves et tatweel, chiffres arabes orientaux.
  • Votre propre CSS devrait aussi utiliser les propriétés logiques : margin-inline-start, inset-inline-end, text-align: start.
  • Trois langues sont livrées : EN, FR, AR (@dzgrid/dom/locales/*), chaque fonction avec son propre lot de textes, règles de pluriel comprises. Une autre langue est un objet GridMessages à vous, avec les mêmes clés ; checkMessages(messages) lève une erreur qui nomme les clés manquantes.