@azrico/reactgrid 1.2.2 → 1.2.3

package/dist/src/views/DataGrid.js

@@ -1,481 +1,493 @@
-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';
-import { useComponentSize } from 'react-use-size';
-/* -------------------------------------------------------------------------- */
-// 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,
-    editStartEvent: 'click',
-    rowReorderColumn: false,
-    resizable: true,
-    columnUserSelect: true,
-    rowIndexColumn: true,
-    rowHeight: 35,
-    maxRowHeight: 40,
-    minRowHeight: 30,
-};
-const forcedOptions = {
-    idProperty: '__table_id',
-    nodesProperty: '__children',
-};
-const defaultColumnOptions = {
-    draggable: false,
-    lockable: false,
-    editable: 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]);
-    const base_gridOptions = React.useMemo(() => {
-        const firstcolumn = cached_columns[0];
-        const licenseKey = props.licenseKey || get_default_key();
-        const events = {
-            onSkipChange: props.onSkipChange,
-            onLimitChange: props.onLimitChange,
-            onEditComplete: props.onEditComplete,
-        };
-        const extra_ops = {
-            onSelectionChange: props.onSelectionChange,
-            licenseKey: licenseKey,
-            editable: props.editable,
-            treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-            renderRowDetails: props.RowDetail,
-            theme: props.dark ? 'amber-dark' : 'default-light',
-        };
-        return { ...defaultOptions, ...events, ...extra_ops };
-    }, [
-        cached_columns,
-        props.allowChildRows,
-        props.editable,
-        props.RowDetail,
-        props.onEditComplete,
-    ]);
-    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]));
-    return (React.createElement(DataGridEventsWrapper, { ...props, static_gridOptions: static_gridOptions, dynamic_gridOptions: dynamic_gridOptions, columns: cached_columns, dataSource: dataSource, highlightedRow: props.highlightedRow }));
-}
-/* -------------------------------------------------------------------------- */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AzGrid = AzGrid;
+exports.default = void 0;
+exports.get_col_header = get_col_header;
+exports.get_col_name = get_col_name;
+require("@inovua/reactdatagrid-enterprise/index.css");
+require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
+require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
+require("../themes/base_styles.css");
+require("../themes/grid.css");
+var _controls = require("@azrico/controls");
+var _react = _interopRequireDefault(require("react"));
+var _helpers = require("../func/helpers");
+var _BoolEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/BoolEditor"));
+var _NumericEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/NumericEditor"));
+var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
+var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _object = require("@azrico/object");
+var _reactUseSize = require("react-use-size");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* -------------------------------------------------------------------------- */
+// 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,
+  editStartEvent: 'click',
+  rowReorderColumn: false,
+  resizable: true,
+  columnUserSelect: true,
+  rowIndexColumn: true,
+  rowHeight: 35,
+  maxRowHeight: 40,
+  minRowHeight: 30
+};
+const forcedOptions = {
+  idProperty: '__table_id',
+  nodesProperty: '__children'
+};
+const defaultColumnOptions = {
+  draggable: false,
+  lockable: false,
+  editable: false
+};
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+function AzGrid(props) {
+  /* -------------------------------------------------------------------------- */
+  /*                                   Columns                                  */
+  /* -------------------------------------------------------------------------- */
+  const cached_columns = _react.default.useMemo(() => {
+    return ApplyColumnData(props);
+  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+  /* -------------------------------------------------------------------------- */
+  /*                                 Row changes                                */
+  /* -------------------------------------------------------------------------- */
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const dataSource = _react.default.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 = (0, _helpers.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]);
+  const base_gridOptions = _react.default.useMemo(() => {
+    const firstcolumn = cached_columns[0];
+    const licenseKey = props.licenseKey || get_default_key();
+    const events = {
+      onSkipChange: props.onSkipChange,
+      onLimitChange: props.onLimitChange,
+      onEditComplete: props.onEditComplete
+    };
+    const extra_ops = {
+      onSelectionChange: props.onSelectionChange,
+      licenseKey: licenseKey,
+      editable: props.editable,
+      treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+      renderRowDetails: props.RowDetail,
+      theme: props.dark ? 'amber-dark' : 'default-light'
+    };
+    return {
+      ...defaultOptions,
+      ...events,
+      ...extra_ops
+    };
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  const static_gridOptions = _react.default.useMemo(() => {
+    return {
+      ...base_gridOptions,
+      ...props.gridOptions,
+      ...forcedOptions
+    };
+  }, [props.gridOptions, base_gridOptions, forcedOptions]);
+  const dynamic_gridOptions = _react.default.useMemo(() => {
+    const res = {};
+    dynamic_option_names.map(r => {
+      res[r] = props[r];
+    });
+    return res;
+  }, dynamic_option_names.map(r => props[r]));
+  return _react.default.createElement(DataGridEventsWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions,
+    dynamic_gridOptions: dynamic_gridOptions,
+    columns: cached_columns,
+    dataSource: dataSource,
+    highlightedRow: props.highlightedRow
+  });
+}
+/* -------------------------------------------------------------------------- */
 /**
  * Wrapper for menu events
  * @param props
  * @returns
- */
-function DataGridEventsWrapper(props) {
-    /* -------------------------------------------------------------------------- */
-    const click_data = React.useRef(null);
-    const [menuAnchorEl, set_menuAnchorEl] = React.useState(null);
-    const [menuRow, set_menuRow] = React.useState(null);
-    /* --------------------------------- 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) {
-                click_data.current[get_row_id(rowProps)] = null;
-                return (props.onRowDoubleClick &&
-                    props.onRowDoubleClick(rowProps.rowIndex, rowProps.data));
-            }
-        }
-        click_data.current[get_row_id(rowProps)] = nowDate;
-        return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-    }, [props.onRowClick, props.onRowDoubleClick]);
-    React.useEffect(() => {
-        click_data.current = {};
-    }, [props.dataSource]);
-    /* ------------------------------- 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);
-    }, []);
-    /**
-     * Merge click events into grid options
-     */
-    const static_gridOptions = React.useMemo(() => {
-        const events = {
-            onRowClick: onRowClick,
-            onRowContextMenu: onRowContextMenu,
-        };
-        return { ...props.static_gridOptions, ...events };
-    }, [props.static_gridOptions, onRowClick]);
-    return (React.createElement(DataGridSizeWrapper, { ...props, static_gridOptions: static_gridOptions },
-        React.createElement(ContextMenu, { menuAnchorEl: menuAnchorEl, set_menuAnchorEl: update_menuAnchorEl, menuRow: menuRow, items: props.contextMenuItems }),
-        props.children));
-}
-function DataGridSizeWrapper(props) {
-    // console.log(props);
-    if (props.delayedSize) {
-        return React.createElement(DataGridDelayedSize, { ...props });
-    }
-    else {
-        return React.createElement(DataGridFlexSize, { ...props });
-    }
-}
-function DataGridDelayedSize(props) {
-    const gridRef = React.useRef(null);
-    const { ref, height, width } = useComponentSize();
-    return (React.createElement("div", { ref: ref, className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
-        React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (gridRef.current = ref ? ref.current : null), className: 'azgrid-delayedresize', style: {
-                height: height,
-                width: width,
-            }, columns: props.columns, dataSource: props.dataSource }),
-        props.children));
-}
-function DataGridFlexSize(props) {
-    const gridRef = React.useRef(null);
-    return (React.createElement("div", { className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
-        React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (gridRef.current = ref ? ref.current : null), className: 'azgrid-filler', columns: props.columns, dataSource: props.dataSource }),
-        props.children));
-}
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
+ */
+function DataGridEventsWrapper(props) {
+  /* -------------------------------------------------------------------------- */
+  const click_data = _react.default.useRef(null);
+  const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
+  const [menuRow, set_menuRow] = _react.default.useState(null);
+  /* --------------------------------- events --------------------------------- */
+  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
+    if (_helpers.func_selection.has_selection()) return;
+    update_menuRow(rowProps.data);
+    update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
+    event.preventDefault();
+  }, []);
+  const onRowClick = _react.default.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) {
+        click_data.current[get_row_id(rowProps)] = null;
+        return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+      }
+    }
+    click_data.current[get_row_id(rowProps)] = nowDate;
+    return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+  }, [props.onRowClick, props.onRowDoubleClick]);
+  _react.default.useEffect(() => {
+    click_data.current = {};
+  }, [props.dataSource]);
+  /* ------------------------------- ContextMenu ------------------------------ */
+  const update_menuAnchorEl = _react.default.useCallback(el => {
+    if (el) {
+      set_menuAnchorEl(el);
+    } else set_menuAnchorEl(null);
+  }, []);
+  const update_menuRow = _react.default.useCallback(r => {
+    if (r) {
+      set_menuRow(r);
+    } else set_menuRow(null);
+  }, []);
+  /**
+   * Merge click events into grid options
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const events = {
+      onRowClick: onRowClick,
+      onRowContextMenu: onRowContextMenu
+    };
+    return {
+      ...props.static_gridOptions,
+      ...events
+    };
+  }, [props.static_gridOptions, onRowClick]);
+  return _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  }, _react.default.createElement(_controls.ContextMenu, {
+    menuAnchorEl: menuAnchorEl,
+    set_menuAnchorEl: update_menuAnchorEl,
+    menuRow: menuRow,
+    items: props.contextMenuItems
+  }), props.children);
+}
+function DataGridSizeWrapper(props) {
+  // console.log(props);
+  if (props.delayedSize) {
+    return _react.default.createElement(DataGridDelayedSize, {
+      ...props
+    });
+  } else {
+    return _react.default.createElement(DataGridFlexSize, {
+      ...props
+    });
+  }
+}
+function DataGridDelayedSize(props) {
+  const gridRef = _react.default.useRef(null);
+  const {
+    ref,
+    height,
+    width
+  } = (0, _reactUseSize.useComponentSize)();
+  return _react.default.createElement("div", {
+    ref: ref,
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    handle: ref => gridRef.current = ref ? ref.current : null,
+    className: 'azgrid-delayedresize',
+    style: {
+      height: height,
+      width: width
+    },
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+function DataGridFlexSize(props) {
+  const gridRef = _react.default.useRef(null);
+  return _react.default.createElement("div", {
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    handle: ref => gridRef.current = ref ? ref.current : null,
+    className: 'azgrid-filler',
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 /**
  * 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);
-            if (!ext_cl) {
-                console.warn('ColumnExtension must have a name');
-                continue;
-            }
-            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.editable = 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':
-                    //@ts-ignore
-                    col.editor = SelectEditor;
-                    break;
-                case 'number':
-                case 'numberic':
-                    //@ts-ignore
-                    col.editor = NumericEditor;
-                    break;
-                case 'truefalse':
-                case 'bool':
-                    //@ts-ignore
-                    col.editor = BoolEditor;
-                    break;
-            }
-            if (col.editable != false)
-                col.editable = true;
-            delete col.type;
-        }
-        //@ts-ignore
-        if (!col.editorProps)
-            col.editorProps = {};
-        if (col.items) {
-            //@ts-ignore
-            if (!col.editorProps.idProperty)
-                col.editorProps.idProperty = 'id';
-            //@ts-ignore
-            if (!col.editorProps.collapseOnSelect)
-                col.editorProps.collapseOnSelect = true;
-            //@ts-ignore
-            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;
-            if (col.flex && !col.defaultFlex)
-                col.defaultFlex = col.flex;
-        }
-    }
-    /* -------------------------------------------------------------------------- */
-    //console.log(final_columns);
-    return final_columns;
-}
-function to_datasource(arr, idProperty, valueAsID = true) {
-    const res = [];
-    let index = 0;
-    if (Array.isArray(arr)) {
-        arr.map((s) => {
-            let elem = {};
-            if (valueAsID)
-                elem[idProperty] = String(s).toLowerCase();
-            else
-                elem[idProperty] = '_cid_' + index;
-            if (typeof s === 'object')
-                elem = { ...elem, ...s };
-            else
-                elem['label'] = s;
-            res.push(elem);
-            index++;
-        });
-    }
-    return res;
-}
+ */
+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);
+    if (!ext_cl) {
+      console.warn('ColumnExtension must have a name');
+      continue;
+    }
+    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.editable = 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':
+          //@ts-ignore
+          col.editor = _SelectEditor.default;
+          break;
+        case 'number':
+        case 'numberic':
+          //@ts-ignore
+          col.editor = _NumericEditor.default;
+          break;
+        case 'truefalse':
+        case 'bool':
+          //@ts-ignore
+          col.editor = _BoolEditor.default;
+          break;
+      }
+      if (col.editable != false) col.editable = true;
+      delete col.type;
+    }
+    //@ts-ignore
+    if (!col.editorProps) col.editorProps = {};
+    if (col.items) {
+      //@ts-ignore
+      if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+      //@ts-ignore
+      if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+      //@ts-ignore
+      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;
+      if (col.flex && !col.defaultFlex) col.defaultFlex = col.flex;
+    }
+  }
+  /* -------------------------------------------------------------------------- */
+  //console.log(final_columns);
+  return final_columns;
+}
+function to_datasource(arr, idProperty, valueAsID = true) {
+  const res = [];
+  let index = 0;
+  if (Array.isArray(arr)) {
+    arr.map(s => {
+      let elem = {};
+      if (valueAsID) elem[idProperty] = String(s).toLowerCase();else elem[idProperty] = '_cid_' + index;
+      if (typeof s === 'object') elem = {
+        ...elem,
+        ...s
+      };else elem['label'] = s;
+      res.push(elem);
+      index++;
+    });
+  }
+  return res;
+}
 /**
  * Gets name of a column from its column object
  * @param obj
  * @returns
- */
-export function get_col_name(obj) {
-    if (!obj)
-        return '';
-    if (typeof obj == 'string')
-        return obj;
-    if (typeof obj != 'object')
-        return '';
-    return obj.name || obj.field || obj.key || obj.columnName || '';
-}
+ */
+function get_col_name(obj) {
+  if (!obj) return '';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return '';
+  return obj.name || obj.field || obj.key || obj.columnName || '';
+}
 /**
  * Gets header of a column
  * @param obj
  * @returns
- */
-export function get_col_header(obj) {
-    if (!obj)
-        return '';
-    if (typeof obj == 'string')
-        return obj;
-    if (typeof obj != 'object')
-        return '';
-    return obj.header || obj.title || get_col_name(obj);
-}
+ */
+function get_col_header(obj) {
+  if (!obj) return '';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return '';
+  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 '-1';
-    if (typeof obj == 'string')
-        return obj;
-    if (typeof obj != 'object')
-        return '-1';
-    return obj.__table_id || obj.id || '-1';
-}
+ */
+function get_row_id(obj) {
+  if (!obj) return '-1';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return '-1';
+  return obj.__table_id || obj.id || '-1';
+}
 /**
  * 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;
+ */
+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 || !(0, _object.object_equals)(current, old)) return false;
+  if (looseCheck) return true;
+  if (current.ds != old.ds) return false;
+  return true;
+}
+/* -------------------------------------------------------------------------- */
+var _default = AzGrid;
+exports.default = _default;