@revolist/react-datagrid 4.0.50 → 4.8.1

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://revolist.github.io/revogrid">
+  <a href="https://rv-grid.com">
     <img src="./assets/logo.svg" alt="RevoGrid" height="150" />
   </a>
 </p>
@@ -20,7 +20,7 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 </p>
 
 <p align="center">
-  <a href="https://revolist.github.io/revogrid">Demo and API</a> •
+  <a href="https://rv-grid.com">Demo and API</a> •
   <a href="#key-features">Key Features</a> •
   <a href="#basic-usage">How To Use</a> •
   <a href="#installation">Installation</a> •
@@ -75,7 +75,7 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
   - Cell editor (use predefined or apply your own custom editors and cell types).
   - Cell properties (define custom properties for rendered cells).
 
-- **Column Types**: [More details](https://revolist.github.io/revogrid/guide/column.types.html)
+- **Column Types**: [More details](https://rv-grid.com/guide/column/#Column-Formats)
   - Text/String (default).
   - Number.
   - Select.
@@ -98,13 +98,13 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 - **Plugin System**: Create custom plugins or extend existing ones easily.
 
-- **Additional Customizations and Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://revolist.github.io/revogrid).
+- **Additional Customizations and Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).
 
 <br>
 
 
 
-### Usage React [Example](https://codesandbox.io/s/data-vue-test-3wkzi?file=/src/App.vue)
+### Usage React
 
 With NPM:
 
@@ -120,21 +120,13 @@ yarn add @revolist/react-datagrid;
 
 ```tsx
 // App.tsx
-import { RevoGrid, Template, Editor, type EditorType } from '@revolist/react-datagrid';
-import { ColumnDataSchemaModel, Editors } from '@revolist/revogrid';
-import { createContext, useContext } from 'react';
-
-/**
- * Showcase
- */
-export const LevelContext = createContext('My custom context to pass to cell');
+import { RevoGrid, Template, Editor, type EditorType, type ColumnDataSchemaModel, type Editors } from '@revolist/react-datagrid';
 
 /**
  * Custom cell component
  */
-const Cell = ({ model, prop }: ColumnDataSchemaModel) => {
-  const level = useContext(LevelContext);
-  return <div><strong title={level}>{model[prop]}</strong></div>;
+const Cell = ({ model, prop, value }: ColumnDataSchemaModel) => {
+  return <div><strong>{value}</strong></div>;
 };
 
 /**
@@ -180,28 +172,63 @@ export default App
 
 ```
 
+[Example and guide](https://rv-grid.com/guide/react/)
 
-## Versions
 
-- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.
-- **3.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md).
-This version features new component loading, ESM modules, Bootstrap support, and much [more](./docs/guide/migration.md).
-- **4.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md). In this version, we rethought our framework approach, updated typings, fixed major issues, updated core and significantly improved overall performance. The grid is now much faster, with better plugin support and full framework support for Angular, React, and Vue, along with partial support for Ember and Svelte. Redesigned the documentation, and added more examples.
 
+## 🚨 Repository Notice 🚨
 
+**TL;DR:** This repo is read-only and will be **deprecated** in v5+ in favor of monorepos. Post issues [here](https://github.com/revolist/revogrid). Happy coding! 🖥️💻
 
-## Sponsors
 
-We would like to extend our heartfelt gratitude to our sponsor for their generous support. Their contributions help us maintain and develop RevoGrid, ensuring continuous improvements and updates. If you are using RevoGrid in your project and would like to support its development, consider becoming a sponsor.
+## Versions
 
-### Our Sponsors
+- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.
+- **3.0+**: Breaking changes introduced:
+    -   Removed the redundant viewport component.
+    -   Renamed classes to support Bootstrap and other libraries:
+        -   `row` -> `rgRow`
+        -   `col` -> `rgCol`
+        -   `data-cell` -> `rgCell`
+        -   `data-header-cell` -> `rgHeaderCell`
+    -   Migrated all method names to lowercase to align with modern event naming conventions. For example, `afterEdit` is now `afteredit`. Check the API for details.
+    -   Added support for pure ESM modules to enable the use of the grid in all modern frontend tooling like Vite, Parcel, etc. You can now import custom elements without lazy loading. Note that you are responsible for polyfills.
+
+
+- **4.0+**: Breaking changes introduced. See the [migration guide](https://rv-grid.com/guide/migration). 
+
+-   Redesigned type support:
+        - Removed deprecated namespaces:
+            - **Before**: `RevoGrid.ColumnDataSchemaRegular`
+            - **Now**: `ColumnDataSchemaRegular`;
+        - Improved type import:
+            - **Before**: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`
+            - **Now**: `import { ColumnDataSchemaRegular } from '@revolist/revogrid'`.
+        - Changed viewport type names everywhere. For example, before: `rowDefinitions: [{ type: "row", index: 0, size: 145 }]`, after: `rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]`.
+    -   Updated [event](https://rv-grid.com/guide/api/revoGrid.html#Events) naming convention. Review your [event](https://rv-grid.com/guide/api/revoGrid.html#Events) usage. [Event names](https://rv-grid.com/guide/api/revoGrid.html#Events) are all lowercase now and are aligned with modern event naming conventions. For example, `afterEdit` -> `afteredit`.
+
+-   **Major improvements**:
+    -   Rethought the entire framework approach. Introduced Pro version with advance support and pro features.
+    -   Introduced slot support.
+    -   Updated scrolling system for better mobile support.
+    -   Advance template support. Introduced `additionalData` for templates and editors. `Prop` gives access to parent/root app context.
+    -   Redesigned the documentation.
+    -   Fixed major issues and significantly improved overall performance, making the grid multiple time faster.
+    -   Enhanced plugin support - now with full access to grid providers.
+    -   Updated documentation.
+    -   Provided full framework support and native render for  Angular, React, Svelte and Vue.
+
+
+## Our Sponsors
+
+We would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid, ensuring continuous improvements and updates.
 
 [![Altruistiq](https://cdn.prod.website-files.com/62cd69e08130a1a33f5ef900/6310b4d500e971695db5e9c3_615b5db69ce8931a276e5ed2_Social_Icons_AQ_3_32x32.png)](https://altruistiq.com)
 
 
 ### Become a Sponsor
 
-If you or your company would like to support the ongoing development of RevoGrid, please consider becoming a sponsor. Your support will help us continue to improve the project and provide the best possible tool for the community.
+If you or your company would like to support the ongoing development of RevoGrid, please consider becoming a sponsor or use or [Pro version](https://rv-grid.com/pro/). Your support will help us continue to improve the project and provide the best possible tool for the community.
 
 [![Sponsor Us](https://img.shields.io/badge/Sponsor%20Us-%F0%9F%92%96-brightgreen)](https://opencollective.com/revogrid)
 

package/dist/react-datagrid.js

@@ -200,6 +200,7 @@ const Template = (ReactComponent, customProps) => {
     props.addition = addition;
     let lastEl = null;
     return h("span", {
+      key: `${p.prop}-${p.rowIndex}`,
       ref: (el) => {
         lastEl = TemplateConstructor(el, ReactComponent, props, lastEl);
       }
@@ -226,7 +227,9 @@ class EditorAdapter {
     this.renderedComponent = null;
   }
   render(h) {
+    var _a;
     return h("span", {
+      key: `${this.column.prop}-${((_a = this.editCell) == null ? void 0 : _a.rowIndex) || 0}`,
       ref: (el) => this.renderedComponent = TemplateConstructor(
         el,
         this.EditorComponent,

package/dist/react-datagrid.umd.cjs

@@ -200,6 +200,7 @@ var __publicField = (obj, key, value) => {
       props.addition = addition;
       let lastEl = null;
       return h("span", {
+        key: `${p.prop}-${p.rowIndex}`,
         ref: (el) => {
           lastEl = TemplateConstructor(el, ReactComponent, props, lastEl);
         }
@@ -226,7 +227,9 @@ var __publicField = (obj, key, value) => {
       this.renderedComponent = null;
     }
     render(h) {
+      var _a;
       return h("span", {
+        key: `${this.column.prop}-${((_a = this.editCell) == null ? void 0 : _a.rowIndex) || 0}`,
         ref: (el) => this.renderedComponent = TemplateConstructor(
           el,
           this.EditorComponent,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@revolist/react-datagrid",
   "sideEffects": false,
-  "version": "4.0.50",
+  "version": "4.8.1",
   "description": "React DataGrid Spreadsheet component with native cell render support",
-  "main": "./dist/react-datagrid.umd.js",
+  "main": "./dist/react-datagrid.umd.cjs",
   "module": "./dist/react-datagrid.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -64,7 +64,7 @@
   "homepage": "https://github.com/revolist/revogrid#readme",
   "license": "MIT",
   "dependencies": {
-    "@revolist/revogrid": "4.0.50"
+    "@revolist/revogrid": "4.8.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",