elab_components 0.0.1 → 0.0.3

package/dist/App.d.ts

@@ -1,5 +1,4 @@
 /** @format */
 import React from 'react';
-import './App.css';
 declare function App(): React.JSX.Element;
 export default App;

package/dist/components/DateInputs/MultiViewCalendar/props.d.ts

@@ -1,9 +1,9 @@
 declare const props: () => {
-    activeRangeEnd: "start" | "end";
+    activeRangeEnd: "end" | "start";
     allowReverse: import("@storybook/addon-knobs/dist/type-defs").Mutable<boolean>;
     bottomView: "month" | "year" | "decade" | "century";
     defaultActiveView: "month" | "year" | "decade" | "century";
-    mode: "single" | "multiple" | "range";
+    mode: "multiple" | "range" | "single";
     topView: "month" | "year" | "decade" | "century";
     views: number;
 };

package/dist/components/Grid/index.d.ts

@@ -1,50 +1,6 @@
 /** @format */
 import { JSX } from 'react';
-import { GridColumn, GridCell, GridProps, GridDataStateChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent } from '@progress/kendo-react-grid';
-import { State } from '@progress/kendo-data-query';
-interface IGrid extends GridProps {
-    data: Array<any>;
-    style: any;
-    reorderable: boolean;
-    resizable: boolean;
-    sortable: {
-        mode: 'single' | 'multiple';
-        allowUnsort: boolean;
-    };
-    dataItemKey: string;
-    editField: string;
-    filterable: boolean;
-    groupable: boolean;
-    onDataStateChange?: (event: GridDataStateChangeEvent) => void;
-    onSelectionChange: (event: GridSelectionChangeEvent) => void;
-    onHeaderSelectionChange: (event: GridHeaderSelectionChangeEvent) => void;
-    columnConfigs: any;
-    detailComponent: Function;
-    expandChange: Function;
-    page: State;
-    pageSizeValue: number | string | undefined;
-    setPageSizeValue: Function;
-    setPage: Function;
-    expandedRows: number[];
-    selectedState: {
-        [id: string]: boolean | number[];
-    };
-    setSelectedState: Function;
-    columnOption: {
-        columnOptionModel: boolean;
-        columnConfigsModel: boolean;
-        runQueriesModel: boolean;
-    };
-    setColumnOption: Function;
-    apiColumnConfig: any;
-    searchKeyword: string;
-    setSearchKeyword: Function;
-    allColumnsField: Array<{
-        field: string;
-        title: string;
-        type: string;
-    }>;
-}
-declare const OkGrid: ({ ...props }: IGrid) => JSX.Element;
+import { GridColumn, GridCell, GridProps } from '@progress/kendo-react-grid';
+declare const OkGrid: ({ ...props }: any) => JSX.Element;
 export { OkGrid, GridColumn as OkGridColumn, GridCell as OkGridCell };
 export type { GridProps };

package/dist/components/Grid/props.d.ts

@@ -23,7 +23,7 @@ declare const props: () => {
     reorderable: import("@storybook/addon-knobs/dist/type-defs").Mutable<boolean>;
     resizable: import("@storybook/addon-knobs/dist/type-defs").Mutable<boolean>;
     rowHeight: number;
-    scrollable: "none" | "scrollable" | "virtual";
+    scrollable: "none" | "virtual" | "scrollable";
     selectedField: string;
     skip: number;
     sortable: import("@storybook/addon-knobs/dist/type-defs").Mutable<boolean>;

package/dist/index.esm.js

@@ -1,17 +1,17 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Button, DropDownButton, SplitButton, Toolbar, ButtonGroup } from '@progress/kendo-react-buttons';
 import styled from 'styled-components';
 import { Window, Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
-import { MultiSelect, DropDownList } from '@progress/kendo-react-dropdowns';
+import { MultiSelect, DropDownList, ComboBox } from '@progress/kendo-react-dropdowns';
 import { Editor } from '@progress/kendo-react-editor';
 import { ArcGauge } from '@progress/kendo-react-gauges';
-import { Grid, getSelectedState, GridColumn } from '@progress/kendo-react-grid';
+import { Grid, getSelectedState, GridToolbar, GridColumn } from '@progress/kendo-react-grid';
 import { getter, process as process$1 } from '@progress/kendo-data-query';
 import { ExcelExport } from '@progress/kendo-react-excel-export';
 import { Input, Checkbox, Switch, NumericTextBox, MaskedTextBox } from '@progress/kendo-react-inputs';
+import { DatePicker, TimePicker, MultiViewCalendar, Calendar, DateInput, DateRangePicker, DateTimePicker } from '@progress/kendo-react-dateinputs';
 import { TreeView } from '@progress/kendo-react-treeview';
 import { Chart } from '@progress/kendo-react-charts';
-import { TimePicker, MultiViewCalendar, Calendar, DateInput, DateRangePicker, DateTimePicker } from '@progress/kendo-react-dateinputs';
 import { Drawer } from '@progress/kendo-react-layout';
 export { DrawerContent as OkDrawerContent } from '@progress/kendo-react-layout';
 
@@ -42,7 +42,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/** @format */\r\n@import '@progress/kendo-theme-material/dist/all';\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\r\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\r\n    'Helvetica Neue', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n    monospace;\r\n}\r\n";
+var css_248z = "/** @format */\r\n@import '@progress/kendo-theme-material/dist/all';\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\r\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\r\n    'Helvetica Neue', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n    monospace;\r\n}\r\n\r\n.k-grid-toolbar {\r\n  border-width: none;\r\n}\r\n.k-toolbar {\r\n  padding-inline: 0px;\r\n  padding-block: 0px;\r\n}\r\n.k-button {\r\n  text-transform: none;\r\n}\r\n\r\n.button-container {\r\n  margin-left: auto;\r\n  display: flex;\r\n  gap: 15px;\r\n}\r\n\r\n.button-container .custom-button {\r\n  background-color: transparent;\r\n  border: none;\r\n  box-shadow: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.button-container .button-content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n}\r\n\r\n.button-container .icon {\r\n  font-size: 20px;\r\n  font-weight: bold;\r\n}\r\n\r\n.button-container .text {\r\n  font-size: 16px;\r\n}\r\n";
 styleInject(css_248z);
 
 /******************************************************************************
@@ -165,23 +165,119 @@ var OkInput = function (_a) {
 };
 var templateObject_1$g;
 
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return props => /*#__PURE__*/React.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function HiViewColumns (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"currentColor","aria-hidden":"true"},"child":[{"tag":"path","attr":{"d":"M15 3.75H9v16.5h6V3.75ZM16.5 20.25h3.375c1.035 0 1.875-.84 1.875-1.875V5.625c0-1.036-.84-1.875-1.875-1.875H16.5v16.5ZM4.125 3.75H7.5v16.5H4.125a1.875 1.875 0 0 1-1.875-1.875V5.625c0-1.036.84-1.875 1.875-1.875Z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function PiExportBold (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M220,112v96a20,20,0,0,1-20,20H56a20,20,0,0,1-20-20V112A20,20,0,0,1,56,92H76a12,12,0,0,1,0,24H60v88H196V116H180a12,12,0,0,1,0-24h20A20,20,0,0,1,220,112ZM96.49,72.49,116,53v83a12,12,0,0,0,24,0V53l19.51,19.52a12,12,0,1,0,17-17l-40-40a12,12,0,0,0-17,0l-40,40a12,12,0,1,0,17,17Z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function MdFilterList (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function IoClose (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"},"child":[]}]})(props);
+}
+
 /** @format */
 var StyledGrid = styled(Grid)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
 var OkGrid = function (_a) {
     var props = __rest(_a, []);
-    var resizable = props.resizable, reorderable = props.reorderable, data = props.data, pageSizeValue = props.pageSizeValue, filterable = props.filterable, style = props.style, sortable = props.sortable, groupable = props.groupable, editField = props.editField, skip = props.skip, take = props.take, detail = props.detail, expandField = props.expandField, dataItemKey = props.dataItemKey, columnConfigs = props.columnConfigs, setSelectedState = props.setSelectedState, selectedState = props.selectedState; props.setPageSizeValue; props.setPage; var columnOption = props.columnOption, setColumnOption = props.setColumnOption, expandChange = props.expandChange, setSearchKeyword = props.setSearchKeyword, searchKeyword = props.searchKeyword, allColumnsField = props.allColumnsField, expandedRows = props.expandedRows;
+    console.log('props');
+    var data = props.data;
+    var _b = props[0], resizable = _b.resizable, reorderable = _b.reorderable, pageSizeValue = _b.pageSizeValue, filterable = _b.filterable; _b.sortable; var groupable = _b.groupable, skip = _b.skip, take = _b.take, dataItemKey = _b.dataItemKey, selectField = _b.selectField, columnConfigs = _b.columnConfigs; _b.setPageSizeValue; _b.setPage; var setSearchKeyword = _b.setSearchKeyword, searchKeyword = _b.searchKeyword, allColumnsField = _b.allColumnsField, advanceFilterData = _b.advanceFilterData, advanceFilterDataActive = _b.advanceFilterDataActive, size = _b.size;
+    var idGetter = getter(dataItemKey);
+    var grid = React.useRef(null);
     var excelExport = React.useRef(null);
-    var _b = useState([]), newData = _b[0], setNewData = _b[1];
-    var _c = useState(), runQueriesFilter = _c[0]; _c[1];
-    var _d = React.useState(null), editID = _d[0]; _d[1];
+    var _c = useState([]), newData = _c[0]; _c[1];
+    var _d = useState(), runQueriesFilter = _d[0]; _d[1];
+    var _e = React.useState(null), editID = _e[0]; _e[1];
+    var _f = useState(false), filterShow = _f[0], setFilterShow = _f[1];
+    var _g = React.useState({}), selectedState = _g[0], setSelectedState = _g[1];
+    var _h = useState([]), expandedRows = _h[0], setExpandedRows = _h[1];
     var isRowExpanded = function (productID) {
         return expandedRows.includes(productID);
     };
-    var idGetter = getter(dataItemKey);
+    var _j = useState([]), modifiedData = _j[0], setModifiedData = _j[1];
+    useEffect(function () {
+        var temp = data.map(function (product, index) {
+            var _a;
+            return (__assign(__assign({}, product), (_a = { expanded: isRowExpanded(product.id) }, _a['selected'] = selectedState[idGetter(product)], _a.inEdit = product.id === editID, _a['formDataIndex'] = index, _a)));
+        });
+        setModifiedData(temp);
+    }, [data, editID, idGetter, selectedState]);
+    console.log('modifiedData', modifiedData);
+    var _k = useState({
+        columnOptionModel: false,
+        columnConfigsModel: false,
+        runQueriesModel: false,
+    }), columnOption = _k[0], setColumnOption = _k[1];
     var filteredProducts = useMemo(function () {
         var lowerSearchTerm = searchKeyword.toLowerCase();
-        return data
-            .filter(function (product) {
+        return modifiedData.filter(function (product) {
             return Object.values(product).some(function (value) {
                 if (typeof value === 'object' && value !== null) {
                     return Object.values(value).some(function (nestedValue) {
@@ -190,14 +286,10 @@ var OkGrid = function (_a) {
                 }
                 return value.toString().toLowerCase().includes(lowerSearchTerm);
             });
-        })
-            .map(function (product, index) {
-            var _a;
-            return (__assign(__assign({}, product), (_a = { expanded: isRowExpanded(product.id) }, _a['selected'] = selectedState[idGetter(product)], _a.inEdit = product.id === editID, _a['formDataIndex'] = index, _a)));
         });
-    }, [data, searchKeyword, expandedRows, selectedState, editID]);
+    }, [modifiedData, searchKeyword, expandedRows, selectedState, editID]);
     console.log('filteredProducts', filteredProducts);
-    var _e = React.useState({
+    var _l = React.useState({
         take: 10,
         skip: 0,
         group: [],
@@ -206,9 +298,32 @@ var OkGrid = function (_a) {
             logic: 'and',
             filters: [],
         },
-    }), dataState = _e[0], setDataState = _e[1];
-    var _f = React.useState(columnConfigs), columns = _f[0], setColumns = _f[1];
-    var _g = React.useState(function () {
+    }), dataState = _l[0], setDataState = _l[1];
+    var detailComponent = function (props) {
+        var dataItem = props.dataItem;
+        return (React.createElement("section", null,
+            React.createElement("p", null,
+                React.createElement("strong", null, "In Stock:"),
+                " ",
+                dataItem.UnitsInStock,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "On Order:"),
+                " ",
+                dataItem.UnitsOnOrder,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "Reorder Level:"),
+                " ",
+                dataItem.ReorderLevel,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "Discontinued:"),
+                " ",
+                dataItem.Discontinued)));
+    };
+    var _m = React.useState(columnConfigs), columns = _m[0], setColumns = _m[1];
+    var _o = React.useState(function () {
         var savedOptions = localStorage.getItem('gridOptions');
         return savedOptions
             ? JSON.parse(savedOptions)
@@ -217,11 +332,11 @@ var OkGrid = function (_a) {
                 groupable: false,
                 filterByQueries: false,
             };
-    }), gridOptions = _g[0], setGridOptions = _g[1];
-    var _h = React.useState(process$1(data, dataState)), dataResult = _h[0], setDataResult = _h[1];
+    }), gridOptions = _o[0], setGridOptions = _o[1];
+    var _p = React.useState(process$1(modifiedData, dataState)), dataResult = _p[0], setDataResult = _p[1];
     var onDataStateChange = function (e) {
         setDataState(e.dataState);
-        setDataResult(process$1(data, e.dataState));
+        setDataResult(process$1(modifiedData, e.dataState));
     };
     var onSelectionChange = React.useCallback(function (event) {
         var newSelectedState = getSelectedState({
@@ -250,16 +365,6 @@ var OkGrid = function (_a) {
     var onItemChange = function (event) {
         // const editedItemID = event.dataItem;
     };
-    useEffect(function () {
-        setDataState(function (item) {
-            return __assign(__assign({}, item), { filter: runQueriesFilter });
-        });
-    }, [data, runQueriesFilter]);
-    useEffect(function () {
-        setDataResult(process$1(data, dataState));
-    }, [data, dataState]);
-    console.log(gridOptions);
-    console.log('dataResult', dataResult);
     var onFilterChange = function (e) {
         setSearchKeyword(e.target.value);
     };
@@ -268,61 +373,94 @@ var OkGrid = function (_a) {
             excelExport.current.save(newData);
         }
     };
-    var addNew = function () {
-        var newDataItem = {
-            id: '',
-            title: 'string',
-            price: 0,
-            description: 'string',
-            categoryId: 0,
-            images: 'string',
-        };
-        setNewData(__spreadArray([newDataItem], newData, true));
+    var handleExpandChange = function (event) {
+        var dataItem = event.dataItem;
+        var productID = dataItem.id;
+        setExpandedRows(function (prevExpandedRows) {
+            return prevExpandedRows.includes(productID)
+                ? prevExpandedRows.filter(function (id) { return id !== productID; })
+                : __spreadArray(__spreadArray([], prevExpandedRows, true), [productID], false);
+        });
     };
+    useEffect(function () {
+        setDataState(function (item) {
+            return __assign(__assign({}, item), { filter: runQueriesFilter });
+        });
+    }, [runQueriesFilter]);
+    useEffect(function () {
+        setDataResult(process$1(modifiedData, dataState));
+    }, [modifiedData, dataState]);
     return (React.createElement("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            gap: 25,
             marginTop: '25px',
-            marginLeft: '10px',
-            marginRight: '10px',
         } },
-        ' ',
-        React.createElement("div", null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '5px',
+            } },
+            React.createElement(OkInput, { style: {
+                    width: '300px',
+                }, value: searchKeyword, onChange: function (e) { return onFilterChange(e); }, placeholder: "Search..." }),
+            React.createElement("div", { className: "button-container" },
+                React.createElement(OkButton, { onClick: function () {
+                        return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: true })); });
+                    }, type: "button", className: "custom-button" },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(HiViewColumns, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Column Option"))),
+                React.createElement(OkButton, { type: "button", className: "custom-button", onClick: function () { return setFilterShow(!filterShow); } },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(MdFilterList, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Filter"))),
+                React.createElement(OkButton, { type: "button", className: "custom-button", title: "Export Excel", onClick: exportExport },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(PiExportBold, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Export"))))),
+        filterShow && advanceFilterDataActive && (React.createElement(GridToolbar, null,
             React.createElement("div", { style: {
                     display: 'flex',
-                    justifyContent: 'space-between',
                     alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: '100%',
                 } },
-                React.createElement(OkInput, { style: {
-                        width: '30%',
-                    }, value: searchKeyword, onChange: function (e) { return onFilterChange(e); }, placeholder: "Filter by keyword" }),
-                React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', gap: '15px' } },
-                    React.createElement(OkButton, { onClick: function () {
-                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: true })); });
-                        }, themeColor: 'primary', type: "button" }, "Column option"),
-                    React.createElement(OkButton, { style: {
-                            width: '120px',
-                        }, title: "Export Excel", themeColor: 'primary', type: "button", onClick: exportExport }, "Export"),
-                    React.createElement(OkButton, { themeColor: 'primary', type: "button" }, "Open in Queries"),
-                    React.createElement(OkButton, { onClick: addNew, themeColor: 'primary', type: "button" }, "Create +"),
-                    React.createElement(OkButton, { onClick: function () {
-                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnConfigsModel: true })); });
-                        }, themeColor: 'primary', type: "button" }, "view option")))),
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        gap: '20px',
+                    } },
+                    advanceFilterData.map(function (item, index) { return (React.createElement("div", null,
+                        item.type === 'combBox' && (React.createElement(ComboBox, { data: item.data, textField: item.textField, value: item.value, onChange: item.onchange, label: item.label, filterable: item.filterable, onFilterChange: item.filterChange })),
+                        item.type === 'datePicker' && (React.createElement("div", { style: { paddingTop: '1.2rem' } },
+                            React.createElement(DatePicker, { value: item.value, onChange: item.onchange, placeholder: item.placeholder }))))); }),
+                    React.createElement(OkButton, { type: "button", onClick: function () { return setFilterShow(false); }, themeColor: "primary", style: { marginTop: '1.2rem', padding: '0px 30px' } }, "Apply")),
+                React.createElement(OkButton, { style: {
+                        backgroundColor: 'transparent',
+                        border: 'none',
+                        boxShadow: 'none',
+                        fontSize: '24px',
+                        fontWeight: 700,
+                        paddingTop: '1.2rem',
+                    }, type: "button", onClick: function () { return setFilterShow(false); } },
+                    React.createElement(IoClose, null))))),
         React.createElement(ExcelExport, { data: dataResult, ref: excelExport },
-            React.createElement(StyledGrid, __assign({ onHeaderSelectionChange: function (e) {
+            React.createElement(StyledGrid, __assign({ onDataStateChange: onDataStateChange, onItemChange: onItemChange, ref: grid, skip: skip, filterable: filterable, reorderable: reorderable, groupable: groupable, resizable: resizable, data: dataResult, dataItemKey: dataItemKey, take: take, selectField: selectField, editField: "inEdit", sortable: {
+                    mode: 'single',
+                    allowUnsort: true,
+                }, detail: detailComponent, size: size, expandField: "expanded", pageable: {
+                    buttonCount: 4,
+                    pageSizes: [2, 10, 15, 'All'],
+                    pageSizeValue: pageSizeValue,
+                } }, dataState, { onHeaderSelectionChange: function (e) {
                     return onHeaderSelectionChange(e);
                 }, onSelectionChange: function (e) {
                     return onSelectionChange(e);
                 }, onColumnReorder: function (e) {
                     onColumnReorderChange(e);
-                }, skip: skip, onExpandChange: function (e) {
-                    expandChange(e);
-                }, onDataStateChange: onDataStateChange, onItemChange: onItemChange, pageable: {
-                    buttonCount: 4,
-                    pageSizes: [2, 10, 15, 'All'],
-                    pageSizeValue: pageSizeValue,
-                }, filterable: filterable, editField: editField, reorderable: reorderable, groupable: groupable, resizable: resizable, style: style, data: filteredProducts, dataItemKey: dataItemKey, take: take, sortable: sortable, detail: detail, expandField: expandField }, dataState), columns.map(function (col, index) { return (React.createElement(GridColumn, { filterable: true, key: index, editable: true, field: col.field, title: col.title, format: col.format, cell: col.cell, width: col.width, headerSelectionValue: col.headerSelectionValue, editor: col.editor })); }))),
+                }, onExpandChange: function (e) {
+                    handleExpandChange(e);
+                } }), columns.map(function (col, index) { return (React.createElement(GridColumn, { filterable: true, key: index, editable: true, field: col.field, title: col.title, format: col.format, cell: col.cell, width: col.width, headerSelectionValue: col.headerSelectionValue, editor: col.editor })); }))),
         columnOption.columnOptionModel && (React.createElement(ColumnAdd, { setColumnOption: setColumnOption, setColumns: setColumns, columns: columns, allColumnsField: allColumnsField, dataResult: dataResult, setDataResult: setDataResult })),
         columnOption.columnConfigsModel && (React.createElement(GridFeatureEnableHandler, { gridOptions: gridOptions, setGridOptions: setGridOptions, setColumnOption: setColumnOption }))));
 };
@@ -345,7 +483,7 @@ var SortableItem = function (_a) {
             }, onClick: function () { return handleRemoveColumn(col.id); } }, "X")));
 };
 var ColumnAdd = function (_a) {
-    var columns = _a.columns, setColumns = _a.setColumns, setColumnOption = _a.setColumnOption, allColumnsField = _a.allColumnsField;
+    _a.columns; var setColumns = _a.setColumns, setColumnOption = _a.setColumnOption, allColumnsField = _a.allColumnsField;
     var _b = useState([]), selectedColumn = _b[0], setSelectedColumn = _b[1];
     var handleAddColumn = function () {
         setSelectedColumn(function (item) {
@@ -385,10 +523,6 @@ var ColumnAdd = function (_a) {
             return !selectedColumn.some(function (col) { return col.field === allCol.field; });
         });
     }, [selectedColumn, allColumnsField]);
-    useEffect(function () {
-        var filteredData = columns.filter(function (item) { return item.title !== 'Actions' && item.id !== 8; });
-        setSelectedColumn(filteredData);
-    }, [columns]);
     return (React.createElement("div", null,
         React.createElement(Dialog, { onClose: function () {
                 return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: false })); });