@revolist/revogrid 4.11.18 → 4.11.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.11.18",
+  "version": "4.11.20",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/readme.md

@@ -13,12 +13,10 @@
   <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
 </p>
 
-#
 
 <h3 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</a>.</h3>
 <p align="center">
 Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
-  
 </p>
 
 <p align="center">
@@ -155,57 +153,69 @@ yarn add @revolist/revogrid;
 
 In `<revo-grid />` we have developed a sophisticated Continuous Delivery (CD) system powered by GitHub Actions. This advanced system automatically builds and delivers grid versions across multiple frameworks, including React, Angular, Svelte, Vue 2, and Vue 3, with full type support. This ensures continuous version delivery, providing the latest grid enhancements and upgrades across all supported frameworks ✨. In the future (version 5), we are planning to switch to monorepo based development.
 
-- [JavaScript](https://rv-grid.com/guide/);
-- [VueJs](https://rv-grid.com/guide/vue3/);
-- [Svelte](https://rv-grid.com/guide/svelte/);
-- [React](https://rv-grid.com/guide/react/);
-- [Angular](https://rv-grid.com/guide/angular/).
 
 
+- [![VueJs](./assets/vuejs.svg) Vue 3](https://rv-grid.com/guide/vue3/) and [Vue 2](https://rv-grid.com/guide/vue2/)
+- [![React](./assets/react.svg) React](https://rv-grid.com/guide/react/)
+- [![Angular](./assets/angular.svg) Angular](https://rv-grid.com/guide/angular/)
+- [![Svelte](./assets/svelte.svg) Svelte](https://rv-grid.com/guide/svelte/)
+- [![JavaScript](./assets/js.svg) JavaScript](https://rv-grid.com/guide/)
+
 ## Basic Usage
 
 RevoGrid functions as a web component. Simply place the component on your page and access its properties as you would with any other HTML element. It also offers multiple ways to integrate our grid into your project:
 
 - [Import the grid into your project](https://rv-grid.com/guide/installation)
 
-### JavaScript Data Grid Usage
+### JavaScript Data Grid Simple Usage
+
+```javascript
+// Select the RevoGrid element from the DOM
+const grid = document.querySelector('revo-grid');
+
+// Define the columns for the grid
+grid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];
+// Define the data source for the grid
+grid.source = [{ name: 'New Item', details: 'Item Description' }];
+```
+
+### Custom cell template
 
 ```javascript
 // Select the RevoGrid element from the DOM
 const grid = document.querySelector('revo-grid');
 
 // Define the columns for the grid
-const columns = [
-  { prop: 'name', name: 'First Column' }, // Simple column definition
+grid.columns = [
   {
-    prop: 'details',
-    name: 'Second Column',
-    // Custom cell template for the 'details' column
-    cellTemplate: (createElement, props) => {
-      return createElement(
+    prop: 'name',
+    name: 'Custom cell template',
+    // Custom cell template
+    cellTemplate(h, { value }) {
+      return h(
         'div',
         {
           style: { backgroundColor: 'red' }, // Styling the cell background
           class: { 'inner-cell': true }, // Adding a CSS class
         },
-        props.model[props.prop] || '' // Display the cell content or an empty string if undefined
+        value || '' // Display the cell content or an empty string if undefined
       );
     },
   },
 ];
-
 // Define the data source for the grid
-const items = [{ name: 'New Item', details: 'Item Description' }];
-
-// Assign the columns and data source to the grid
-grid.columns = columns;
-grid.source = items;
+grid.source = [{ name: 'New Item' }];
 ```
 
-
 [Example and guide](https://rv-grid.com/guide/)
 
 
+- [![VueJs](./assets/vuejs.svg) Vue 3](https://rv-grid.com/guide/vue3/) and [Vue 2](https://rv-grid.com/guide/vue2/)
+- [![React](./assets/react.svg) React](https://rv-grid.com/guide/react/)
+- [![Angular](./assets/angular.svg) Angular](https://rv-grid.com/guide/angular/)
+- [![Svelte](./assets/svelte.svg) Svelte](https://rv-grid.com/guide/svelte/)
+- [![JavaScript](./assets/js.svg) JavaScript](https://rv-grid.com/guide/)
+
 ## Versions
 
 - **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.