Translating the grid

Every word the grid shows — menus, filters, the sidebar, views, editors, the status bar, offline sync — comes from one table of English defaults, grouped by area. Give the grid your own words with the messages option: a partial table laid over the defaults, so you translate what you need and the rest stays English.

import { Grid } from '@witbybit/wit-grid-react';

<Grid
	rows={rows}
	columns={columns}
	messages={{
		statusBar: { rows: 'Zeilen', selected: 'Ausgewählt' },
		commands: { sortAscending: 'Aufsteigend sortieren', sortDescending: 'Absteigend sortieren' },
		filters: { textContains: 'Enthält', removeFilterOn: (column) => `Filter für ${column} entfernen` },
	}}
/>;

Without React, pass the same object to createGrid (or createClientGrid, createInfiniteGrid, createServerSideGrid):

const grid = createClientGrid({ rows, columns, messages: { pagination: { nextPage: 'Nächste Seite' } } });

messages is live: change the prop (or call api.setOptions({ messages })) and the grid, its sidebar, workspace and menus redraw in the new words (the grid's state, such as the open panel or view, stays). Define the table once per language (outside the component, or in useMemo): a new table applies when its words change.

The tableCopy Anchor Link

The table has one area per part of the grid: statusBar, filters, commands (every command's label), columnMenu, contextMenu, keys (key names in hints), header, groupPanel, pagination, sidebar, columnsPanel, viewsPanel, queryPanel, integrityPanel, pivot, charts, fields, themes, cells, grid and the workspace views (workspace, gallery, kanban, calendar, schedule, cards). Within an area you override any of its words; an area you leave out stays English.

DEFAULT_MESSAGES is the English table the grid always loads. The workspace views' words (workspace, gallery, kanban, calendar, schedule, cards) load with the views, so a grid that only shows a table ships none of them; their keys are typed all the same (ViewMessages). Type a translation as GridMessagesOverride and your editor lists every key of every area.

import { DEFAULT_MESSAGES, type GridMessagesOverride } from '@witbybit/wit-grid-core';

export const de: GridMessagesOverride = {
	sidebar: { columns: 'Spalten', filters: 'Filter', sort: 'Sortierung', closePanel: 'Bereich schließen' },
};

Text with a value in it is a function, so a language can put the words in its own order and choose its own plural:

const words: GridMessagesOverride = {
	pagination: { page: (page, count) => `Seite ${page} von ${count}` },
	header: { selectAllCount: (total) => `Alle ${total} Zeilen auswählen` },
};

Numbers reach these functions already formatted for the page's locale (as strings), the way the grid showed them before.

api.getMessages() returns the table the grid uses (yours over the defaults), for your own chrome to match:

const words = api.getMessages();
button.textContent = words.sidebar.clearAll;

Offline syncCopy Anchor Link

The status bar's sync indicator and the "Not saved yet" mark take their words from the sync area. Its English ships with the offline entry, so a grid without offline carries none of it:

import { Grid } from '@witbybit/wit-grid-react';
import { offline } from '@witbybit/wit-grid-react/offline';

<Grid
	rows={rows}
	columns={columns}
	data={{ offline: offline({ name: 'deals' }) }}
	messages={{ sync: { saved: 'Gespeichert', offline: 'Offline', unsaved: (n) => `${n} nicht gespeichert` } }}
/>;

What the table does not coverCopy Anchor Link

• Your data and your columns. Headers, option labels and cell values are yours: pass them translated.
• Dates and numbers. Month and weekday names, dates and numbers are formatted by the browser (Intl) in the page's locale; the table has no say in them.
• Formula function names (SUM, IF, …) and their usage lines are formula syntax, the same in every language.
• Developer messages. Errors thrown, console warnings and fault reasons stay English.
• A few built-in labels with a meaning beyond display: the "None" group of rows with no value (its label is also its key), and the default headers of the tree column ("Group", "Name": set grouping.label or the hierarchy column's header to translate them).

Checking a translationCopy Anchor Link

Give the grid a table whose every word is marked — 'Rows' becomes '⟦Rows⟧' — and any unmarked English left on screen is a word your translation will miss (or a string still in code: tell us). The grid's own test does this for every surface.