Languages

English is built in. Korean, Simplified and Traditional Chinese, Japanese, Vietnamese, Thai, Indonesian, Spanish, Portuguese (Brazil), French, German,…

Live demo14 languages

Switch the grid UI between 14 languages, from Korean and Japanese to Vietnamese, Thai and Russian.

Code for this demo

import { createGrid, type LocalePack } from '@freegridjs/core';
import de from '@freegridjs/core/locales/de';
import en from '@freegridjs/core/locales/en';
import es from '@freegridjs/core/locales/es';
import fr from '@freegridjs/core/locales/fr';
import ja from '@freegridjs/core/locales/ja';
import ko from '@freegridjs/core/locales/ko';
import zhCN from '@freegridjs/core/locales/zh-CN';
import zhTW from '@freegridjs/core/locales/zh-TW';
import vi from '@freegridjs/core/locales/vi';
import th from '@freegridjs/core/locales/th';
import id from '@freegridjs/core/locales/id';
import ru from '@freegridjs/core/locales/ru';
import ptBR from '@freegridjs/core/locales/pt-BR';
import it from '@freegridjs/core/locales/it';
import { demoColumns, makeRows } from '../data';
import { select, text, tr, type DemoContext } from '../ui';

const PACKS: Record<string, LocalePack> = { en, ko, 'zh-CN': zhCN, 'zh-TW': zhTW, ja, vi, th, id, es, 'pt-BR': ptBR, fr, de, it, ru };

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: [], // empty on purpose: the "no rows" message is translated too
    rowSelection: 'multiple',
    locale: PACKS[lang],
    sideBar: true,
  });

  select(ctx, tr(lang, { en: 'Grid language', ko: '그리드 언어' }), [
    ['en', 'English'], ['ko', '한국어'], ['zh-CN', '简体中文'], ['zh-TW', '繁體中文'], ['ja', '日本語'], ['vi', 'Tiếng Việt'], ['th', 'ไทย'], ['id', 'Bahasa Indonesia'], ['es', 'Español'], ['pt-BR', 'Português (Brasil)'], ['fr', 'Français'], ['de', 'Deutsch'], ['it', 'Italiano'], ['ru', 'Русский'],
  ], lang, code => {
    grid.setLocale(PACKS[code]);
    ctx.log(`setLocale('${code}') → ${PACKS[code].noRows}`);
  });
  select(ctx, tr(lang, { en: 'Rows', ko: '데이터' }), [['0', tr(lang, { en: 'Empty', ko: '비어 있음' })], ['1000', '1,000']], '0',
    v => grid.setData(v === '0' ? [] : makeRows(1000)));
  text(ctx, tr(lang, { en: 'Open a column menu (⋮) or the Columns panel to see the translations.', ko: '컬럼 메뉴(⋮)나 컬럼 패널을 열어 번역을 확인하세요.' }));
  return grid;
}

English is built in. Korean, Simplified and Traditional Chinese, Japanese, Vietnamese, Thai, Indonesian, Spanish, Portuguese (Brazil), French, German, Italian and Russian are separate imports so you only ship what you use. Without a locale option the grid picks the browser language when that pack is registered, otherwise English.

import ko from '@freegridjs/core/locales/ko';
createGrid(el, { columns, data, locale: ko });

// or register once and use codes
import { registerLocale } from '@freegridjs/core';
import ja from '@freegridjs/core/locales/ja';
registerLocale(ja);
grid.setLocale('ja');

// override a few messages
createGrid(el, { columns, data, locale: { ...ko, noRows: '조회 결과가 없습니다' } });