update data grid

dist/index.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Datagrid(el: HTMLElement, options?: Datagrid.Options): Datagrid.Instance;
+
+declare namespace Datagrid {
+
+    interface Column {
+        /** Column header */
+        title?: string;
+        /** Column data path */
+        name?: string;
+        /** Default text align */
+        align?: string;
+        /** Column with */
+        width?: string;
+        /** Render */
+        render?: () => void;
+    }
+
+    interface Item {
+        [key: string]: any;
+    }
+
+    interface Options {
+        /** The data that will be displayed on the grid based on the columns attribute. */
+        data: Item[];
+        /** Each object represents a column of data to be displayed. The key 'name' refers to the data object key. */
+        columns: Column[];
+        /** Enable the pagination and define the number of items per page. */
+        pagination?: number;
+        /** Enable the search. Default: false */
+        search?: boolean;
+        /** The grid is editable. Default: false */
+        editable?: boolean;
+        /** Specifies the URL for fetching the data. */
+        url?: string;
+        /** Enable the remote functionality. Default: false */
+        remote?: boolean;
+        /** Called when a search happens. */
+        onsearch?: (self: object) => void
+        /** Called when the user changes the page. */
+        onchangepage?: (self: object) => void
+        /** Called when cell data is changed. */
+        onupdate?: (self: object, obj: object) => void
+    }
+
+    interface Instance {
+        /** Array<Object>	Change the state of data. */
+        data: Item[];
+        /**  Number	Change the page index. */
+        page: number;
+        /**  Number	Enable pagination. */
+        pagination: number;
+        /** Boolean	Enable search. */
+        search: boolean;
+        /** Function(sortBy: String, sortAsc: Boolean)	Sort the data. */
+        sort: (sortBy: string, sortAsc: boolean) => void;
+        /** Function(x: Number | String, y: Number, value: String)	Set the value of a cell. */
+        setValue: (x: number | string, y: number, value: string) => void;
+    }
+}
+
+export default Datagrid;

dist/react.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+import DatagridComponent from './index';
+
+interface Datagrid {
+    (): any
+    [key: string]: any
+}
+
+declare function Datagrid<Datagrid>(props: DatagridComponent.Options): any;
+
+export default Datagrid;

dist/react.js

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import Component from './index';
+
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})

dist/vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Datagrid {
+    (): any
+    [key: string]: any
+}
+
+declare function Datagrid<Datagrid>(props: Component.Options): any;
+
+export default Datagrid;

dist/vue.js

@@ -0,0 +1,45 @@
+import { h } from 'vue';
+import component from "./index";
+
+
+export default {
+    inheritAttrs: false,
+    mounted() {
+        let options = {
+            ...this.$attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            }
+        }
+    },
+    methods: {
+        updateState() {
+            for (let key in this.$attrs) {
+                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                    if (this.$attrs[key] !== this.current[key]) {
+                        this.current[key] = this.$attrs[key];
+                    }
+                }
+            }
+        }
+    }
+}