@zeedhi/vuetify 1.59.0 → 1.60.0

package/dist/zd-vuetify.esm.js

@@ -767,14 +767,6 @@ function getZIndex(el) {
   if (!index) return getZIndex(el.parentNode);
   return index;
 }
-const tagsToReplace = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;'
-};
-function escapeHTML(str) {
-  return str.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag);
-}
 function filterObjectOnKeys(obj, keys) {
   const filtered = {};
 
@@ -2221,7 +2213,7 @@ class Vuetify {
 }
 Vuetify.install = install$1;
 Vuetify.installed = false;
-Vuetify.version = "2.6.9";
+Vuetify.version = "2.6.10";
 Vuetify.config = {
   silent: false
 };
@@ -6554,7 +6546,11 @@ var Menuable = baseMixins$r.extend().extend({
     },
 
     checkActivatorFixed() {
-      if (this.attach !== false) return;
+      if (this.attach !== false) {
+        this.activatorFixed = false;
+        return;
+      }
+
       let el = this.getActivator();
 
       while (el) {
@@ -8220,13 +8216,13 @@ var VSelectList = mixins(Colorable, Themeable).extend({
 
     genFilteredText(text) {
       text = text || '';
-      if (!this.searchInput || this.noFilter) return escapeHTML(text);
+      if (!this.searchInput || this.noFilter) return text;
       const {
         start,
         middle,
         end
       } = this.getMaskedCharacters(text);
-      return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`;
+      return [start, this.genHighlight(middle), end];
     },
 
     genHeader(props) {
@@ -8236,7 +8232,9 @@ var VSelectList = mixins(Colorable, Themeable).extend({
     },
 
     genHighlight(text) {
-      return `<span class="v-list-item__mask">${escapeHTML(text)}</span>`;
+      return this.$createElement('span', {
+        staticClass: 'v-list-item__mask'
+      }, text);
     },
 
     getMaskedCharacters(text) {
@@ -8309,12 +8307,7 @@ var VSelectList = mixins(Colorable, Themeable).extend({
     },
 
     genTileContent(item, index = 0) {
-      const innerHTML = this.genFilteredText(this.getText(item));
-      return this.$createElement(VListItemContent, [this.$createElement(VListItemTitle, {
-        domProps: {
-          innerHTML
-        }
-      })]);
+      return this.$createElement(VListItemContent, [this.$createElement(VListItemTitle, [this.genFilteredText(this.getText(item))])]);
     },
 
     hasItem(item) {
@@ -8871,7 +8864,8 @@ var VInput = baseMixins$m.extend().extend({
           color: this.validationState,
           dark: this.dark,
           disabled: this.isDisabled,
-          light: this.light
+          light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined
         },
         on: !hasListener ? undefined : {
           click: e => {
@@ -12040,8 +12034,8 @@ var VDialog = baseMixins$i.extend({
       !this.getOpenDependentElements().some(el => el.contains(target)) // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        const el = [...focusable].find(el => !el.hasAttribute('disabled'));
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');
+        const el = [...focusable].find(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
         el && el.focus();
       }
     },
@@ -13764,7 +13758,7 @@ var CalendarWithEvents = CalendarBase.extend({
     },
 
     eventNameFunction() {
-      return typeof this.eventName === 'function' ? this.eventName : (event, timedEvent) => escapeHTML(event.input[this.eventName] || '');
+      return typeof this.eventName === 'function' ? this.eventName : (event, timedEvent) => event.input[this.eventName] || '';
     },
 
     eventModeFunction() {
@@ -13976,15 +13970,17 @@ var CalendarWithEvents = CalendarBase.extend({
         const name = this.eventNameFunction(event, timedEvent);
 
         if (event.start.hasTime) {
-          const eventSummaryClass = 'v-event-summary';
-
           if (timedEvent) {
             const time = timeSummary();
-            const delimiter = singline ? ', ' : '<br>';
-            return `<span class="${eventSummaryClass}"><strong>${name}</strong>${delimiter}${time}</span>`;
+            const delimiter = singline ? ', ' : this.$createElement('br');
+            return this.$createElement('span', {
+              staticClass: 'v-event-summary'
+            }, [this.$createElement('strong', [name]), delimiter, time]);
           } else {
             const time = formatTime(event.start, true);
-            return `<span class="${eventSummaryClass}"><strong>${time}</strong> ${name}</span>`;
+            return this.$createElement('span', {
+              staticClass: 'v-event-summary'
+            }, [this.$createElement('strong', [time]), ' ', name]);
           }
         }
 
@@ -14014,11 +14010,8 @@ var CalendarWithEvents = CalendarBase.extend({
 
     genName(eventSummary) {
       return this.$createElement('div', {
-        staticClass: 'pl-1',
-        domProps: {
-          innerHTML: eventSummary()
-        }
-      });
+        staticClass: 'pl-1'
+      }, [eventSummary()]);
     },
 
     genPlaceholder(day) {
@@ -30858,7 +30851,6 @@ exports.getObjectValueByPath = getObjectValueByPath;
 exports.getPropertyFromItem = getPropertyFromItem;
 exports.createRange = createRange;
 exports.getZIndex = getZIndex;
-exports.escapeHTML = escapeHTML;
 exports.filterObjectOnKeys = filterObjectOnKeys;
 exports.convertToUnit = convertToUnit;
 exports.kebabCase = kebabCase;
@@ -31051,18 +31043,6 @@ function getZIndex(el) {
   return index;
 }
 
-var tagsToReplace = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;'
-};
-
-function escapeHTML(str) {
-  return str.replace(/[&<>]/g, function (tag) {
-    return tagsToReplace[tag] || tag;
-  });
-}
-
 function filterObjectOnKeys(obj, keys) {
   var filtered = {};
 
@@ -36854,7 +36834,7 @@ var Vuetify = /*#__PURE__*/function () {
 exports.default = Vuetify;
 Vuetify.install = install_1.install;
 Vuetify.installed = false;
-Vuetify.version = "2.6.9";
+Vuetify.version = "2.6.10";
 Vuetify.config = {
   silent: false
 };
@@ -41902,6 +41882,10 @@ __decorate([
     PropWatch({ type: Array, default: () => undefined }),
     __metadata("design:type", Object)
 ], ZdDashboard.prototype, "cardFooterSlot", void 0);
+__decorate([
+    Prop({ type: Object, default: () => undefined }),
+    __metadata("design:type", Object)
+], ZdDashboard.prototype, "editHeader", void 0);
 ZdDashboard = __decorate([
     Component$1
 ], ZdDashboard);
@@ -41944,13 +41928,15 @@ var __vue_render__$16 = function () {
       },
     },
     [
-      _c("zd-header", {
-        attrs: {
-          name: "headerDashboard" + _vm.instance.name,
-          leftSlot: _vm.instance.headerLeftSlot,
-          isVisible: _vm.instance.editingMode,
-        },
-      }),
+      _c(
+        "zd-header",
+        _vm._b(
+          { attrs: { isVisible: _vm.instance.editingMode } },
+          "zd-header",
+          _vm.instance.editHeader,
+          false
+        )
+      ),
       _vm._v(" "),
       _c(
         "div",
@@ -42114,7 +42100,7 @@ __vue_render__$16._withStripped = true;
   /* style */
   const __vue_inject_styles__$16 = function (inject) {
     if (!inject) return
-    inject("data-v-29d9be7e_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-8c8b40d8_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -44756,6 +44742,13 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             this.destroyDragColumns();
         }
     }
+    change(value) {
+        if (value && this.instance.selectable) {
+            setTimeout(() => {
+                this.$el.querySelector('.column').colSpan = this.instance.columns.length + 1;
+            }, 0);
+        }
+    }
     mounted() {
         this.setHeight();
         if (this.instance.dragColumns) {
@@ -44823,15 +44816,20 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             });
         });
     }
-    calcWidth(column, width) {
-        if ((width === null || width === void 0 ? void 0 : width.indexOf('%')) !== -1 && this.$el) {
+    parseWidth(width) {
+        if (width && width.indexOf('%') !== -1 && this.$el) {
             const percent = Number(width === null || width === void 0 ? void 0 : width.replace('%', '')) / 100;
             const tableWidth = this.$el.clientWidth;
-            return `${Math
-                .max(this.minimumColumnWidth(column), Math
-                .trunc(Number(tableWidth) * percent))}px`;
+            const pxWidth = Number(tableWidth) * percent;
+            return pxWidth;
         }
-        return width || '';
+        return Number(width === null || width === void 0 ? void 0 : width.replace('px', ''));
+    }
+    calcWidth(column, width) {
+        const min = Math.max(this.minimumColumnWidth(column), this.parseWidth(column.minWidth) || 0);
+        const max = this.parseWidth(column.maxWidth);
+        const pxWidth = this.parseWidth(width);
+        return `${Math.max(min, Math.min(Math.trunc(pxWidth), max || Infinity))}px`;
     }
     sortColumns(event) {
         const { originalEvent } = event;
@@ -44922,21 +44920,26 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             : MIN_WIDTH_WITH_SORTABLE_FALSE;
     }
     resizeMouseMoveHandler(event) {
+        var _a, _b;
         // Determine how far the mouse has been moved
         const dx = event.clientX - this.resizeX;
-        const minimumColumnWidth = this.minimumColumnWidth(this.resizeColumn);
-        const width = Math.max(minimumColumnWidth, this.resizeWidth + dx);
+        const min = Math.max(this.minimumColumnWidth(this.resizeColumn), this.parseWidth((_a = this.resizeColumn) === null || _a === void 0 ? void 0 : _a.minWidth) || 0);
+        const max = this.parseWidth((_b = this.resizeColumn) === null || _b === void 0 ? void 0 : _b.maxWidth) || Infinity;
+        const newWidth = this.resizeWidth + dx;
+        const width = Math.max(min, Math.min(newWidth, max));
         if (this.resizeColumn) {
             // Update the width of column
             this.resizeColumn.width = `${width}px`;
-            this.resizeColumn.maxWidth = this.resizeColumn.width;
         }
-        if (this.resizeWidth + dx >= minimumColumnWidth) {
+        if (newWidth >= max) {
+            return;
+        }
+        if (newWidth >= min) {
             // Update the width of the table
             this.resizeTableElement.style.width = `${this.resizeTableWidth + dx}px`;
         }
         else {
-            this.resizeTableElement.style.width = `${this.resizeTableWidth - this.resizeWidth + minimumColumnWidth}px`;
+            this.resizeTableElement.style.width = `${this.resizeTableWidth - this.resizeWidth + min}px`;
         }
     }
     resizeMouseUpHandler(event) {
@@ -45265,6 +45268,12 @@ __decorate([
     __metadata("design:paramtypes", [Boolean]),
     __metadata("design:returntype", void 0)
 ], ZdGrid.prototype, "update", null);
+__decorate([
+    Watch('instance.datasource.loading'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ZdGrid.prototype, "change", null);
 ZdGrid = __decorate([
     Component$2
 ], ZdGrid);
@@ -45439,7 +45448,9 @@ var __vue_render__$X = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth || column.minWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: {
@@ -45457,7 +45468,10 @@ var __vue_render__$X = function () {
                                           width:
                                             _vm.calcWidth(
                                               column,
-                                              column.maxWidth || column.minWidth
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
                                             ) || "unset",
                                           color:
                                             _vm.instance.headerCellTextColor,
@@ -45877,17 +45891,20 @@ var __vue_render__$X = function () {
                                                 width:
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.width
+                                                    column.width,
+                                                    true
                                                   ) || "unset",
                                                 "min-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.minWidth
+                                                    column.minWidth,
+                                                    true
                                                   ) || "unset",
                                                 "max-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.maxWidth
+                                                    column.maxWidth,
+                                                    true
                                                   ) || "unset",
                                               },
                                               on: {
@@ -46074,7 +46091,7 @@ __vue_render__$X._withStripped = true;
   /* style */
   const __vue_inject_styles__$X = function (inject) {
     if (!inject) return
-    inject("data-v-5e41fd76_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
+    inject("data-v-7de6af71_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -46162,7 +46179,10 @@ let ZdGridEditable = class ZdGridEditable extends ZdGrid$1 {
             if (!element) {
                 return;
             }
-            if (col.maxWidth) {
+            if (col.width) {
+                element.style.width = this.calcWidth(col, col.width || '');
+            }
+            else if (col.maxWidth) {
                 element.style.width = this.calcWidth(col, col.maxWidth || '');
             }
             else if (col.minWidth) {
@@ -46425,7 +46445,9 @@ var __vue_render__$W = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth || column.minWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: { index: index },
@@ -46439,7 +46461,9 @@ var __vue_render__$W = function () {
                                           width:
                                             _vm.calcWidth(
                                               column,
-                                              column.maxWidth || column.minWidth
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth
                                             ) || "unset",
                                         },
                                       },
@@ -46880,17 +46904,20 @@ var __vue_render__$W = function () {
                                                       _vm.calcWidth(
                                                         column,
                                                         column.maxWidth ||
-                                                          column.minWidth
+                                                          column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                 },
@@ -47030,17 +47057,20 @@ var __vue_render__$W = function () {
                                                       _vm.calcWidth(
                                                         column,
                                                         column.maxWidth ||
-                                                          column.minWidth
+                                                          column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                   on: {
@@ -47229,8 +47259,8 @@ __vue_render__$W._withStripped = true;
   /* style */
   const __vue_inject_styles__$W = function (inject) {
     if (!inject) return
-    inject("data-v-3833beae_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-,inject("data-v-3833beae_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+    inject("data-v-0bddbd88_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-0bddbd88_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -58075,198 +58105,257 @@ var __vue_render__$1 = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth
-                                        ) ||
-                                        _vm.calcWidth(
-                                          column,
-                                          column.minWidth
-                                        ) ||
-                                        "unset",
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
+                                        ) || "unset",
                                     },
                                     attrs: { index: index },
-                                    on: {
-                                      click: function ($event) {
-                                        return _vm.instance.changeColumnOrder(
-                                          column
-                                        )
-                                      },
-                                    },
                                   },
                                   [
-                                    column.type !== "action"
-                                      ? [
-                                          column.sortable &&
-                                          column.align === "right"
-                                            ? _c(
+                                    _c(
+                                      "span",
+                                      {
+                                        staticClass: "zd-table-header-cell",
+                                        style: {
+                                          width:
+                                            _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ) || "unset",
+                                          color:
+                                            _vm.instance.headerCellTextColor,
+                                        },
+                                      },
+                                      [
+                                        column.type !== "action"
+                                          ? [
+                                              column.sortable &&
+                                              column.align === "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--left zd-mr-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align === "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order left",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _c(
                                                 "span",
                                                 {
-                                                  staticClass:
-                                                    "zd-table-cell-sort",
-                                                },
-                                                [
-                                                  column.sortable &&
-                                                  column.align === "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
+                                                  class: [
+                                                    "zd-table-cell-name",
+                                                    {
+                                                      "overflow-hidden":
+                                                        column.overflow ===
+                                                        "hidden",
+                                                      "overflow-wrap":
+                                                        column.overflow ===
+                                                        "wrap",
+                                                    },
+                                                    !isNaN(column.overflow)
+                                                      ? "overflow-clamp overflow-clamp-" +
+                                                        column.overflow
+                                                      : "",
+                                                  ],
+                                                  on: {
+                                                    click: function ($event) {
+                                                      return _vm.instance.changeColumnOrder(
+                                                        column
                                                       )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order left",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
+                                                    },
+                                                    mouseenter: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.checkOverflow(
+                                                        $event
                                                       )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                          _vm._v(" "),
-                                          _c(
-                                            "span",
-                                            {
-                                              class: [
-                                                "zd-table-cell-name",
-                                                {
-                                                  "overflow-hidden":
-                                                    column.overflow ===
-                                                    "hidden",
-                                                  "overflow-wrap":
-                                                    column.overflow === "wrap",
-                                                },
-                                                !isNaN(column.overflow)
-                                                  ? "overflow-clamp overflow-clamp-" +
-                                                    column.overflow
-                                                  : "",
-                                              ],
-                                              style: {
-                                                "min-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.minWidth
-                                                  ) || "unset",
-                                                "max-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.maxWidth
-                                                  ) || "unset",
-                                              },
-                                              on: {
-                                                mouseenter: function ($event) {
-                                                  return _vm.checkOverflow(
-                                                    $event
-                                                  )
-                                                },
-                                                mouseleave: function ($event) {
-                                                  return _vm.removeTooltip()
+                                                    },
+                                                    mouseleave: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.removeTooltip()
+                                                    },
+                                                  },
                                                 },
-                                              },
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                [
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
+                                              _vm._v(" "),
+                                              column.sortable &&
+                                              column.align !== "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--right zd-ml-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align !== "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
                                             ]
-                                          ),
-                                          _vm._v(" "),
-                                          column.sortable &&
-                                          column.align !== "right"
-                                            ? _c(
+                                          : [
+                                              _c(
                                                 "span",
                                                 {
                                                   staticClass:
-                                                    "zd-table-cell-sort",
+                                                    "zd-table-cell-name",
                                                 },
                                                 [
-                                                  column.sortable &&
-                                                  column.align !== "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                        ]
-                                      : [
-                                          _c(
-                                            "span",
-                                            {
-                                              staticClass: "zd-table-cell-name",
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
-                                            ]
-                                          ),
-                                        ],
-                                  ],
-                                  2
+                                            ],
+                                        _vm._v(" "),
+                                        _vm.instance.resizeColumns
+                                          ? _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "zd-grid-resize-handle",
+                                                on: {
+                                                  mousedown: function ($event) {
+                                                    return _vm.resizeMouseDownHandler(
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                  click: _vm.resizeClickHandler,
+                                                },
+                                              },
+                                              [_vm._v("‖")]
+                                            )
+                                          : _vm._e(),
+                                      ],
+                                      2
+                                    ),
+                                  ]
                                 )
                               : _vm._e(),
                           ]
@@ -58305,7 +58394,7 @@ var __vue_render__$1 = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                      style: "padding-top: " + _vm.scrollData.endHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -58469,15 +58558,23 @@ var __vue_render__$1 = function () {
                                                   : "",
                                               ],
                                               style: {
+                                                width:
+                                                  _vm.calcWidth(
+                                                    column,
+                                                    column.width,
+                                                    true
+                                                  ) || "unset",
                                                 "min-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.minWidth
+                                                    column.minWidth,
+                                                    true
                                                   ) || "unset",
                                                 "max-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.maxWidth
+                                                    column.maxWidth,
+                                                    true
                                                   ) || "unset",
                                               },
                                               on: {
@@ -58549,6 +58646,7 @@ var __vue_render__$1 = function () {
                                                 ],
                                                 1
                                               ),
+                                              _vm._v(" "),
                                               _c("span", {
                                                 key: item.tree__searched
                                                   ? "a"
@@ -58598,34 +58696,92 @@ var __vue_render__$1 = function () {
                                             },
                                           },
                                         },
-                                        _vm._l(
-                                          column.childrenProps,
-                                          function (child) {
-                                            return _c(
-                                              child.component,
-                                              _vm._b(
+                                        [
+                                          _c(
+                                            "div",
+                                            {
+                                              directives: [
                                                 {
-                                                  key:
-                                                    child.name +
-                                                    _vm.rowKey(item),
-                                                  tag: "component",
+                                                  name: "show",
+                                                  rawName: "v-show",
+                                                  value: headerIndex === 0,
+                                                  expression:
+                                                    "headerIndex === 0",
                                                 },
-                                                "component",
-                                                Object.assign(
-                                                  {},
-                                                  child,
-                                                  _vm.instance.getActionComponent(
-                                                    child,
-                                                    column,
-                                                    item
+                                              ],
+                                              class: [
+                                                "zd-tree-grid-expand",
+                                                "level" + item.tree__level,
+                                              ],
+                                            },
+                                            [
+                                              (item.tree__children || [])
+                                                .length > 0
+                                                ? _c(
+                                                    "v-icon",
+                                                    {
+                                                      class: {
+                                                        opened:
+                                                          item.tree__opened,
+                                                      },
+                                                      attrs: { tabindex: "-1" },
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.toggleExpand(
+                                                            item,
+                                                            index
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      _vm._v(
+                                                        "\n                  " +
+                                                          _vm._s(
+                                                            _vm.$getIcon(
+                                                              "chevronRight"
+                                                            )
+                                                          ) +
+                                                          "\n                "
+                                                      ),
+                                                    ]
                                                   )
-                                                ),
-                                                false
+                                                : _vm._e(),
+                                            ],
+                                            1
+                                          ),
+                                          _vm._v(" "),
+                                          _vm._l(
+                                            column.childrenProps,
+                                            function (child) {
+                                              return _c(
+                                                child.component,
+                                                _vm._b(
+                                                  {
+                                                    key:
+                                                      child.name +
+                                                      _vm.rowKey(item),
+                                                    tag: "component",
+                                                  },
+                                                  "component",
+                                                  Object.assign(
+                                                    {},
+                                                    child,
+                                                    _vm.instance.getActionComponent(
+                                                      child,
+                                                      column,
+                                                      item
+                                                    )
+                                                  ),
+                                                  false
+                                                )
                                               )
-                                            )
-                                          }
-                                        ),
-                                        1
+                                            }
+                                          ),
+                                        ],
+                                        2
                                       ),
                                     ]
                                   : _vm._e(),
@@ -58730,8 +58886,8 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-34a8a2e4_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-,inject("data-v-34a8a2e4_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
+    inject("data-v-7d538442_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-7d538442_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -58817,7 +58973,10 @@ let ZdTreeGridEditable = class ZdTreeGridEditable extends ZdTreeGrid$1 {
         this.columns.forEach((col) => {
             const element = document.querySelector(`.column-th-${col.name}-${this.instance.name}`);
             if (element) {
-                if (col.maxWidth) {
+                if (col.width) {
+                    element.style.width = this.calcWidth(col, col.width);
+                }
+                else if (col.maxWidth) {
                     element.style.width = this.calcWidth(col, col.maxWidth);
                 }
                 else if (col.minWidth) {
@@ -58931,6 +59090,7 @@ var __vue_render__ = function () {
     ref: "grid",
     class: [
       "zd-grid",
+      "zd-tree-grid",
       "zd-tree-grid-editable",
       _vm.instance.cssClass,
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
@@ -59073,201 +59233,260 @@ var __vue_render__ = function () {
                                     style: {
                                       "background-color":
                                         _vm.instance.headerBackground,
-                                      "min-width":
-                                        _vm.calcWidth(
-                                          column,
-                                          column.minWidth
-                                        ) || "unset",
-                                      "max-width":
+                                      width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: { index: index },
-                                    on: {
-                                      click: function ($event) {
-                                        return _vm.instance.changeColumnOrder(
-                                          column
-                                        )
-                                      },
-                                    },
                                   },
                                   [
-                                    column.type !== "action"
-                                      ? [
-                                          column.sortable &&
-                                          column.align === "right"
-                                            ? _c(
+                                    _c(
+                                      "span",
+                                      {
+                                        staticClass: "zd-table-header-cell",
+                                        style: {
+                                          width:
+                                            _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ) || "unset",
+                                          color:
+                                            _vm.instance.headerCellTextColor,
+                                        },
+                                      },
+                                      [
+                                        column.type !== "action"
+                                          ? [
+                                              column.sortable &&
+                                              column.align === "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--left zd-mr-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align === "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order left",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _c(
                                                 "span",
                                                 {
-                                                  staticClass:
-                                                    "zd-table-cell-sort",
-                                                },
-                                                [
-                                                  column.sortable &&
-                                                  column.align === "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
+                                                  class: [
+                                                    "zd-table-cell-name",
+                                                    {
+                                                      "overflow-hidden":
+                                                        column.overflow ===
+                                                        "hidden",
+                                                      "overflow-wrap":
+                                                        column.overflow ===
+                                                        "wrap",
+                                                    },
+                                                    !isNaN(column.overflow)
+                                                      ? "overflow-clamp overflow-clamp-" +
+                                                        column.overflow
+                                                      : "",
+                                                  ],
+                                                  on: {
+                                                    click: function ($event) {
+                                                      return _vm.instance.changeColumnOrder(
+                                                        column
                                                       )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order left",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
+                                                    },
+                                                    mouseenter: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.checkOverflow(
+                                                        $event
                                                       )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                          _vm._v(" "),
-                                          _c(
-                                            "span",
-                                            {
-                                              class: [
-                                                "zd-table-cell-name",
-                                                {
-                                                  "overflow-hidden":
-                                                    column.overflow ===
-                                                    "hidden",
-                                                  "overflow-wrap":
-                                                    column.overflow === "wrap",
-                                                },
-                                                !isNaN(column.overflow)
-                                                  ? "overflow-clamp overflow-clamp-" +
-                                                    column.overflow
-                                                  : "",
-                                              ],
-                                              style: {
-                                                "min-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.minWidth
-                                                  ) || "unset",
-                                                "max-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.maxWidth
-                                                  ) || "unset",
-                                              },
-                                              on: {
-                                                mouseenter: function ($event) {
-                                                  return _vm.checkOverflow(
-                                                    $event
-                                                  )
-                                                },
-                                                mouseleave: function ($event) {
-                                                  return _vm.removeTooltip()
+                                                    },
+                                                    mouseleave: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.removeTooltip()
+                                                    },
+                                                  },
                                                 },
-                                              },
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                [
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
+                                              _vm._v(" "),
+                                              column.sortable &&
+                                              column.align !== "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--right zd-ml-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align !== "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
                                             ]
-                                          ),
-                                          _vm._v(" "),
-                                          column.sortable &&
-                                          column.align !== "right"
-                                            ? _c(
+                                          : [
+                                              _c(
                                                 "span",
                                                 {
                                                   staticClass:
-                                                    "zd-table-cell-sort",
+                                                    "zd-table-cell-name",
                                                 },
                                                 [
-                                                  column.sortable &&
-                                                  column.align !== "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                        ]
-                                      : [
-                                          _c(
-                                            "span",
-                                            {
-                                              staticClass: "zd-table-cell-name",
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
-                                            ]
-                                          ),
-                                        ],
-                                  ],
-                                  2
+                                            ],
+                                        _vm._v(" "),
+                                        _vm.instance.resizeColumns
+                                          ? _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "zd-grid-resize-handle",
+                                                on: {
+                                                  mousedown: function ($event) {
+                                                    return _vm.resizeMouseDownHandler(
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                  click: _vm.resizeClickHandler,
+                                                },
+                                              },
+                                              [_vm._v("‖")]
+                                            )
+                                          : _vm._e(),
+                                      ],
+                                      2
+                                    ),
+                                  ]
                                 )
                               : _vm._e(),
                           ]
@@ -59288,7 +59507,8 @@ var __vue_render__ = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.startHeight + "px",
+                      style:
+                        "padding-top: " + _vm.scrollData.startHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -59306,7 +59526,7 @@ var __vue_render__ = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                      style: "padding-top: " + _vm.scrollData.endHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -59490,18 +59710,20 @@ var __vue_render__ = function () {
                                                     width:
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth ||
-                                                          column.minWidth
+                                                        column.width,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                 },
@@ -59640,18 +59862,20 @@ var __vue_render__ = function () {
                                                     width:
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth ||
-                                                          column.minWidth
+                                                        column.width,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                   on: {
@@ -59780,34 +60004,92 @@ var __vue_render__ = function () {
                                             },
                                           },
                                         },
-                                        _vm._l(
-                                          column.childrenProps,
-                                          function (child) {
-                                            return _c(
-                                              child.component,
-                                              _vm._b(
+                                        [
+                                          _c(
+                                            "div",
+                                            {
+                                              directives: [
                                                 {
-                                                  key:
-                                                    child.name +
-                                                    _vm.rowKey(item),
-                                                  tag: "component",
+                                                  name: "show",
+                                                  rawName: "v-show",
+                                                  value: headerIndex === 0,
+                                                  expression:
+                                                    "headerIndex === 0",
                                                 },
-                                                "component",
-                                                Object.assign(
-                                                  {},
-                                                  child,
-                                                  _vm.instance.getActionComponent(
-                                                    child,
-                                                    column,
-                                                    item
+                                              ],
+                                              class: [
+                                                "zd-tree-grid-expand",
+                                                "level" + item.tree__level,
+                                              ],
+                                            },
+                                            [
+                                              (item.tree__children || [])
+                                                .length > 0
+                                                ? _c(
+                                                    "v-icon",
+                                                    {
+                                                      class: {
+                                                        opened:
+                                                          item.tree__opened,
+                                                      },
+                                                      attrs: { tabindex: "-1" },
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.toggleExpand(
+                                                            item,
+                                                            index
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      _vm._v(
+                                                        "\n                  " +
+                                                          _vm._s(
+                                                            _vm.$getIcon(
+                                                              "chevronRight"
+                                                            )
+                                                          ) +
+                                                          "\n                "
+                                                      ),
+                                                    ]
                                                   )
-                                                ),
-                                                false
+                                                : _vm._e(),
+                                            ],
+                                            1
+                                          ),
+                                          _vm._v(" "),
+                                          _vm._l(
+                                            column.childrenProps,
+                                            function (child) {
+                                              return _c(
+                                                child.component,
+                                                _vm._b(
+                                                  {
+                                                    key:
+                                                      child.name +
+                                                      _vm.rowKey(item),
+                                                    tag: "component",
+                                                  },
+                                                  "component",
+                                                  Object.assign(
+                                                    {},
+                                                    child,
+                                                    _vm.instance.getActionComponent(
+                                                      child,
+                                                      column,
+                                                      item
+                                                    )
+                                                  ),
+                                                  false
+                                                )
                                               )
-                                            )
-                                          }
-                                        ),
-                                        1
+                                            }
+                                          ),
+                                        ],
+                                        2
                                       ),
                                     ]
                                   : _vm._e(),
@@ -59912,8 +60194,8 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-3cea1c94_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-,inject("data-v-3cea1c94_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+    inject("data-v-8a2baa58_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-8a2baa58_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */