Skip to content

i18n.md

Latest commit

 

History

History
86 lines (70 loc) · 2.85 KB

i18n.md

File metadata and controls

86 lines (70 loc) · 2.85 KB
Raw

Internationalization

Override any UI string at runtime via the labels option, or bake in a complete locale file at build time.

Default Labels (en-US)

Key Default Value
sortDefault Sort
sortAsc Sort ascending
sortDesc Sort descending
groupColumn Group by this column
ungroupColumn Ungroup this column
groupCollapse Collapse group
groupExpand Expand group
treeCollapse Collapse
treeExpand Expand
expandDetail Expand row
collapseDetail Collapse row
filterPlaceholder Filter...
filterDisabled Filter disabled
filterColumn Filter this column
paginationPrevious Previous
paginationNext Next
paginationPage Page
paginationOf of
paginationRows rows
emptyHeading No data
emptyDescription No rows to display
toolbarOf of
toolbarRows rows
statsVisibleRows visible rows
groupRowsSuffix rows

Runtime Override

Pass partial overrides via GridOptions.labels:

const gridOptions: GridOptions = {
  id: 'my-grid',
  data: myData,
  columnDefs: myColumns,
  labels: {
    filterPlaceholder: 'Filtrer...',
    emptyHeading: 'Aucune donnée',
    emptyDescription: 'Aucune ligne à afficher',
    paginationPrevious: 'Précédent',
    paginationNext: 'Suivant',
  },
};

Build-Time Locale

Bake in a complete locale file at build time. This replaces en-US.json during the build:

node scripts/build-grid.mjs --locale projects/ui-grid/src/lib/grid/i18n/fr-FR.json

Creating a Locale File

  1. Copy projects/ui-grid/src/lib/grid/i18n/en-US.json
  2. Translate all 26 keys
  3. Save as a new JSON file (e.g. fr-FR.json)
  4. The file must use the same key names — only the values change

ARIA Labels and Screen Readers

All interactive elements in the grid derive their aria-label values from the GridLabels object. When you provide translated labels, screen reader announcements localize automatically — no additional configuration is needed.

Labels that flow into ARIA attributes:

Label Key ARIA Usage
sortDefault / sortAsc / sortDesc aria-label on sort buttons
groupColumn / ungroupColumn aria-label on group toggle buttons
groupCollapse / groupExpand Screen reader text on group disclosure rows
treeCollapse / treeExpand aria-label on tree toggle buttons
expandDetail / collapseDetail aria-label on expand/collapse detail buttons
filterColumn Screen reader text prefix for filter inputs ("Filter {column}")
paginationPrevious / paginationNext aria-label on pagination buttons
paginationPage aria-label on the pagination <nav> element

See the Accessibility guide for the full a11y documentation.