다국어

영어는 기본으로 들어 있습니다. 한국어, 중국어 간체·번체, 일본어, 베트남어, 태국어, 인도네시아어, 스페인어, 포르투갈어(브라질), 프랑스어, 독일어, 이탈리아어, 러시아어는 따로 import하므로 쓰는 언어만 번들에 포함됩니다. locale을 지정하지 않으면, 브라우저…

실행 예제14개 언어

그리드의 메뉴와 안내 문구를 14개 언어 중 하나로 바로 바꿉니다.

이 데모의 코드

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;
}

영어는 기본으로 들어 있습니다. 한국어, 중국어 간체·번체, 일본어, 베트남어, 태국어, 인도네시아어, 스페인어, 포르투갈어(브라질), 프랑스어, 독일어, 이탈리아어, 러시아어는 따로 import하므로 쓰는 언어만 번들에 포함됩니다. locale을 지정하지 않으면, 브라우저 언어의 언어팩이 등록돼 있을 때 그 언어를 쓰고 없으면 영어를 씁니다.

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: '조회 결과가 없습니다' } });