@zeedhi/teknisa-components-vuetify 1.130.0 → 1.132.0

package/dist/tek-components-vuetify.esm.js

@@ -2,7 +2,7 @@ import { ModalService, IterableComponentRender, Icons } from '@zeedhi/common';
 import { ZdUserInfo } from '@zeedhi/zd-user-info-vue';
 import { Metadata, Config, dayjs, Singleton, Utils, I18n, Loader, VersionService } from '@zeedhi/core';
 import { Prop, Component, Watch } from 'vue-property-decorator';
-import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridFilterButton as TekGridFilterButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, ProductCard, TekTreeGrid as TekTreeGrid$1, TekUserInfo as TekUserInfo$1, TekUserInfoList as TekUserInfoList$1, TekDragGrid as TekDragGrid$1, IterableCarousel, Loading, Notifications } from '@zeedhi/teknisa-components-common';
+import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridExportButton as TekGridExportButton$1, TekGridFilterButton as TekGridFilterButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, ProductCard, TekTreeGrid as TekTreeGrid$1, TekUserInfo as TekUserInfo$1, TekUserInfoList as TekUserInfoList$1, TekDragGrid as TekDragGrid$1, IterableCarousel, Loading, Notifications } from '@zeedhi/teknisa-components-common';
 import { PropWatch, ZdComponent, ZdComponentRender, components as components$1, ZdForm, EditableMixin, NavigableTableMixin, ZdGrid, ZdIterableColumnsButton, FillHeightMixin, ZdIterableComponentRender, ZdLoading, ZdIterable } from '@zeedhi/vuetify';
 import debounce from 'lodash.debounce';
 import Vue from 'vue';
@@ -56,7 +56,7 @@ __decorate([
 TekBreadcrumbHeader = __decorate([
     Component
 ], TekBreadcrumbHeader);
-var script$m = TekBreadcrumbHeader;
+var script$n = TekBreadcrumbHeader;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -187,10 +187,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$n = script$m;
+const __vue_script__$o = script$n;
 
 /* template */
-var __vue_render__$n = function () {
+var __vue_render__$o = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -261,34 +261,34 @@ var __vue_render__$n = function () {
     1
   )
 };
-var __vue_staticRenderFns__$n = [];
-__vue_render__$n._withStripped = true;
+var __vue_staticRenderFns__$o = [];
+__vue_render__$o._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$n = function (inject) {
+  const __vue_inject_styles__$o = function (inject) {
     if (!inject) return
     inject("data-v-73099341_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n  display: flex;\n  padding-top: 5px;\n  padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n  margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n  padding: 0;\n  font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n  font-size: 32px;\n  font-weight: bold;\n  line-height: 35px;\n  margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n  margin: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$n = undefined;
+  const __vue_scope_id__$o = undefined;
   /* module identifier */
-  const __vue_module_identifier__$n = undefined;
+  const __vue_module_identifier__$o = undefined;
   /* functional template */
-  const __vue_is_functional_template__$n = false;
+  const __vue_is_functional_template__$o = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$n = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
-    __vue_inject_styles__$n,
-    __vue_script__$n,
-    __vue_scope_id__$n,
-    __vue_is_functional_template__$n,
-    __vue_module_identifier__$n,
+  const __vue_component__$o = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
+    __vue_inject_styles__$o,
+    __vue_script__$o,
+    __vue_scope_id__$o,
+    __vue_is_functional_template__$o,
+    __vue_module_identifier__$o,
     false,
     createInjector,
     undefined,
@@ -325,13 +325,13 @@ __decorate([
 TekCardTitle = __decorate([
     Component
 ], TekCardTitle);
-var script$l = TekCardTitle;
+var script$m = TekCardTitle;
 
 /* script */
-const __vue_script__$m = script$l;
+const __vue_script__$n = script$m;
 
 /* template */
-var __vue_render__$m = function () {
+var __vue_render__$n = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -431,34 +431,34 @@ var __vue_render__$m = function () {
     1
   )
 };
-var __vue_staticRenderFns__$m = [];
-__vue_render__$m._withStripped = true;
+var __vue_staticRenderFns__$n = [];
+__vue_render__$n._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$m = function (inject) {
+  const __vue_inject_styles__$n = function (inject) {
     if (!inject) return
     inject("data-v-c08ce4fa_0", { source: ".tek-card-title-row {\n  display: flex;\n  align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n  color: var(--v-primary-base);\n  font-weight: bold;\n  font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n  padding-left: 10px;\n  color: var(--zd-font-color);\n  font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n  color: var(--v-primary-base);\n  padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n  margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n  text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n  text-decoration: none;\n  cursor: default;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$m = undefined;
+  const __vue_scope_id__$n = undefined;
   /* module identifier */
-  const __vue_module_identifier__$m = undefined;
+  const __vue_module_identifier__$n = undefined;
   /* functional template */
-  const __vue_is_functional_template__$m = false;
+  const __vue_is_functional_template__$n = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$m = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
-    __vue_inject_styles__$m,
-    __vue_script__$m,
-    __vue_scope_id__$m,
-    __vue_is_functional_template__$m,
-    __vue_module_identifier__$m,
+  const __vue_component__$n = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
+    __vue_inject_styles__$n,
+    __vue_script__$n,
+    __vue_scope_id__$n,
+    __vue_is_functional_template__$n,
+    __vue_module_identifier__$n,
     false,
     createInjector,
     undefined,
@@ -526,13 +526,13 @@ __decorate([
 TekCrudAddButton = __decorate([
     Component
 ], TekCrudAddButton);
-var script$k = TekCrudAddButton;
+var script$l = TekCrudAddButton;
 
 /* script */
-const __vue_script__$l = script$k;
+const __vue_script__$m = script$l;
 
 /* template */
-var __vue_render__$l = function () {
+var __vue_render__$m = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -597,17 +597,17 @@ var __vue_render__$l = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$l = [];
-__vue_render__$l._withStripped = true;
+var __vue_staticRenderFns__$m = [];
+__vue_render__$m._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$l = undefined;
+  const __vue_inject_styles__$m = undefined;
   /* scoped */
-  const __vue_scope_id__$l = undefined;
+  const __vue_scope_id__$m = undefined;
   /* module identifier */
-  const __vue_module_identifier__$l = undefined;
+  const __vue_module_identifier__$m = undefined;
   /* functional template */
-  const __vue_is_functional_template__$l = false;
+  const __vue_is_functional_template__$m = false;
   /* style inject */
   
   /* style inject SSR */
@@ -616,13 +616,13 @@ __vue_render__$l._withStripped = true;
   
 
   
-  const __vue_component__$l = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
-    __vue_inject_styles__$l,
-    __vue_script__$l,
-    __vue_scope_id__$l,
-    __vue_is_functional_template__$l,
-    __vue_module_identifier__$l,
+  const __vue_component__$m = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
+    __vue_inject_styles__$m,
+    __vue_script__$m,
+    __vue_scope_id__$m,
+    __vue_is_functional_template__$m,
+    __vue_module_identifier__$m,
     false,
     undefined,
     undefined,
@@ -650,13 +650,13 @@ __decorate([
 TekCrudCancelButton = __decorate([
     Component
 ], TekCrudCancelButton);
-var script$j = TekCrudCancelButton;
+var script$k = TekCrudCancelButton;
 
 /* script */
-const __vue_script__$k = script$j;
+const __vue_script__$l = script$k;
 
 /* template */
-var __vue_render__$k = function () {
+var __vue_render__$l = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -721,17 +721,17 @@ var __vue_render__$k = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$k = [];
-__vue_render__$k._withStripped = true;
+var __vue_staticRenderFns__$l = [];
+__vue_render__$l._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$k = undefined;
+  const __vue_inject_styles__$l = undefined;
   /* scoped */
-  const __vue_scope_id__$k = undefined;
+  const __vue_scope_id__$l = undefined;
   /* module identifier */
-  const __vue_module_identifier__$k = undefined;
+  const __vue_module_identifier__$l = undefined;
   /* functional template */
-  const __vue_is_functional_template__$k = false;
+  const __vue_is_functional_template__$l = false;
   /* style inject */
   
   /* style inject SSR */
@@ -740,13 +740,13 @@ __vue_render__$k._withStripped = true;
   
 
   
-  const __vue_component__$k = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
-    __vue_inject_styles__$k,
-    __vue_script__$k,
-    __vue_scope_id__$k,
-    __vue_is_functional_template__$k,
-    __vue_module_identifier__$k,
+  const __vue_component__$l = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
+    __vue_inject_styles__$l,
+    __vue_script__$l,
+    __vue_scope_id__$l,
+    __vue_is_functional_template__$l,
+    __vue_module_identifier__$l,
     false,
     undefined,
     undefined,
@@ -780,13 +780,13 @@ __decorate([
 TekCrudDeleteButton = __decorate([
     Component
 ], TekCrudDeleteButton);
-var script$i = TekCrudDeleteButton;
+var script$j = TekCrudDeleteButton;
 
 /* script */
-const __vue_script__$j = script$i;
+const __vue_script__$k = script$j;
 
 /* template */
-var __vue_render__$j = function () {
+var __vue_render__$k = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -851,17 +851,17 @@ var __vue_render__$j = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$j = [];
-__vue_render__$j._withStripped = true;
+var __vue_staticRenderFns__$k = [];
+__vue_render__$k._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$j = undefined;
+  const __vue_inject_styles__$k = undefined;
   /* scoped */
-  const __vue_scope_id__$j = undefined;
+  const __vue_scope_id__$k = undefined;
   /* module identifier */
-  const __vue_module_identifier__$j = undefined;
+  const __vue_module_identifier__$k = undefined;
   /* functional template */
-  const __vue_is_functional_template__$j = false;
+  const __vue_is_functional_template__$k = false;
   /* style inject */
   
   /* style inject SSR */
@@ -870,13 +870,13 @@ __vue_render__$j._withStripped = true;
   
 
   
-  const __vue_component__$j = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
-    __vue_inject_styles__$j,
-    __vue_script__$j,
-    __vue_scope_id__$j,
-    __vue_is_functional_template__$j,
-    __vue_module_identifier__$j,
+  const __vue_component__$k = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
+    __vue_inject_styles__$k,
+    __vue_script__$k,
+    __vue_scope_id__$k,
+    __vue_is_functional_template__$k,
+    __vue_module_identifier__$k,
     false,
     undefined,
     undefined,
@@ -895,13 +895,13 @@ let TekCrudForm = class TekCrudForm extends ZdForm {
 TekCrudForm = __decorate([
     Component
 ], TekCrudForm);
-var script$h = TekCrudForm;
+var script$i = TekCrudForm;
 
 /* script */
-const __vue_script__$i = script$h;
+const __vue_script__$j = script$i;
 
 /* template */
-var __vue_render__$i = function () {
+var __vue_render__$j = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -987,34 +987,34 @@ var __vue_render__$i = function () {
     2
   )
 };
-var __vue_staticRenderFns__$i = [];
-__vue_render__$i._withStripped = true;
+var __vue_staticRenderFns__$j = [];
+__vue_render__$j._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$i = function (inject) {
+  const __vue_inject_styles__$j = function (inject) {
     if (!inject) return
     inject("data-v-58e74857_0", { source: ".tek-crud-form {\n  outline: none;\n  overflow-x: hidden;\n  padding-bottom: 4px;\n}\n.tek-crud-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.tek-crud-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$i = undefined;
+  const __vue_scope_id__$j = undefined;
   /* module identifier */
-  const __vue_module_identifier__$i = undefined;
+  const __vue_module_identifier__$j = undefined;
   /* functional template */
-  const __vue_is_functional_template__$i = false;
+  const __vue_is_functional_template__$j = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$i = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
-    __vue_inject_styles__$i,
-    __vue_script__$i,
-    __vue_scope_id__$i,
-    __vue_is_functional_template__$i,
-    __vue_module_identifier__$i,
+  const __vue_component__$j = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
+    __vue_inject_styles__$j,
+    __vue_script__$j,
+    __vue_scope_id__$j,
+    __vue_is_functional_template__$j,
+    __vue_module_identifier__$j,
     false,
     createInjector,
     undefined,
@@ -1039,13 +1039,13 @@ __decorate([
 TekCrudSaveButton = __decorate([
     Component
 ], TekCrudSaveButton);
-var script$g = TekCrudSaveButton;
+var script$h = TekCrudSaveButton;
 
 /* script */
-const __vue_script__$h = script$g;
+const __vue_script__$i = script$h;
 
 /* template */
-var __vue_render__$h = function () {
+var __vue_render__$i = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1110,17 +1110,17 @@ var __vue_render__$h = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$h = [];
-__vue_render__$h._withStripped = true;
+var __vue_staticRenderFns__$i = [];
+__vue_render__$i._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$h = undefined;
+  const __vue_inject_styles__$i = undefined;
   /* scoped */
-  const __vue_scope_id__$h = undefined;
+  const __vue_scope_id__$i = undefined;
   /* module identifier */
-  const __vue_module_identifier__$h = undefined;
+  const __vue_module_identifier__$i = undefined;
   /* functional template */
-  const __vue_is_functional_template__$h = false;
+  const __vue_is_functional_template__$i = false;
   /* style inject */
   
   /* style inject SSR */
@@ -1129,13 +1129,13 @@ __vue_render__$h._withStripped = true;
   
 
   
-  const __vue_component__$h = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
-    __vue_inject_styles__$h,
-    __vue_script__$h,
-    __vue_scope_id__$h,
-    __vue_is_functional_template__$h,
-    __vue_module_identifier__$h,
+  const __vue_component__$i = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
+    __vue_inject_styles__$i,
+    __vue_script__$i,
+    __vue_scope_id__$i,
+    __vue_is_functional_template__$i,
+    __vue_module_identifier__$i,
     false,
     undefined,
     undefined,
@@ -1177,8 +1177,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
         }
     }
     mounted() {
-        this.originalChangeLayout = this.instance.changeLayout;
-        this.instance.changeLayout = this.onChangeLayout;
+        this.instance.addEvent('changeLayout', this.updateFixedColumnsAfterLayoutChange.bind(this));
         this.instance.viewUpdateScrollData = this.calcScrollData;
         this.instance.viewUpdateFixedColumns = this.updateFixedColumns.bind(this);
     }
@@ -1189,19 +1188,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
         }
         return minWidth;
     }
-    onChangeLayout(event, element) {
-        if (this.originalChangeLayout) {
-            this.originalChangeLayout.call(this.instance, event, element);
-        }
-        if (this.instance.showLayoutOptions) {
-            try {
-                const layoutOptions = Metadata.getInstance(`${this.instance.name}_layout_options`);
-                layoutOptions.layoutEdited = true;
-            }
-            catch (_a) {
-                // do nothing
-            }
-        }
+    updateFixedColumnsAfterLayoutChange() {
         setTimeout(this.updateFixedColumns.bind(this));
     }
     getFilterActivatorEvents(on, column) {
@@ -1264,7 +1251,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
                 datasource.dynamicFilter[column.name][index][prop] = component.value;
                 if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                     this.debouncedDatasourceGet(this.instance);
-                    this.onChangeLayout(event, element);
+                    this.instance.changeLayout(event, element);
                 }
             }
         }
@@ -1348,7 +1335,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                 this.debouncedDatasourceGet(this.instance);
-                this.onChangeLayout(event, element);
+                this.instance.changeLayout(event, element);
                 this.clearHelperValues(column);
             }
         }
@@ -1362,7 +1349,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
                 this.debouncedDatasourceGet(this.instance);
-                this.onChangeLayout(event, element);
+                this.instance.changeLayout(event, element);
                 this.clearHelperValues(column);
             }
         }
@@ -1418,6 +1405,13 @@ let TekGrid = class TekGrid extends ZdGridEditable {
         return !this.instance.cellSelection && (!!((row.group && row.groupValue === currentRow.groupValue)
             || (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey])));
     }
+    isNavigableRow(element) {
+        return window.getComputedStyle(element).display !== 'none'
+            && !element.classList.contains('footer')
+            && !element.classList.contains('summary')
+            && !element.querySelector('.zd-table-group-header')
+            && !!element.querySelector('td.zd-table-cell');
+    }
     getVisibleData() {
         const groupColumns = !!this.instance.groupColumnNames.length;
         if (groupColumns || (this.instance.showSummaryTotal && this.instance.summaryColumns.length)) {
@@ -1677,10 +1671,10 @@ TekGrid = __decorate([
 var TekGrid$1 = TekGrid;
 
 /* script */
-const __vue_script__$g = TekGrid$1;
+const __vue_script__$h = TekGrid$1;
 
 /* template */
-var __vue_render__$g = function () {
+var __vue_render__$h = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2889,34 +2883,34 @@ var __vue_render__$g = function () {
     },
   })
 };
-var __vue_staticRenderFns__$g = [];
-__vue_render__$g._withStripped = true;
+var __vue_staticRenderFns__$h = [];
+__vue_render__$h._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$g = function (inject) {
+  const __vue_inject_styles__$h = function (inject) {
     if (!inject) return
     inject("data-v-d96b7840_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: auto;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-first-group-cell {\n  display: flex;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 1rem;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.toolbar-visible {\n  width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$g = undefined;
+  const __vue_scope_id__$h = undefined;
   /* module identifier */
-  const __vue_module_identifier__$g = undefined;
+  const __vue_module_identifier__$h = undefined;
   /* functional template */
-  const __vue_is_functional_template__$g = false;
+  const __vue_is_functional_template__$h = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$g = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
-    __vue_inject_styles__$g,
-    __vue_script__$g,
-    __vue_scope_id__$g,
-    __vue_is_functional_template__$g,
-    __vue_module_identifier__$g,
+  const __vue_component__$h = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
+    __vue_inject_styles__$h,
+    __vue_script__$h,
+    __vue_scope_id__$h,
+    __vue_is_functional_template__$h,
+    __vue_module_identifier__$h,
     false,
     createInjector,
     undefined,
@@ -2940,13 +2934,13 @@ __decorate([
 TekGridCellIdentation = __decorate([
     Component
 ], TekGridCellIdentation);
-var script$f = TekGridCellIdentation;
+var script$g = TekGridCellIdentation;
 
 /* script */
-const __vue_script__$f = script$f;
+const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$f = function () {
+var __vue_render__$g = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2963,34 +2957,34 @@ var __vue_render__$f = function () {
     ],
   })
 };
-var __vue_staticRenderFns__$f = [];
-__vue_render__$f._withStripped = true;
+var __vue_staticRenderFns__$g = [];
+__vue_render__$g._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$f = function (inject) {
+  const __vue_inject_styles__$g = function (inject) {
     if (!inject) return
     inject("data-v-d107dce8_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$f = undefined;
+  const __vue_scope_id__$g = undefined;
   /* module identifier */
-  const __vue_module_identifier__$f = undefined;
+  const __vue_module_identifier__$g = undefined;
   /* functional template */
-  const __vue_is_functional_template__$f = false;
+  const __vue_is_functional_template__$g = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$f = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
-    __vue_inject_styles__$f,
-    __vue_script__$f,
-    __vue_scope_id__$f,
-    __vue_is_functional_template__$f,
-    __vue_module_identifier__$f,
+  const __vue_component__$g = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
+    __vue_inject_styles__$g,
+    __vue_script__$g,
+    __vue_scope_id__$g,
+    __vue_is_functional_template__$g,
+    __vue_module_identifier__$g,
     false,
     createInjector,
     undefined,
@@ -3008,13 +3002,13 @@ __decorate([
 TekGridHeaderIndentation = __decorate([
     Component$1
 ], TekGridHeaderIndentation);
-var script$e = TekGridHeaderIndentation;
+var script$f = TekGridHeaderIndentation;
 
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$f = script$f;
 
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3028,17 +3022,17 @@ var __vue_render__$e = function () {
     ],
   })
 };
-var __vue_staticRenderFns__$e = [];
-__vue_render__$e._withStripped = true;
+var __vue_staticRenderFns__$f = [];
+__vue_render__$f._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$e = undefined;
+  const __vue_inject_styles__$f = undefined;
   /* scoped */
-  const __vue_scope_id__$e = undefined;
+  const __vue_scope_id__$f = undefined;
   /* module identifier */
-  const __vue_module_identifier__$e = undefined;
+  const __vue_module_identifier__$f = undefined;
   /* functional template */
-  const __vue_is_functional_template__$e = false;
+  const __vue_is_functional_template__$f = false;
   /* style inject */
   
   /* style inject SSR */
@@ -3047,13 +3041,13 @@ __vue_render__$e._withStripped = true;
   
 
   
-  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
-    __vue_inject_styles__$e,
-    __vue_script__$e,
-    __vue_scope_id__$e,
-    __vue_is_functional_template__$e,
-    __vue_module_identifier__$e,
+  const __vue_component__$f = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
+    __vue_inject_styles__$f,
+    __vue_script__$f,
+    __vue_scope_id__$f,
+    __vue_is_functional_template__$f,
+    __vue_module_identifier__$f,
     false,
     undefined,
     undefined,
@@ -3098,13 +3092,13 @@ __decorate([
 TekGridColumnFilter = __decorate([
     Component$1
 ], TekGridColumnFilter);
-var script$d = TekGridColumnFilter;
+var script$e = TekGridColumnFilter;
 
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$e = script$e;
 
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$e = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3283,17 +3277,17 @@ var __vue_render__$d = function () {
     1
   )
 };
-var __vue_staticRenderFns__$d = [];
-__vue_render__$d._withStripped = true;
+var __vue_staticRenderFns__$e = [];
+__vue_render__$e._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$d = undefined;
+  const __vue_inject_styles__$e = undefined;
   /* scoped */
-  const __vue_scope_id__$d = undefined;
+  const __vue_scope_id__$e = undefined;
   /* module identifier */
-  const __vue_module_identifier__$d = undefined;
+  const __vue_module_identifier__$e = undefined;
   /* functional template */
-  const __vue_is_functional_template__$d = false;
+  const __vue_is_functional_template__$e = false;
   /* style inject */
   
   /* style inject SSR */
@@ -3302,13 +3296,13 @@ __vue_render__$d._withStripped = true;
   
 
   
-  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
-    __vue_inject_styles__$d,
-    __vue_script__$d,
-    __vue_scope_id__$d,
-    __vue_is_functional_template__$d,
-    __vue_module_identifier__$d,
+  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+    __vue_inject_styles__$e,
+    __vue_script__$e,
+    __vue_scope_id__$e,
+    __vue_is_functional_template__$e,
+    __vue_module_identifier__$e,
     false,
     undefined,
     undefined,
@@ -4277,6 +4271,9 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
         this.menuIsOpened = false;
     }
 };
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekGridColumnsButton.prototype, "gridName", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
 ], TekGridColumnsButton.prototype, "hideGroups", void 0);
@@ -4286,7 +4283,52 @@ __decorate([
 TekGridColumnsButton = __decorate([
     Component
 ], TekGridColumnsButton);
-var script$c = TekGridColumnsButton;
+var script$d = TekGridColumnsButton;
+
+/**
+ * TekGrid export button/dropdown component.
+ */
+let TekGridExportButton = class TekGridExportButton extends ZdComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekGridExportButton$1;
+    }
+    get buttonName() {
+        return this.instance.gridName
+            ? `${this.instance.gridName}_exportButton`
+            : `${this.instance.name}_button`;
+    }
+    mounted() {
+        this.$nextTick(() => this.loadGrid());
+    }
+    loadGrid() {
+        this.instance.loadGrid();
+        this.$forceUpdate();
+    }
+    getActivatorEvents(on) {
+        return Object.assign(Object.assign({}, on), { click: (event) => {
+                this.loadGrid();
+                if (on.click)
+                    on.click(event);
+            } });
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekGridExportButton.prototype, "gridName", void 0);
+__decorate([
+    PropWatch({ type: [Object, String], default: () => { } })
+], TekGridExportButton.prototype, "grid", void 0);
+__decorate([
+    PropWatch({ type: [Array], default: undefined })
+], TekGridExportButton.prototype, "exportConfig", void 0);
+__decorate([
+    PropWatch({ type: [Array], default: undefined })
+], TekGridExportButton.prototype, "exportActions", void 0);
+TekGridExportButton = __decorate([
+    Component
+], TekGridExportButton);
+var script$c = TekGridExportButton;
 
 // eslint-disable-next-line prefer-destructuring
 const ZdButton = components$1.ZdButton;
@@ -4353,19 +4395,19 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             var _a, _b;
             if ((_b = (_a = this.instance.grid) === null || _a === void 0 ? void 0 : _a.datasource) === null || _b === void 0 ? void 0 : _b.filter) {
                 this.updateFilterWatcher = false;
-                this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+                this.instance.grid.datasource.filter = this.createFilterChangeProxy(this.instance.grid.datasource.filter);
                 this.$nextTick(() => { this.updateFilterWatcher = true; });
-                if (this.instance.grid.datasource instanceof TekRestDatasource) {
+                if (this.isDynamicFilterDatasource(this.instance.grid.datasource)) {
                     this.updateDynamicFilterWatcher = false;
-                    this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+                    this.instance.grid.datasource.dynamicFilter = this.createFilterChangeProxy(this.instance.grid.datasource.dynamicFilter);
                     this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
                 }
             }
         });
     }
-    createFilterProxy(filter) {
+    createFilterChangeProxy(filter) {
         const self = this;
-        return new Proxy(filter, {
+        const handler = {
             set(target, prop, value) {
                 if (target[prop] !== value) {
                     target[prop] = value;
@@ -4373,14 +4415,9 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 }
                 return true;
             },
-        });
-    }
-    createDynamicFilterProxy(filter) {
-        const self = this;
-        const handler = {
-            set(target, prop, value) {
-                if (target[prop] !== value) {
-                    target[prop] = value;
+            deleteProperty(target, prop) {
+                if (prop in target) {
+                    delete target[prop];
                     self.checkFilterChanged();
                 }
                 return true;
@@ -4396,8 +4433,8 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         return new Proxy(filter, handler);
     }
     checkFilterChanged() {
-        if (!this.applying && this.layoutHasFilter(this.instance.currentLayoutName)) {
-            this.instance.layoutEdited = true;
+        if (!this.applying) {
+            this.instance.layoutEdited = this.instance.hasLayoutChanges();
         }
     }
     datasourceFilterChanged() {
@@ -4405,7 +4442,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             return;
         this.updateFilterWatcher = false;
         this.checkFilterChanged();
-        this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+        this.instance.grid.datasource.filter = this.createFilterChangeProxy(this.instance.grid.datasource.filter);
         this.$nextTick(() => { this.updateFilterWatcher = true; });
     }
     datasourceDynamicFilterChanged() {
@@ -4413,8 +4450,8 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             return;
         this.updateDynamicFilterWatcher = false;
         this.checkFilterChanged();
-        if (this.instance.grid.datasource instanceof TekRestDatasource) {
-            this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+        if (this.isDynamicFilterDatasource(this.instance.grid.datasource)) {
+            this.instance.grid.datasource.dynamicFilter = this.createFilterChangeProxy(this.instance.grid.datasource.dynamicFilter);
         }
         this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
     }
@@ -4428,10 +4465,14 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         component.value = '';
     }
     datasourceDynamicFilter(datasource) {
-        if (datasource instanceof TekRestDatasource)
+        if (this.isDynamicFilterDatasource(datasource))
             return datasource.dynamicFilter;
         return {};
     }
+    isDynamicFilterDatasource(datasource) {
+        return datasource instanceof TekRestDatasource
+            || datasource instanceof TekMemoryDatasource;
+    }
     applyLayout(layout) {
         var _a;
         let groupParamsChanged = false;
@@ -4468,10 +4509,10 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             if (layoutChanged) {
                 this.instance.updateLayout(layout.name, this.getCurrentLayout(layout.name));
             }
-            tableElement.style.width = layout.gridWidth || 'auto';
+            tableElement.style.width = this.getAppliedGridWidth(layout.gridWidth);
             grid.datasource.order = layout.order !== undefined ? [...layout.order] : grid.datasource.order;
             grid.datasource.filter = layout.filter !== undefined ? Object.assign({}, layout.filter) : grid.datasource.filter;
-            if (grid.datasource instanceof TekRestDatasource
+            if (this.isDynamicFilterDatasource(grid.datasource)
                 && layout.dynamicFilter !== undefined) {
                 grid.datasource.dynamicFilter = this.getHelperValues(layout.dynamicFilter, layout.columns || grid.columns);
             }
@@ -4505,7 +4546,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         else {
             grid.datasource.order = [...this.instance.originalDatasourceOrder];
             grid.datasource.filter = Object.assign({}, this.instance.originalDatasourceFilter);
-            if (grid.datasource instanceof TekRestDatasource) {
+            if (this.isDynamicFilterDatasource(grid.datasource)) {
                 grid.datasource.dynamicFilter = this.getHelperValues(this.instance.originalDatasourceDynamicFilter, this.instance.originalColumnProps);
             }
             grid.columns = this.instance.originalColumnProps.map((column) => {
@@ -4596,37 +4637,26 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
     getCurrentLayout(layoutName) {
         const { grid } = this.instance;
         const tableElement = this.getParentTable();
-        const gridWidth = tableElement
-            ? window.getComputedStyle(tableElement).width
-            : 'auto';
+        const tableWidth = tableElement === null || tableElement === void 0 ? void 0 : tableElement.style.width;
+        const gridWidth = tableWidth && tableWidth !== '100%' ? tableWidth : 'auto';
         return {
             name: layoutName,
             gridWidth,
-            order: grid.datasource.order,
-            filter: grid.datasource.filter,
-            dynamicFilter: this.datasourceDynamicFilter(grid.datasource),
-            columns: grid.columns.map((column, index) => {
-                const columnElement = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
-                return {
-                    name: column.name,
-                    label: column.label,
-                    align: column.align,
-                    width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
-                    minWidth: column.minWidth,
-                    maxWidth: column.maxWidth,
-                    isVisible: column.isVisible,
-                    fixed: column.fixed,
-                    grouped: column.grouped,
-                    groupOpened: column.groupOpened,
-                    aggregation: column.aggregation,
-                    filterHelperValue: this.instance.getHelperValue(column),
-                };
-            }),
+            order: [...grid.datasource.order],
+            filter: cloneDeep(grid.datasource.filter),
+            dynamicFilter: cloneDeep(this.datasourceDynamicFilter(grid.datasource)),
+            columns: grid.columns.map((column) => this.instance.getLayoutColumnSnapshot(column)),
         };
     }
+    getAppliedGridWidth(gridWidth) {
+        const normalizedGridWidth = (gridWidth || '').trim();
+        if (!normalizedGridWidth || normalizedGridWidth === 'auto')
+            return '100%';
+        return normalizedGridWidth;
+    }
     getParentTable() {
         var _a;
-        return (_a = this.$el.closest('.zd-grid')) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('table')[0];
+        return (_a = document.getElementById(this.instance.grid.name)) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('table')[0];
     }
     applyOrUpdateLayout(event, layoutName) {
         if (this.instance.layoutEdited) {
@@ -4649,10 +4679,13 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
     }
 };
 __decorate([
-    Watch('instance.grid.datasource.filter')
+    PropWatch({ type: [String], default: '' })
+], TekGridLayoutOptions.prototype, "gridName", void 0);
+__decorate([
+    Watch('instance.grid.datasource.filter', { deep: true })
 ], TekGridLayoutOptions.prototype, "datasourceFilterChanged", null);
 __decorate([
-    Watch('instance.grid.datasource.dynamicFilter')
+    Watch('instance.grid.datasource.dynamicFilter', { deep: true })
 ], TekGridLayoutOptions.prototype, "datasourceDynamicFilterChanged", null);
 TekGridLayoutOptions = __decorate([
     Component
@@ -4814,8 +4847,7 @@ let TekTreeGrid = class TekTreeGrid extends ZdTreeGridEditable {
         }
     }
     mounted() {
-        this.originalChangeTekGridLayout = this.instance.changeLayout;
-        this.instance.changeLayout = this.onChangeTekGridLayout;
+        this.instance.addEvent('changeLayout', this.updateFixedColumnsAfterLayoutChange.bind(this));
         this.updateFixedColumns();
         this.orderColumnVisibility();
     }
@@ -4826,19 +4858,7 @@ let TekTreeGrid = class TekTreeGrid extends ZdTreeGridEditable {
         }
         return minWidth;
     }
-    onChangeTekGridLayout(event, element) {
-        if (this.originalChangeTekGridLayout) {
-            this.originalChangeTekGridLayout.call(this.instance, event, element);
-        }
-        if (this.instance.showLayoutOptions) {
-            try {
-                const layoutOptions = Metadata.getInstance(`${this.instance.name}_layout_options`);
-                layoutOptions.layoutEdited = true;
-            }
-            catch (_a) {
-                // do nothing
-            }
-        }
+    updateFixedColumnsAfterLayoutChange() {
         this.updateFixedColumns();
     }
     getFilterActivatorEvents(on, column) {
@@ -4901,7 +4921,7 @@ let TekTreeGrid = class TekTreeGrid extends ZdTreeGridEditable {
                 datasource.dynamicFilter[column.name][index][prop] = component.value;
                 if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                     this.debouncedDatasourceGet(this.instance);
-                    this.onChangeTekGridLayout(event, element);
+                    this.instance.changeLayout(event, element);
                 }
             }
         }
@@ -5000,7 +5020,7 @@ let TekTreeGrid = class TekTreeGrid extends ZdTreeGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                 this.debouncedDatasourceGet(this.instance);
-                this.onChangeTekGridLayout(event, element);
+                this.instance.changeLayout(event, element);
                 this.clearHelperValues(column);
             }
         }
@@ -5014,7 +5034,7 @@ let TekTreeGrid = class TekTreeGrid extends ZdTreeGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
                 this.debouncedDatasourceGet(this.instance);
-                this.onChangeTekGridLayout(event, element);
+                this.instance.changeLayout(event, element);
                 this.clearHelperValues(column);
             }
         }
@@ -5286,10 +5306,10 @@ TekDragGrid = __decorate([
 var script$3 = TekDragGrid;
 
 /* script */
-const __vue_script__$c = script$3;
+const __vue_script__$d = script$3;
 
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$d = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -6469,34 +6489,34 @@ var __vue_render__$c = function () {
     },
   })
 };
-var __vue_staticRenderFns__$c = [];
-__vue_render__$c._withStripped = true;
+var __vue_staticRenderFns__$d = [];
+__vue_render__$d._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$c = function (inject) {
+  const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
     inject("data-v-e984cc8c_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: auto;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-first-group-cell {\n  display: flex;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 1rem;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.toolbar-visible {\n  width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$c = undefined;
+  const __vue_scope_id__$d = undefined;
   /* module identifier */
-  const __vue_module_identifier__$c = undefined;
+  const __vue_module_identifier__$d = undefined;
   /* functional template */
-  const __vue_is_functional_template__$c = false;
+  const __vue_is_functional_template__$d = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
-    __vue_inject_styles__$c,
-    __vue_script__$c,
-    __vue_scope_id__$c,
-    __vue_is_functional_template__$c,
-    __vue_module_identifier__$c,
+  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
+    __vue_inject_styles__$d,
+    __vue_script__$d,
+    __vue_scope_id__$d,
+    __vue_is_functional_template__$d,
+    __vue_module_identifier__$d,
     false,
     createInjector,
     undefined,
@@ -6504,10 +6524,10 @@ __vue_render__$c._withStripped = true;
   );
 
 /* script */
-const __vue_script__$b = script$c;
+const __vue_script__$c = script$d;
 
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$c = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -6762,13 +6782,128 @@ var __vue_render__$b = function () {
     ]
   )
 };
+var __vue_staticRenderFns__$c = [];
+__vue_render__$c._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$c = function (inject) {
+    if (!inject) return
+    inject("data-v-9bb538a0_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  background-color: var(--zd-background-base);\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-2);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$c = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$c = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$c = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
+    __vue_inject_styles__$c,
+    __vue_script__$c,
+    __vue_scope_id__$c,
+    __vue_is_functional_template__$c,
+    __vue_module_identifier__$c,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+/* script */
+const __vue_script__$b = script$c;
+
+/* template */
+var __vue_render__$b = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "v-menu",
+    {
+      directives: [
+        {
+          name: "show",
+          rawName: "v-show",
+          value: _vm.instance.isVisible,
+          expression: "instance.isVisible",
+        },
+      ],
+      class: _vm.instance.cssClass,
+      style: _vm.instance.cssStyle,
+      attrs: { id: _vm.instance.name, name: _vm.instance.name, "offset-y": "" },
+      scopedSlots: _vm._u([
+        {
+          key: "activator",
+          fn: function (ref) {
+            var on = ref.on;
+            return [
+              _c(
+                "zd-button",
+                _vm._g(
+                  {
+                    directives: [
+                      {
+                        name: "show",
+                        rawName: "v-show",
+                        value: _vm.instance.isVisible,
+                        expression: "instance.isVisible",
+                      },
+                    ],
+                    attrs: {
+                      name: _vm.buttonName,
+                      "icon-name": "fileDownload",
+                      icon: "",
+                    },
+                  },
+                  _vm.getActivatorEvents(on)
+                )
+              ),
+            ]
+          },
+        },
+      ]),
+    },
+    [
+      _vm._v(" "),
+      _c(
+        "v-list",
+        { class: ["tekgrid-actions-dropdown", _vm.instance.cssClass] },
+        _vm._l(_vm.instance.children, function (child, index) {
+          return _c(
+            child.component,
+            _vm._b(
+              {
+                key: index,
+                tag: "component",
+                staticClass: "zd-dropdown-component",
+                attrs: { parent: _vm.instance },
+              },
+              "component",
+              child,
+              false
+            )
+          )
+        }),
+        1
+      ),
+    ],
+    1
+  )
+};
 var __vue_staticRenderFns__$b = [];
 __vue_render__$b._withStripped = true;
 
   /* style */
   const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-9bb538a0_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  background-color: var(--zd-background-base);\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-2);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+    inject("data-v-2a5c13a2_0", { source: ".tekgrid-actions-dropdown .zd-dropdown-component {\n  box-sizing: border-box;\n  width: 100%;\n}\n.tekgrid-actions-dropdown > .tek-grid-export-multioption-row {\n  box-sizing: border-box;\n  min-height: 44px;\n  padding: 6px 14px 6px 14px;\n}\n.tekgrid-actions-dropdown > .zd-button {\n  justify-content: flex-start;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -6813,7 +6948,7 @@ var __vue_render__$a = function () {
         icon: true,
         cssClass: "tek-grid-filter-button",
         iconName: "filter",
-        isVisible: _vm.instance.grid.filterButton,
+        isVisible: _vm.instance.isVisible,
         events: Object.assign({}, _vm.getEvents(), { click: _vm.filterClick }),
       },
       false
@@ -6826,7 +6961,7 @@ __vue_render__$a._withStripped = true;
   /* style */
   const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-ba50cc2a_0", { source: ".zd-container.tek-grid-filter-content-container {\n  position: relative;\n  left: calc(var(--zd-default-padding) * -1) !important;\n  padding-left: var(--zd-default-padding) !important;\n  width: calc(100% + var(--zd-default-padding) * 2) !important;\n  padding-right: var(--zd-default-padding) !important;\n  max-width: none !important;\n  overflow-x: clip !important;\n}", map: undefined, media: undefined });
+    inject("data-v-806cc316_0", { source: ".zd-container.tek-grid-filter-content-container {\n  position: relative;\n  left: calc(var(--zd-default-padding) * -1) !important;\n  padding-left: var(--zd-default-padding) !important;\n  width: calc(100% + var(--zd-default-padding) * 2) !important;\n  padding-right: var(--zd-default-padding) !important;\n  max-width: none !important;\n  overflow-x: clip !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -8978,19 +9113,20 @@ __vue_render__._withStripped = true;
   );
 
 const components = {
-    TekBreadcrumbHeader: __vue_component__$n,
-    TekCardTitle: __vue_component__$m,
-    TekCrudAddButton: __vue_component__$l,
-    TekCrudCancelButton: __vue_component__$k,
-    TekCrudDeleteButton: __vue_component__$j,
-    TekCrudForm: __vue_component__$i,
-    TekCrudSaveButton: __vue_component__$h,
-    TekGrid: __vue_component__$g,
-    TekGridCellIdentation: __vue_component__$f,
-    TekGridHeaderIndentation: __vue_component__$e,
-    TekGridColumnFilter: __vue_component__$d,
-    TekDragGrid: __vue_component__$c,
-    TekGridColumnsButton: __vue_component__$b,
+    TekBreadcrumbHeader: __vue_component__$o,
+    TekCardTitle: __vue_component__$n,
+    TekCrudAddButton: __vue_component__$m,
+    TekCrudCancelButton: __vue_component__$l,
+    TekCrudDeleteButton: __vue_component__$k,
+    TekCrudForm: __vue_component__$j,
+    TekCrudSaveButton: __vue_component__$i,
+    TekGrid: __vue_component__$h,
+    TekGridCellIdentation: __vue_component__$g,
+    TekGridHeaderIndentation: __vue_component__$f,
+    TekGridColumnFilter: __vue_component__$e,
+    TekDragGrid: __vue_component__$d,
+    TekGridColumnsButton: __vue_component__$c,
+    TekGridExportButton: __vue_component__$b,
     TekGridFilterButton: __vue_component__$a,
     TekGridLayoutOptions: __vue_component__$9,
     TekImage: __vue_component__$8,
@@ -9026,4 +9162,4 @@ const TeknisaComponents = {
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { script$m as TekBreadcrumbHeader, script$l as TekCardTitle, script$k as TekCrudAddButton, script$j as TekCrudCancelButton, script$i as TekCrudDeleteButton, script$h as TekCrudForm, script$g as TekCrudSaveButton, script$3 as TekDragGrid, TekGrid$1 as TekGrid, script$f as TekGridCellIdentation, script$d as TekGridColumnFilter, script$c as TekGridColumnsButton, script$b as TekGridFilterButton, script$e as TekGridHeaderIndentation, script$a as TekGridLayoutOptions, script$9 as TekImage, script$8 as TekIterableComponentRender, script$7 as TekProductCard, script$6 as TekTreeGrid, script$5 as TekUserInfo, script$4 as TekUserInfoList, TeknisaComponents as default };
+export { script$n as TekBreadcrumbHeader, script$m as TekCardTitle, script$l as TekCrudAddButton, script$k as TekCrudCancelButton, script$j as TekCrudDeleteButton, script$i as TekCrudForm, script$h as TekCrudSaveButton, script$3 as TekDragGrid, TekGrid$1 as TekGrid, script$g as TekGridCellIdentation, script$e as TekGridColumnFilter, script$d as TekGridColumnsButton, script$c as TekGridExportButton, script$b as TekGridFilterButton, script$f as TekGridHeaderIndentation, script$a as TekGridLayoutOptions, script$9 as TekImage, script$8 as TekIterableComponentRender, script$7 as TekProductCard, script$6 as TekTreeGrid, script$5 as TekUserInfo, script$4 as TekUserInfoList, TeknisaComponents as default };