docs updated

Author: sa-si-dev

README.md

@@ -17,6 +17,8 @@
 * Hide columns
 * Sticky table header
 * Sticky columns
+* Theming
+* Internationalization
 
 ## Commands
 

docs/_sidebar.md

@@ -4,6 +4,8 @@
 * [Setup](/setup.md)
 * [API Integration](api-integration.md)
 * [Properties](properties.md)
+* [Theming](/theming.md)
+* [Internationalization](/internationalization.md)
 * [Setup in ES5](/setup-es5.md)
 * [Q&A](https://github.com/{{repo}}/discussions/categories/q-a)
 * [Changelog](https://github.com/{{repo}}/releases)

docs/assets/sample-grid/grid.js

@@ -49,6 +49,8 @@ class SampleGrid extends GridComponent {
       // perPageOptions: [25, 50, 100, 200],
       showFilters: true,
       showSettings: true,
+      // theme: 'dArk',
+      // language: 'Tamil',
     };
 
     super(options);

docs/assets/sample-grid/i18n.js

@@ -0,0 +1,10 @@
+gridCompI18n.default['first.page'] = 'Go to start';
+
+Object.assign(gridCompI18n.default, {
+  'last.page': 'Go to end',
+});
+
+gridCompI18n.tamil = {
+  'first.page': 'முதல் பக்கம்',
+  'last.page': 'கடைசி பக்கம்',
+};

docs/get-started.md

@@ -18,6 +18,8 @@ Every project has its own way of data handling and business logic. Considering t
 * Hide columns
 * Sticky table header
 * Sticky columns
+* Theming
+* Internationalization
 
 <script>
   initPageGetStarted();

docs/index.html

@@ -13,10 +13,10 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
 
     <link rel="stylesheet" href="assets/external/vue.css" />
-    <link rel="stylesheet" href="assets/build/grid-core.min.css" />
     <link rel="stylesheet" href="assets/build/popover.min.css" />
     <link rel="stylesheet" href="assets/build/tooltip.min.css" />
     <link rel="stylesheet" href="assets/build/virtual-select.min.css" />
+    <link rel="stylesheet" href="assets/build/grid-core.min.css" />
     <link rel="stylesheet" href="assets/styles.css" />
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -40,6 +40,7 @@
     <script src="assets/build/virtual-select.min.js"></script>
 
     <script src="assets/sample-grid/db.js"></script>
+    <script src="assets/sample-grid/i18n.js"></script>
     <script src="assets/sample-grid/grids-config.js"></script>
     <script src="assets/sample-grid/utils.js"></script>
     <script src="assets/sample-grid/filters-utils.js"></script>

docs/internationalization.md

@@ -0,0 +1,40 @@
+## Internationalization
+
+By default, all the text in this plugin would be in the `English` language only. Project developers could change all the default texts or use completely different languages.
+
+To override or define a new language, set properties in the `JavaScript` global object `gridCompI18n`.
+
+```js
+/** to override default text */
+gridCompI18n.default['first.page'] = 'Go to start';
+
+/** or */
+Object.assign(gridCompI18n.default, {
+  'last.page': 'Go to end',
+  ...
+});
+
+/** to define a new language */
+gridCompI18n.tamil = {
+  'first.page': 'முதல் பக்கம்',
+  'last.page': 'கடைசி பக்கம்',
+  ...
+};
+```
+
+!> Refer [i18n.js](https://github.com/{{repo}}/blob/main/src/i18n.js) for all available texts
+
+### Set language
+
+```js
+class GridComponent extends GridCoreComponent {
+  constructor(options) {
+    let defaultOptions = {
+      language: 'tamil', /** TODO - set language */
+      ...
+    };
+
+    super(Object.assign(defaultOptions, options));
+  }
+}
+```

docs/properties.md

@@ -19,6 +19,8 @@
 | showFilters | Boolean | false | Show filters button to open filters |
 | showSettings | Boolean | false | Show settings button to customize columns |
 | showSerialNumberCol | Boolean | false | Show serial number column |
+| theme | String | light | Default available themes are light and dark. But you could define custom themes and use here. ([more details](theming.md)) |
+| language | String | default | Language name to get i18n text ([more details](internationalization.md)) |
 | tooltipFontSize | String | 14px | Font size for tooltip |
 | tooltipAlignment | String | center | CSS Text alignment for tooltip |
 | tooltipEnterDelay | String | 300 | Delay time before showing tooltip (in milliseconds) |

docs/setup.md

@@ -38,6 +38,15 @@ class SampleGrid extends GridComponent {
 
     super(Object.assign(options));
   }
+
+  /** custom column render metod. it needs to declared in column details (columns[].renderer) to use it */
+  rendererEmailCol(colData, rowData) {
+    let email = rowData[colData.key];
+    let textTooltip = this.getTooltipAttrText(email, true);
+    let html = `<a class="grid-comp-col-text" ${textTooltip} href="#/demo?email=${email}">${email}</a>`;
+
+    return html;
+  }
 }
 
 /** initialize grid */

docs/theming.md

@@ -0,0 +1,42 @@
+## Theming
+
+By default, this plugin has `Light` and `Dark` themes. Project developers could change the colors of these default themes or add a new custom theme by defining CSS variables.
+
+Define CSS variables under the class name `.grid-comp-theme-[THEME_NAME]`
+
+```css
+.grid-comp-theme-blue {
+  --grid-comp-color-primary-bg: blue;
+  ...
+}
+```
+
+!> Refer [themes.scss](https://github.com/{{repo}}/tree/main/src/sass/partials/themes.scss) for available CSS variables.
+
+
+### Using theme
+
+You could use the theme by setting `theme` property in any grid class.
+
+```js
+class GridComponent extends GridCoreComponent {
+  constructor(options) {
+    let defaultOptions = {
+      theme: 'blue', /** TODO - set theme */
+      ...
+    };
+
+    super(Object.assign(defaultOptions, options));
+  }
+}
+```
+
+Theme could be changed runtime by calling `setTheme` method
+
+```js
+/** to change for a specific grid */
+sampleGrid.setTheme('blue');
+
+/** to change for all active grid instances */
+GridComponent.setTheme('blue');
+```