Localization (i18n) in Apex Grid

Every built-in string in Apex Grid (filter operands, menu items, toolbar labels, paginator text, and the enterprise feature strings) is localizable through the localeText override map. You can supply a bundled dictionary such as Spanish (esLocale), your own partial overrides, or both. Available on both <apex-grid> and <apex-grid-enterprise> since v3.3.

Using a bundled locale

import { esLocale } from 'apex-grid';

grid.localeText = esLocale;

The grid re-renders its chrome in the chosen language. Bundled dictionaries cover the core strings and the enterprise features.

Overriding individual strings

localeText is a plain override map, so you can translate (or reword) just the strings you care about and leave the rest as the built-in defaults:

grid.localeText = {
  ...esLocale,
  // reword a few entries on top of the base dictionary
  'toolbar.search.placeholder': 'Buscar…',
  'export.csv': 'Descargar CSV',
};

Any key you omit falls back to the built-in English default, so a partial map is always safe.

Resolving a string yourself

If you build custom UI around the grid (a toolbar button, a companion element), resolve a locale string through the grid's localize method so your UI matches the grid's language:

const label = grid.localize('export.csv');            // resolve a key
const withFallback = grid.localize('my.key', {}, 'Fallback');

React example

import { useEffect, useRef } from 'react'
import 'apex-grid/define'
import { esLocale } from 'apex-grid'

export default function LocalizedGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    grid.localeText = esLocale
  }, [])

  return <apex-grid ref={ref} style={{ height: 480 }} />
}