Localization

// locale forces a tag rather than following the page
createDataGrid<Person>({ columns, data, getRowId, locales, locale: 'vi-VN' });

// Assigning it switches in place, keeping the sort, filter and selection
grid.locale = 'ja-JP';

// The same tag drives Intl, so number, currency and date columns that name
// no locale of their own reformat with it.
{ id: 'salary', type: 'currency', typeOptions: { currency: 'EUR' } }

// A tag nobody answers for falls back to English, and 'vi' is answered by
// the 'vi-VN' pack.

import { createDataGrid } from '@sv5ui/datagrid';
import { enUS, jaJP, viVN } from '@sv5ui/datagrid/locales';

// Hand the grid the languages it may use. It picks one from the page's own
// language, so nothing else needs configuring. A pack nobody imports is
// never bundled, which is why there is no "all languages" export.
const grid = createDataGrid<Person>({
  columns,
  data,
  getRowId,
  locales: [enUS, viVN, jaJP]
});

// labels replaces single strings on top of the chosen pack, any subset
createDataGrid<Person>({
  columns,
  data,
  getRowId,
  locales: [enUS],
  labels: {
    search: 'Find a member',
    noData: 'Nobody here yet',
    // Functions where a value is interpolated, so a language can put the
    // number where it needs it.
    selectedRows: (count) => `${count} chosen`,
    pageRange: (from, to, total) => `${from} to ${to} of ${total}`,
    // Operator maps override one entry at a time
    textOps: { contains: 'has' }
  },
  // The same for what the live region speaks
  announcer: {
    sorted: (column, direction) => `${column}, ${direction}ending`
  }
});

import type { DataGridLocalePack } from '@sv5ui/datagrid';

// A pack is { tag, labels, announcer } and says what it has. English
// answers for the rest, so two labels is a working pack, and a string the
// grid adds next release arrives in English rather than as a blank.
export const svSE: DataGridLocalePack = {
  tag: 'sv-SE',
  labels: { search: 'Sok...', noData: 'Inga rader' },
  announcer: { sortCleared: () => 'Sortering rensad' }
};

// Every key it does say is typed, so a translation cannot land on a name
// the grid does not have, and a label function keeps its signature.

createDataGrid<Person>({ columns, data, getRowId, locales: [svSE] });

// Layered in this order, so the narrowest wins:
//   English -> the pack for grid.locale -> this app's own labels/announcer
createDataGrid<Person>({
  columns, data, getRowId,
  locales: [svSE],
  labels: { search: 'Sok medlemmar...' }   // over the pack, over English
});