Localization and Dates

This panel uses Spanish captions, EU dates and a 24-hour clock. Open Filtros to see customized controls.

Every panel-owned caption, placeholder, accessible name, button title, action/source name and generated summary can be supplied through labels. Filter captions have independent userFilterLabel, columnFilterLabel, actionFilterLabel, dateFromFilterLabel and dateToFilterLabel overrides, while scopeAriaLabel names the activity selector independently of the panel title. Omitted caption overrides preserve existing label/placeholder defaults. Partial overrides retain the defaults; nested actions, actionVerbs and sourceLabels maps merge independently. Use the callback labels for complete phrases and plural rules rather than translating individual words. recordSummary can reorder the entire activity sentence.

import type { AuditHistoryPanelOptions } from '@revolist/revogrid-pro';

const options: AuditHistoryPanelOptions = {
  locale: 'es-ES',
  dateFormat: 'eu',
  timeFormat: '24h',
  timeZone: 'Europe/Madrid',
  labels: {
    title: 'Actividad',
    allTab: 'Toda la actividad',
    rowTab: 'Esta fila',
    cellTab: 'Esta celda',
    addFilter: 'Filtros',
    closeFilters: 'Listo',
    searchPlaceholder: 'Buscar…',
    searchAriaLabel: 'Buscar actividad',
    recordsSummary: n => `${n} ${n === 1 ? 'registro' : 'registros'}`,
    cellsSummary: n => `${n} ${n === 1 ? 'celda' : 'celdas'}`,
    rowsSummary: n => `${n} ${n === 1 ? 'fila' : 'filas'}`,
    scopedChangesSummary: (visible, total) => `${visible} de ${total}`,
    scopeLabel: (name, n) => `${name} (${n})`,
    additionalChanges: (target, n) => `${target} y ${n} más`,
    countLabel: n => new Intl.NumberFormat('es-ES').format(n),
    recordSummary: ({ user, verb, target, detail }) =>
      `${user} ${verb} ${target}${detail ? ` · ${detail}` : ''}`,
    dateFromChip: date => `Desde ${date}`,
    dateToChip: date => `Hasta ${date}`,
    actions: { 'cell-change': 'Edición', 'bulk-paste': 'Pegado' },
    actionVerbs: { 'cell-change': 'editó', 'bulk-paste': 'pegó' },
    sourceLabels: { manual: 'Usuario', api: 'Integración' },
  },
  tooltips: {
    totalRecords: 'Registros cargados',
    searchFilter: 'Buscar registros, usuarios y valores',
  },
  formatValue: value => value == null ? 'Sin valor' : String(value),
};
const panel = defineAuditHistoryPanel(panelElement, grid, options);

The example overrides a subset of labels. The complete label contract also includes all filter fields, export commands, restore actions, comparison headings, empty states, pagination, today/yesterday headings and the collapsed panel. actionLabel(type) and actionVerb(type) optionally connect dynamic action types to your translation service; returning undefined falls back to the configured maps. Record presentation fields take precedence over generated text, so supply those business descriptions in the application’s language. Column names come from the grid’s column definitions, with recorded names for historical columns. Users’ names and stored values remain application data.

tooltips customizes both help text and its accessible name; set an entry or the entire option to false to hide it. formatValue(value, { side, change }) formats before/after values consistently in the feed and comparison, including null, booleans, numbers and snapshots. Display formatting does not change audit records, filter matching or exported values.

dateFormat	Example date	Default clock
'eu'	14/10/2026	24-hour
'us'	10/14/2026	12-hour
'iso'	2026-10-14	24-hour
'long'	14. Oktober 2026 with de-DE	Locale
'locale' (default)	Localized short weekday/month/day	Locale

timeFormat: '12h' | '24h' | 'locale' overrides the clock independently of the date preset. locale accepts an Intl locale or fallback list, such as 'en-US', 'en-GB', 'de-DE' or 'ja-JP'. The panel uses the browser locale and timezone when omitted. timeZone accepts an IANA zone and controls record timestamps and their today/yesterday grouping. Native date-filter inputs retain the browser’s local wall-time semantics and native presentation; their chips use the configured date/clock formats and include both date and time.

For another format, supply formatDate(value, { mode, record }); it takes precedence over presets for timestamps ('time'), headings ('day') and filter chips ('filter'). To apply another language, replace options.labels with a new translation object and call panel.refresh(). Date/clock options can also be changed before refreshing, without remounting the panel.