Locales

Grid.js has support for various different languages:

• ar_SA
• cn_CN
• de_De
• en_US
• es_ES
• fa_IR
• fr_FR
• id_ID
• it_IT
• tr_TR
• ja_JP
• ko_KR
• nb_NO
• pt_BR
• pt_PT
• ru_RU
• tr_TR
• ua_UA

Installing a Locale

Import your language file first:

import { frFR } from "gridjs/l10n";

note

All locales are combined into one file. There is a UMD format for web-browsers as well: e.g. gridjs/l10n/dist/l10n.umd.js: https://unpkg.com/gridjs/l10n/dist/l10n.umd.js

Then pass it to the language setting of your Grid.js:

Live Editor

const grid = new Grid({ columns: ['Name', 'Email', 'Title'], sort: true, search: true, pagination: { limit: 5 }, data: Array(50).fill().map(x => [ faker.name.findName(), faker.internet.email(), faker.name.title(), ]), language: frFR });

const grid = new Grid({
  columns: ['Name', 'Email', 'Title'],
  sort: true,
  search: true,
  pagination: {
    limit: 5
  },
  data: Array(50).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    faker.name.title(),
  ]),
  language: frFR
});

Result

Loading...

Also, you can easily customize Grid.js messages and add your language. Simply extend the language config to replace the strings:

Live Editor

const grid = new Grid({ columns: ['Name', 'Email', 'Title'], sort: true, search: true, pagination: { limit: 5 }, data: Array(50).fill().map(x => [ faker.name.findName(), faker.internet.email(), faker.name.title(), ]), language: { 'search': { 'placeholder': '🔍 Search...' }, 'pagination': { 'previous': '⬅️', 'next': '➡️', 'showing': '😃 Displaying', 'results': () => 'Records' } } });

const grid = new Grid({
  columns: ['Name', 'Email', 'Title'],
  sort: true,
  search: true,
  pagination: {
    limit: 5
  },
  data: Array(50).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    faker.name.title(),
  ]),
  language: {
    'search': {
      'placeholder': '🔍 Search...'
    },
    'pagination': {
      'previous': '⬅️',
      'next': '➡️',
      'showing': '😃 Displaying',
      'results': () => 'Records'
    }
  }
});

Result

Loading...

Creating a Locale

Copy the en_US file, update the values and send a PR!