Data grid

.eslintrc.js

@@ -18,4 +18,4 @@ module.exports = {
         'no-control-regex': 'off',
         'no-empty': 'off'
     }
-}
+};

.prettierrc

@@ -1,7 +1,7 @@
 {
     "trailingComma": "none",
     "tabWidth": 4,
-    "semi": false,
+    "semi": true,
     "singleQuote": true,
     "printWidth": 120,
     "endOfLine": "auto"

README.md

@@ -2,25 +2,20 @@
 
 [Official website and documentation is here](https://lemonadejs.net/components/data-grid)
 
-You can utilize this component with Vanilla JavaScript, LemonadeJS, or React.
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
 
-Lemonade data grid is a lightweight JavaScript library that allows you to effortlessly create data grids featuring search, pagination, and editable rows. With the lemonade data grid, you can conveniently load JSON data, define columns, and seamlessly render the grid within your HTML.
-
-## Author
-
--   Name: Nicolas Jessé
--   GitHub: [nicolasjesse](https://github.com/nicolasjesse)
+The JavaScript Data Grid is a lightweight library that effortlessly enables you to embed lightweight data grids into your applications. Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS, and Angular, this versatile component allows you to conveniently load JSON data, define columns, and seamlessly render the grid within your HTML. Enjoy robust features like search, pagination, and editable rows, empowering you to build interactive and feature-rich data grid experiences.
 
 ## Features
 
--   Lightweight: Lemonade data grid is only about 4 Kbytes in size, making it fast and easy to load.
--   Customizable: You can define columns and user-defined actions to suit your specific use case.
--   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date.
--   Integration: DataGridLM can be used as a standalone library or integrated with LemonadeJS or React.
+-   Lightweight: The lemonade data grid is only about 4 KBytes;
+-   Customizable: You can define columns and user-defined actions to suit your use case;
+-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
 
 ## Getting Started
 
-Utilizing DataGridLM is straightforward. Just include the JavaScript file in your project and instantiate a new grid using the provided API. From there, you can effortlessly load data, define columns, and incorporate custom user actions as required.
+You can install using NPM or using directly from a CDN.
 
 ### npm Installation
 
@@ -32,7 +27,7 @@ $ npm install @lemonadejs/datagrid
 
 ### CDN
 
-To use DataGrid via a CDN, include the following script tags in your HTML file:
+To use data grid via a CDN, include the following script tags in your HTML file:
 
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
@@ -41,11 +36,11 @@ To use DataGrid via a CDN, include the following script tags in your HTML file:
 
 ### Usage
 
-There is two ways to instantiate a DataGrid, Programatically or Dinamically
+There are two ways to instantiate a Data Grid, Programmatically or Dynamically
 
-#### Programatically
+#### Programmatically
 
-Create an instance of the data grid by providing the DOM element and the **_options_** object.
+Create an instance of the data grid by providing the DOM element, and the **_options_** object.
 
 ```html
 <div id="root"></div>
@@ -66,16 +61,13 @@ Create an instance of the data grid by providing the DOM element and the **_opti
 
 #### Dynamically with LemonadeJS
 
-The DataGrid is invoked within the template, with the options being passed as properties.
+The LemonadeJS data grid is invoked within the template, with the options being passed as properties.
 
 ```javascript
 import Datagrid from '@lemonadejs/datagrid'
-import lemonade from 'lemonadejs'
-
-lemonade.setComponents({ Datagrid })
 
 export default function Component() {
-    let self = this
+    let self = this;
 
     self.data = [
         { id: 1, person: 'Maria', age: 28 },
@@ -118,8 +110,85 @@ Here are a few examples of DataGridLM in action:
 -   [Example with Large Data Sets](https://lemonadejs.net/components/data-grid#example-2)
 -   [Example with Data Addition and Deletion](https://lemonadejs.net/components/data-grid#example-3)
 
+<br>
+
+## React wrapper
+
+Utilize the Data Grid React component to integrate the grid into your React applications seamlessly. This wrapper simplifies the process, enabling you to display, manipulate, and interact with large datasets using React's declarative and component-based approach. Enjoy the convenience and power of the Data Grid, making data management a breeze within your React projects.
+
+```npm install @lemonadejs/react-data-grid```
+
+```
+import React, { useRef, useState } from "react";
+import Datagrid from '@lemonadejs/react-data-grid';
+ 
+default export function App() {
+    const datagrid = useRef();
+ 
+    const [columns, setColumns] = useState([
+        { name: 'name', title: 'Product', width: '200px', align: 'left' },
+        { name: 'price', title: 'Price', width: '100px', align: 'center' },
+        { name: 'description', title: 'Description', width: '300px', align: 'left' },
+    ])
+ 
+    const [data, setData] = useState([
+        {
+            id: 1,
+            name: "T-Shirt",
+            price: 19.99,
+            description: "This is a high-quality cotton t-shirt in a variety of colors and sizes.",
+        },
+        {
+            id: 2,
+            name: "Jeans",
+            price: 49.99,
+            description: "These are premium denim jeans in a slim-fit style.",
+        },
+        {
+            id: 3,
+            name: "Sneakers",
+            price: 79.99,
+            description: "These are comfortable and stylish sneakers in a range of colors.",
+        },
+        {
+            id: 4,
+            name: "Backpack",
+            price: 39.99,
+            description: "This is a durable and spacious backpack with multiple compartments.",
+        },
+    ])
+ 
+    // This function assigns a value to the second cell of the column 'name'.
+    const setItemValue = function () {
+        datagrid.current.setValue('name', 1, 'Blue Jeans')
+    }
+ 
+    // This function update the current page in pagination to 2.
+    const goToPage2 = function () {
+        datagrid.current.page = 1;
+    }
+ 
+    return (<>
+        <Datagrid
+            ref={datagrid}
+            data={data}
+            columns={columns}
+            pagination={2}
+            onupdate={() => console.log('Datagrid was updated')}
+            onchangepage={() => console.log('Datagrid page changed')}
+        />
+        <button onclick={() => goToPage2()}>Go To Page 2</button>
+        <button onclick={() => setItemValue()}>Change Value in 'Name' Second Line</button>
+    </>);
+}
+```
+
 ## Development
 
+You can clone the project on github.
+
+git clone https://github.com/lemonadejs/data-grid.git
+
 ### Running the project
 
 To run the project in development mode, use the following commands:
@@ -153,7 +222,7 @@ $ npm run test:coverage
 
 ## Contributing
 
-DataGridLM is an open source project and contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. If you'd like to contribute code, please fork the repository and submit a pull request.
+The LemonadeJS data grid is an open-source project, and contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. To contribute code, please fork the repository and submit a pull request.
 
 Ensure that you run the formatting plugins to maintain consistent code patterns. You can use the following command to do that:
 
@@ -163,7 +232,7 @@ $ npm run format
 
 ## License
 
-DataGridLM is released under the MIT.
+The LemonadeJS data grid is released under the MIT.
 
 ## Other Tools
 

index.html

@@ -38,7 +38,7 @@
                     { name: 'age', title: 'Age', align: 'center' }
                 ],
                 search: true
-            })
+            });
         </script>
     </body>
 </html>

mocha.config.js

@@ -1,19 +1,19 @@
 #! /usr/bin/env node
 
-require('jsdom-global')(undefined, { url: 'https://localhost' })
-const lemonade = require('lemonadejs')
-const Datagrid = require('./src/datagrid.js')
+require('jsdom-global')(undefined, { url: 'https://localhost' });
+const lemonade = require('lemonadejs');
+const Datagrid = require('./src/datagrid.js');
 
-global.lemonade = lemonade
-global.Datagrid = Datagrid
-global.root = document.createElement('div')
-global.root.style.width = '100%'
-global.root.style.height = '100%'
-document.body.appendChild(global.root)
+global.lemonade = lemonade;
+global.Datagrid = Datagrid;
+global.root = document.createElement('div');
+global.root.style.width = '100%';
+global.root.style.height = '100%';
+document.body.appendChild(global.root);
 
 exports.mochaHooks = {
     afterEach(done) {
         // destroy datagrid component
-        done()
+        done();
     }
-}
+};