feat: adding i18n

Author: afshinm

docs/examples/i18n.md

@@ -18,7 +18,43 @@ keywords:
 
 import { LiveExample } from "../../lib/liveExample.js";
 
-You can easily customize Grid.js messages and add your language. Simply extend the `language` config to replace the strings:
+Grid.js has support for multiple languages. Import your language file first:
+
+```js
+import { frFR } from "gridjs/dist/gridjs.lang.es";
+```
+
+:::note
+"es" in `gridjs/dist/gridjs.lang.es` refers to the file format (ECMAScript). All language files are combined into one file.
+There is a UMD format for web-browsers as well: `gridjs/dist/gridjs.lang`
+:::
+
+Then pass it to the `language` setting of your Grid.js:
+
+<LiveExample children={
+`
+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
+});
+`
+} />
+
+:::tip
+You can find a list of supported languages here https://github.com/grid-js/gridjs/tree/master/packages/gridjs/src/i18n
+:::
+
+Also, you can easily customize Grid.js messages and add your language. Simply extend the `language` config to replace the strings:
 
 <LiveExample children={
 `
@@ -54,3 +90,5 @@ const grid = new Grid({
 :::tip
 See [en_US](https://github.com/grid-js/gridjs/blob/master/packages/gridjs/src/i18n/en_US.ts) for a full list of messages.
 :::
+
+

lib/liveExample.js

@@ -1,4 +1,5 @@
 import { Grid, html, h, createRef as gCreateRef, Component as gComponent, PluginPosition, BaseComponent } from "gridjs";
+import { esES, frFR } from "gridjs/dist/gridjs.lang.es";
 import CodeBlock from "@theme/CodeBlock";
 import React, {Component, useEffect, useRef} from "react";
 import * as faker from 'faker';
@@ -25,7 +26,7 @@ function () {
     <div ref={wrapperRef} />
   );
 }
-` } live={true} scope={{ Grid, html, h, gCreateRef, gComponent, PluginPosition, BaseComponent, CodeBlock, useEffect, useRef, faker, ...this.props.scope }} />
+` } live={true} scope={{ Grid, html, h, gCreateRef, gComponent, PluginPosition, BaseComponent, CodeBlock, useEffect, useRef, faker, esES, frFR, ...this.props.scope }} />
     )
   }
 }