@azrico/reactgrid 1.1.13 → 1.1.14

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src';
+import { AzGrid } from './src';
+export default AzGrid;

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './src';
+import { AzGrid } from './src';
+export default AzGrid;

package/dist/src/example.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export * from './views/DataGrid';
+export declare function ExampleGrid(): JSX.Element;
+export default ExampleGrid;

package/dist/src/example.js

@@ -0,0 +1,95 @@
+export * from './views/DataGrid';
+import AzGrid from './views/DataGrid';
+import React from 'react';
+const columns = [
+    {
+        name: 'name',
+        title: 'Category',
+        defaultFlex: 1,
+    },
+];
+const leftColumns = ['username', 'row'];
+const customColumns = [
+    {
+        name: 'job',
+        render: () => {
+            return React.createElement("div", null, "test");
+        },
+    },
+];
+const filterValue = [
+    {
+        name: 'name',
+        operator: 'contains',
+        type: 'string',
+        value: '',
+    },
+];
+const contextMenuItems = ['test'];
+function getData() {
+    const fd = [];
+    for (let index = 0; index < 200; index++) {
+        fd.push({ __table_id: String(index), name: 'user-' + index, age: 20 });
+        //if (index % 5 == 0) {
+        //	const sub_selfid = 's' + index;
+        //	fd.push({
+        //		__table_id: sub_selfid,
+        //		__parent__table_id: String(index),
+        //		name: 'sub-' + index,
+        //		age: 20,
+        //	});
+        //	if (index % 2 == 0) {
+        //		const sub2_selfid = 'ss' + index;
+        //		fd.push({
+        //			__table_id: sub2_selfid,
+        //			__parent__table_id: sub_selfid,
+        //			name: 'sub2-' + index,
+        //			age: 20,
+        //		});
+        //	}
+        //}
+    }
+    return fd;
+}
+export function ExampleGrid() {
+    const [ds_reset, set_ds_reset] = React.useState(0);
+    const dataSource = React.useCallback(async (dt) => {
+        //console.log('Start loading');
+        return await new Promise((resolve) => {
+            setTimeout(() => {
+                //console.log('end loading');
+                resolve(getData());
+            }, 1000);
+        });
+    }, [ds_reset]);
+    const onRowDoubleClick = React.useCallback((index, rowdata) => {
+        console.log(rowdata?.data || rowdata);
+    }, []);
+    const onRowClick = React.useCallback((index, rowdata) => {
+        //console.log(rowdata?.data || rowdata);
+    }, []);
+    function rst_ds() {
+        //console.log('rst_ds');
+        set_ds_reset((s) => s + 1);
+    }
+    return (React.createElement(AzGrid, { dark: true, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, 
+        // allowChildRows
+        // onSelectionChange={onSelectionChange}
+        // selected={selected}
+        contextMenuItems: contextMenuItems, 
+        // customColumns={customColumns}
+        columns: columns, 
+        // leftColumns={leftColumns}
+        gridOptions: {
+        // defaultFilterValue: filterValue,
+        // remoteFilter: false,
+        // multiSelect: true,
+        // pagination: 'local',
+        // defaultLimit: 100,
+        // limit: 100,
+        // pageSizes: [100],
+        // rowIndexColumn: true,
+        // checkboxColumn: true,
+        }, dataSource: dataSource }));
+}
+export default ExampleGrid;

package/dist/src/func/helpers.d.ts

@@ -0,0 +1,29 @@
+type mrow = {
+    __parent__table_id: any;
+    __table_id: any;
+    __children?: any[];
+};
+export declare function fix_parent_child_relations<T extends mrow>(rows: T[]): T[];
+export declare class func_selection {
+    static getVirtualElement(x?: number, y?: number): () => {
+        getBoundingClientRect: () => {
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    static generateGetBoundingClientRect(x?: number, y?: number): () => {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    static get_selectedText(): string;
+    static has_selection(): boolean;
+}
+export {};

package/dist/src/func/helpers.js

@@ -0,0 +1,75 @@
+function get_parentId(obj) {
+    return obj.__parent__table_id || obj.parent;
+}
+function get_selfId(obj) {
+    return obj.__table_id;
+}
+//given an array of rows, fixes parent,child relations
+export function fix_parent_child_relations(rows) {
+    if (!Array.isArray(rows))
+        rows = [];
+    const converted_rows = rows
+        .filter((r) => r != null)
+        .map((r) => {
+        return { parent: get_parentId(r), self: get_selfId(r), data: r };
+    });
+    const top_level_rows = converted_rows.filter((r) => !r.parent);
+    //find children of top-level parents:
+    for (let index = 0; index < top_level_rows.length; index++) {
+        const mrow = top_level_rows[index];
+        assign_children(mrow, converted_rows);
+    }
+    const result = top_level_rows.map((r) => r.data);
+    //console.log(result);
+    return result;
+}
+function assign_children(row, all_rows) {
+    const my_children = all_rows.filter((s) => row.self == s.parent);
+    if (my_children.length > 0) {
+        //find children of my children:
+        for (let index = 0; index < my_children.length; index++) {
+            const child = my_children[index];
+            assign_children(child, all_rows);
+        }
+        row.data.__children = my_children.map((r) => r.data);
+    }
+    else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
+        row.data.__children = undefined;
+}
+export class func_selection {
+    static getVirtualElement(x = 0, y = 0) {
+        return () => ({
+            getBoundingClientRect: func_selection.generateGetBoundingClientRect(x, y),
+        });
+    }
+    static generateGetBoundingClientRect(x = 0, y = 0) {
+        return () => ({
+            width: 0,
+            height: 0,
+            top: y,
+            right: x,
+            bottom: y,
+            left: x,
+        });
+    }
+    static get_selectedText() {
+        var text = '';
+        if (window.getSelection) {
+            text = window.getSelection()?.toString();
+        }
+        else if (document.selection && document.selection.type != 'Control') {
+            text = document.selection.createRange()?.text;
+        }
+        return text || '';
+    }
+    static has_selection() {
+        const slct = window.getSelection();
+        if (slct == null)
+            return false;
+        if (slct.type == null)
+            return func_selection.get_selectedText().length !== 0;
+        if (slct.type === 'Range')
+            return true;
+        return false;
+    }
+}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './views/DataGrid';
+import AzGrid from './views/DataGrid';
+export default AzGrid;

package/dist/src/index.js

@@ -0,0 +1,5 @@
+export * from './views/DataGrid';
+import AzGrid from './views/DataGrid';
+export default AzGrid;
+// const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
+// root.render(<ExampleGrid />);

package/dist/src/views/DataGrid.d.ts

@@ -0,0 +1,68 @@
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
+import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+import { ConvertableToMenuItem } from '@azrico/controls';
+import React from 'react';
+import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeFilterTypes, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
+type loose_column_names = {
+    key: string;
+    field: string;
+    columnName: string;
+    name: string;
+};
+type loose_column_fields = loose_column_names & {
+    title: string;
+    type: string;
+    items: any[];
+};
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+type columnOrString = string | LooseColumnDefinition;
+type customColumnData = {
+    name: string;
+    render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
+};
+type GridOptions = Partial<TypeDataGridProps>;
+export type AzGridProps = {
+    columns?: columnOrString[];
+    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    licenseKey?: string;
+    gridOptions?: GridOptions;
+    columnExtensions?: Array<{
+        name: string;
+    } & Partial<ColumnDefinition>>;
+    editableColumns?: string[];
+    leftColumns?: string[];
+    rightColumns?: string[];
+    customColumns?: customColumnData[];
+    contextMenuItems?: ConvertableToMenuItem[];
+    highlightedRow?: any;
+    RowDetail?: RowDetailsFunc;
+    selected?: RowSelectionValue;
+    onSelectionChange?: OnSelectionChangeFunc;
+    onRowClick?: (rowIndex: number, row: any) => void;
+    onRowDoubleClick?: (rowIndex: number, row: any) => void;
+    onLimitChange?: (v: number) => void;
+    onSkipChange?: (v: number) => void;
+    skip?: number;
+    limit?: number;
+    loading?: boolean;
+    dark?: boolean;
+    allowChildRows?: boolean;
+    looseCacheCheck?: boolean;
+    className?: string;
+};
+export declare function AzGrid(props: AzGridProps): JSX.Element;
+export default AzGrid;

package/dist/src/views/DataGrid.js

@@ -0,0 +1,414 @@
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
+import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+import { ContextMenu } from '@azrico/controls';
+import React from 'react';
+import { fix_parent_child_relations, func_selection } from '../func/helpers';
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
+import clsx from 'clsx';
+import { object_equals } from '@azrico/object';
+/* -------------------------------------------------------------------------- */
+// const defaultfilterTypes: FilterTypes = {
+// 	string: {
+// 		type: 'string',
+// 		emptyValue: '',
+// 		operators: [
+// 			{
+// 				name: 'contains',
+// 				fn: ({ value, filterValue, data }) => {
+// 					console.log('fn');
+// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
+// 				},
+// 			},
+// 		],
+// 	},
+// };
+const defaultOptions = {
+    //filterTypes: defaultfilterTypes,
+    remoteFilter: false,
+    remoteSort: false,
+    rowReorderColumn: false,
+    resizable: true,
+    rowIndexColumn: true,
+};
+const forcedOptions = {
+    idProperty: '__table_id',
+    nodesProperty: '__children',
+};
+const defaultColumnOptions = {
+    draggable: false,
+    lockable: false,
+};
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+export function AzGrid(props) {
+    /* -------------------------------------------------------------------------- */
+    /*                                   Columns                                  */
+    /* -------------------------------------------------------------------------- */
+    const cached_columns = React.useMemo(() => {
+        return ApplyColumnData(props);
+    }, [
+        props.columns,
+        props.leftColumns,
+        props.rightColumns,
+        props.editableColumns,
+        props.columnExtensions,
+        props.customColumns,
+    ]);
+    /* -------------------------------------------------------------------------- */
+    /*                                 Row changes                                */
+    /* -------------------------------------------------------------------------- */
+    const cached_data = React.useRef();
+    const last_cache_info = React.useRef();
+    const dataSource = React.useCallback(async (dt) => {
+        let result_data = undefined;
+        let isUsingCache = false;
+        const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
+        //check if we can used cached data
+        //if the datasource is changed since last render, we should invalidate cache
+        if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+            cached_data.current = undefined;
+            last_cache_info.current = cacheInfo;
+        }
+        if (cached_data.current) {
+            //cache is valid, use the cache
+            isUsingCache = true;
+            result_data = cached_data.current;
+        }
+        else {
+            //cache is invalid, use the datasource again
+            isUsingCache = false;
+            if (typeof props.dataSource === 'function') {
+                result_data = await props.dataSource(dt);
+            }
+            else
+                result_data = props.dataSource;
+        }
+        //making sure the datasource is a valid object :
+        if (!result_data)
+            result_data = [];
+        if (Array.isArray(result_data) || typeof result_data !== 'object')
+            result_data = { data: result_data };
+        if (!Array.isArray(result_data.data))
+            result_data.data = [result_data.data];
+        //no need to fix parent/child when using cache (it should be already fixed)
+        if (!isUsingCache && props.allowChildRows)
+            result_data.data = fix_parent_child_relations(result_data.data);
+        if (!result_data.count)
+            result_data.count = result_data.data.length;
+        //update cache
+        cached_data.current = result_data;
+        return result_data;
+    }, [props.dataSource]);
+    return (React.createElement(DataGrid, { ...props, columns: cached_columns, dataSource: dataSource, highlightedRow: props.highlightedRow }));
+}
+/* -------------------------------------------------------------------------- */
+function DataGrid(props) {
+    const { columns, dataSource, dark, contextMenuItems } = props;
+    /* -------------------------------------------------------------------------- */
+    const gridRef = React.useRef(null);
+    const click_data = React.useRef(null);
+    const [menuAnchorEl, set_menuAnchorEl] = React.useState(null);
+    const [menuRow, set_menuRow] = React.useState(null);
+    React.useEffect(() => {
+        click_data.current = {};
+    }, [dataSource]);
+    /* --------------------------------- events --------------------------------- */
+    const onRowContextMenu = React.useCallback((rowProps, event) => {
+        if (func_selection.has_selection())
+            return;
+        update_menuRow(rowProps.data);
+        update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
+        event.preventDefault();
+    }, []);
+    const onRowClick = React.useCallback((rowProps, event) => {
+        const nowDate = Date.now();
+        const lastclick = click_data.current[get_row_id(rowProps)];
+        if (lastclick) {
+            const diffTime = Math.abs(nowDate - lastclick);
+            if (diffTime < 400) {
+                props.onRowDoubleClick &&
+                    props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+            }
+        }
+        click_data.current[get_row_id(rowProps)] = nowDate;
+        props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+    }, []);
+    /* ------------------------------- ContextMenu ------------------------------ */
+    const update_menuAnchorEl = React.useCallback((el) => {
+        if (el) {
+            set_menuAnchorEl(el);
+        }
+        else
+            set_menuAnchorEl(null);
+    }, []);
+    const update_menuRow = React.useCallback((r) => {
+        if (r) {
+            set_menuRow(r);
+        }
+        else
+            set_menuRow(null);
+    }, []);
+    /* -------------------------------------------------------------------------- */
+    /*                               Create the grid                              */
+    /* -------------------------------------------------------------------------- */
+    const base_gridOptions = React.useMemo(() => {
+        const firstcolumn = columns[0];
+        const licenseKey = props.licenseKey || get_default_key();
+        const events = {
+            onRowClick: onRowClick,
+            onSkipChange: props.onSkipChange,
+            onLimitChange: props.onLimitChange,
+            onRowContextMenu: onRowContextMenu,
+        };
+        const extra_ops = {
+            onSelectionChange: props.onSelectionChange,
+            licenseKey: licenseKey,
+            treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+            renderRowDetails: props.RowDetail,
+            theme: dark ? 'amber-dark' : 'default-light',
+        };
+        return { ...defaultOptions, ...events, ...extra_ops };
+    }, [columns, props.allowChildRows, props.RowDetail]);
+    const static_gridOptions = React.useMemo(() => {
+        return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
+    }, [props.gridOptions, base_gridOptions, forcedOptions]);
+    const dynamic_gridOptions = React.useMemo(() => {
+        const res = {};
+        dynamic_option_names.map((r) => {
+            res[r] = props[r];
+        });
+        return res;
+    }, dynamic_option_names.map((r) => props[r]));
+    // const { width, height, ref: resize_ref } = useResizeDetector();
+    return (React.createElement("div", { className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
+        React.createElement(ReactDataGrid, { ...static_gridOptions, ...dynamic_gridOptions, handle: (ref) => (gridRef.current = ref ? ref.current : null), className: 'azgrid-filler', columns: columns, dataSource: dataSource }),
+        React.createElement(ContextMenu, { menuAnchorEl: menuAnchorEl, set_menuAnchorEl: update_menuAnchorEl, menuRow: menuRow, items: contextMenuItems })));
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param props
+ * @returns
+ */
+function ApplyColumnData(props) {
+    const final_columns = [];
+    let mcols = props.columns || [];
+    let mcolExts = props.columnExtensions || [];
+    let rightColumns = props.rightColumns || [];
+    let leftColumns = props.leftColumns || [];
+    let editableColumns = props.editableColumns || [];
+    let customColumns = props.customColumns || [];
+    if (!Array.isArray(mcols))
+        return [];
+    /* ------------------------------- fix columns ------------------------------ */
+    mcols
+        .map((r) => {
+        if (r == null)
+            return null;
+        if (typeof r === 'string')
+            return { field: r, header: r };
+        if (typeof r === 'object') {
+            let final_cl = {
+                name: get_col_name(r),
+                header: get_col_header(r),
+                width: r.width || undefined,
+            };
+            final_cl = {
+                ...defaultColumnOptions,
+                ...r,
+                ...final_cl,
+            };
+            return final_cl;
+        }
+        return null;
+    })
+        .forEach((r) => {
+        if (r != null)
+            final_columns.push(r);
+    });
+    /* ---------------------------- apply extensions ---------------------------- */
+    if (mcolExts && Array.isArray(mcolExts))
+        for (let index = 0; index < mcolExts.length; index++) {
+            const ext = mcolExts[index];
+            const ext_cl = get_col_name(ext);
+            const mcol = final_columns.find((s) => get_col_name(s) === ext_cl);
+            if (mcol) {
+                for (const key in ext) {
+                    if (!mcol[key] && key != 'name')
+                        mcol[key] = ext[key];
+                }
+            }
+            // if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
+        }
+    /* ------------------------------- frozen cols ------------------------------ */
+    if (Array.isArray(leftColumns)) {
+        for (let index = 0; index < leftColumns.length; index++) {
+            const r = get_col_name(leftColumns[index]);
+            const mcol = final_columns.find((s) => get_col_name(s) === r);
+            if (mcol) {
+                mcol.locked = 'start';
+            }
+        }
+    }
+    if (Array.isArray(rightColumns)) {
+        for (let index = 0; index < rightColumns.length; index++) {
+            const r = get_col_name(rightColumns[index]);
+            const mcol = final_columns.find((s) => get_col_name(s) === r);
+            if (mcol) {
+                mcol.locked = 'end';
+            }
+        }
+    }
+    /* -------------------------------- ediatable ------------------------------- */
+    if (Array.isArray(editableColumns)) {
+        for (let index = 0; index < editableColumns.length; index++) {
+            const r = get_col_name(editableColumns[index]);
+            const mcol = final_columns.find((s) => get_col_name(s) === r);
+            if (mcol) {
+                // mcol.editor = editorWrapper;
+                // mcol.editorOptions = {
+                //     editOnClick: true,
+                // };
+            }
+        }
+    }
+    for (let index = 0; index < final_columns.length; index++) {
+        const col = final_columns[index];
+        if (col.type) {
+            switch (col.type) {
+                case 'combo':
+                case 'select':
+                    col.editor = SelectEditor;
+                    break;
+                case 'number':
+                case 'numberic':
+                    col.editor = NumericEditor;
+                    break;
+                case 'truefalse':
+                case 'bool':
+                    col.editor = BoolEditor;
+                    break;
+            }
+            delete col.type;
+        }
+        if (!col.editorProps)
+            col.editorProps = {};
+        if (col.items) {
+            if (!col.editorProps.idProperty)
+                col.editorProps.idProperty = 'id';
+            if (!col.editorProps.collapseOnSelect)
+                col.editorProps.collapseOnSelect = true;
+            col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
+            delete col.items;
+        }
+    }
+    /* -------------------------------------------------------------------------- */
+    if (Array.isArray(customColumns)) {
+        for (let index = 0; index < customColumns.length; index++) {
+            const r = customColumns[index];
+            const rn = get_col_name(r);
+            const mcol = final_columns.find((s) => get_col_name(s) === rn);
+            if (mcol) {
+                //@ts-ignore
+                mcol.render = r.render;
+            }
+        }
+    }
+    /* ------------------------------ apply renames ----------------------------- */
+    for (let index = 0; index < final_columns.length; index++) {
+        const col = final_columns[index];
+        if (!col.name) {
+            col.name = get_col_name(col);
+            delete col.field;
+            delete col.key;
+            delete col.columnName;
+        }
+    }
+    /* -------------------------------------------------------------------------- */
+    return final_columns;
+}
+function to_datasource(arr, idProperty) {
+    const res = [];
+    let index = 0;
+    if (Array.isArray(arr)) {
+        arr.map((s) => {
+            let elem = {};
+            elem[idProperty] = '_cid_' + index;
+            elem = { ...elem, ...s };
+            res.push(elem);
+            index++;
+        });
+    }
+    return res;
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_col_name(obj) {
+    if (!obj)
+        return 'default';
+    if (typeof obj == 'string')
+        return obj;
+    if (typeof obj != 'object')
+        return 'default';
+    return obj.name || obj.field || obj.key || obj.columnName || 'default';
+}
+/**
+ * Gets header of a column
+ * @param obj
+ * @returns
+ */
+function get_col_header(obj) {
+    if (!obj)
+        return 'default';
+    if (typeof obj == 'string')
+        return obj;
+    if (typeof obj != 'object')
+        return 'default';
+    return obj.header || obj.title || get_col_name(obj);
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_row_id(obj) {
+    if (!obj)
+        return 'default';
+    if (typeof obj == 'string')
+        return obj;
+    if (typeof obj != 'object')
+        return 'default';
+    return obj.__table_id || obj.id || 'default';
+}
+/**
+ * Gets default activation key for grid plugin
+ * @returns
+ */
+function get_default_key() {
+    return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+//check if two cache objects are the same
+function validateCache(current, old, looseCheck = false) {
+    if (!old || !object_equals(current, old))
+        return false;
+    if (looseCheck)
+        return true;
+    if (current.ds != old.ds)
+        return false;
+    return true;
+}
+/* -------------------------------------------------------------------------- */
+export default AzGrid;

package/dist/src/views/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataGrid';
+import AzGrid from './DataGrid';
+export default AzGrid;

package/dist/src/views/index.js

@@ -0,0 +1,3 @@
+export * from './DataGrid';
+import AzGrid from './DataGrid';
+export default AzGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.1.13",
+	"version": "1.1.14",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/views/DataGrid.tsx

@@ -17,7 +17,10 @@ import {
 } from '@inovua/reactdatagrid-community/types';
 import { fix_parent_child_relations, func_selection } from '../func/helpers';
 
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
 import { object_equals } from '@azrico/object';
@@ -420,6 +423,38 @@ function ApplyColumnData(props: any) {
 			}
 		}
 	}
+	for (let index = 0; index < final_columns.length; index++) {
+		const col: ColumnDefinition = final_columns[index];
+
+		if (col.type) {
+			switch (col.type) {
+				case 'combo':
+				case 'select':
+					col.editor = SelectEditor;
+					break;
+				case 'number':
+				case 'numberic':
+					col.editor = NumericEditor;
+					break;
+				case 'truefalse':
+				case 'bool':
+					col.editor = BoolEditor;
+					break;
+			}
+			delete col.type;
+		}
+		if (!col.editorProps) col.editorProps = {};
+
+		if (col.items) {
+			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+			col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
+
+			delete col.items;
+		}
+	}
+
+	/* -------------------------------------------------------------------------- */
 	if (Array.isArray(customColumns)) {
 		for (let index = 0; index < customColumns.length; index++) {
 			const r = customColumns[index];
@@ -435,34 +470,32 @@ function ApplyColumnData(props: any) {
 	/* ------------------------------ apply renames ----------------------------- */
 	for (let index = 0; index < final_columns.length; index++) {
 		const col = final_columns[index];
-
 		if (!col.name) {
 			col.name = get_col_name(col);
 			delete col.field;
 			delete col.key;
 			delete col.columnName;
 		}
-		//
-		if (col.type) {
-			col.editor = col.type;
-			delete col.type;
-		}
-		//
-		if (col.items) {
-			if (!col.editorParams) col.editorParams = { valuesLookup: true, allowEmpty: true };
-			col.editorParams.values = {};
-			for (let index = 0; index < col.items; index++) {
-				const ci = col.items[index];
-				col.editorParams.values[String(ci).toLowerCase()] = ci;
-			}
-			delete col.items;
-		}
 	}
 	/* -------------------------------------------------------------------------- */
 
 	return final_columns;
 }
 
+function to_datasource(arr: any[], idProperty: string) {
+	const res: any[] = [];
+	let index = 0;
+	if (Array.isArray(arr)) {
+		arr.map((s: any) => {
+			let elem = {};
+			elem[idProperty] = '_cid_' + index;
+			elem = { ...elem, ...s };
+			res.push(elem);
+			index++;
+		});
+	}
+	return res;
+}
 /**
  * Gets name of a column from its column object
  * @param obj