@contena/meteor-component-library 5.5.0

package/dist/esm/MtDataTable.js

@@ -0,0 +1,1914 @@
+import '../mt-data-table.css';
+import { nextTick, watch, onUpdated, onMounted, onBeforeUnmount, defineComponent, reactive, computed, ref, onBeforeUpdate, resolveComponent, resolveDirective, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createCommentVNode, createSlots, createVNode, toDisplayString, createElementBlock, Fragment, renderList, renderSlot, withDirectives, normalizeStyle, withModifiers } from "vue";
+import MtCard from "./MtCard.js";
+import MtButton from "./MtButton.js";
+import MtSelect from "./MtSelect.js";
+import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-c90dc25b.mjs";
+import MtPagination from "./MtPagination.js";
+import MtSearch from "./MtSearch.js";
+import { _ as _sfc_main$2 } from "../mt-context-button.vue_vue_type_style_index_0_lang-c4b5d005.mjs";
+import MtContextMenuItem from "./MtContextMenuItem.js";
+import MtDataTableSettings from "./MtDataTableSettings.js";
+import mtPopover from "./MtPopover.js";
+import mtPopoverItem from "./MtPopoverItem.js";
+import { d as draggable, a as droppable, M as MtPopoverItemResult } from "../mt-popover-item-result-c0214b39.mjs";
+import MtSkeletonBar from "./MtSkeletonBar.js";
+import MtCheckbox from "./MtCheckbox.js";
+import MtDataTableTextRenderer from "./MtDataTableTextRenderer.js";
+import MtDataTableNumberRenderer from "./MtDataTableNumberRenderer.js";
+import MtDataTableBadgeRenderer from "./MtDataTableBadgeRenderer.js";
+import MtDataTablePriceRenderer from "./MtDataTablePriceRenderer.js";
+import MtSegmentedControl from "./MtSegmentedControl.js";
+import { _ as _sfc_main$3 } from "../mt-floating-ui.vue_vue_type_style_index_0_lang-90b9d50a.mjs";
+import { v as vTooltip } from "../tooltip.directive-f216b7fb.mjs";
+import MtEmptyState from "./MtEmptyState.js";
+import MtDataTableResetFilterButton from "./MtDataTableResetFilterButton.js";
+import MtDataTableFilter from "./MtDataTableFilter.js";
+import MtInset from "./MtInset.js";
+import { useI18n } from "vue-i18n";
+import { h as useDebounceFn } from "../index-431c2592.mjs";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
+import "./MtLoader.js";
+import "./MtText.js";
+import "../useFutureFlags-af867fe7.mjs";
+import "../mt-base-field-3b5538c6.mjs";
+import "./MtInheritanceSwitch.js";
+import "./MtTooltip.js";
+import "../floating-ui.vue-61aa2b7b.mjs";
+import "../floating-ui.dom-3a2ca2f5.mjs";
+import "../useIsInsideTooltip-0c3bd290.mjs";
+import "./MtFieldCopyable.js";
+import "../id-1e5b8276.mjs";
+import "./MtHelpText.js";
+import "./MtFieldError.js";
+import "../mt-switch.vue_vue_type_style_index_0_lang-4d293db9.mjs";
+import "./MtFieldLabel.js";
+import "./MtSmoothReflow.js";
+import "../_commonjsHelpers-7a77ea84.mjs";
+import "../debounce-b18437e2.mjs";
+import "../object-e11d5dd3.mjs";
+import "./MtFieldHint.js";
+import "./MtSelectBase.js";
+import "./MtSelectResultList.js";
+import "./MtPopoverDeprecated.js";
+import "../mt-select-result-context-47aad241.mjs";
+import "./MtSelectResult.js";
+import "./MtSelectSelectionList.js";
+import "../mt-label.vue_vue_type_style_index_0_lang-3ceffd12.mjs";
+import "../mt-highlight-text.vue_vue_type_style_index_0_lang-550f3bfe.mjs";
+import "./MtBadge.js";
+import "./MtStatusDot.js";
+import "./MtLink.js";
+function throttle(func, timeFrame) {
+  let lastTime = 0;
+  return function(...args) {
+    const now = /* @__PURE__ */ new Date();
+    if (now.getTime() - lastTime >= timeFrame) {
+      func.apply(this, args);
+      lastTime = now.getTime();
+    }
+  };
+}
+function useScrollPossibilitiesClasses(refElement, showScrollIndicators) {
+  const setScrollPossibilitiesClasses = (elementOrEvent) => {
+    var _a, _b, _c, _d, _e, _f;
+    const element = (elementOrEvent == null ? void 0 : elementOrEvent.target) ? elementOrEvent.target : elementOrEvent;
+    if (!element)
+      return;
+    const hideShadows = !showScrollIndicators.value;
+    if (hideShadows) {
+      (_a = element.parentElement) == null ? void 0 : _a.style.removeProperty("--scrollbar-width");
+      (_b = element.parentElement) == null ? void 0 : _b.style.removeProperty("--scrollbar-height");
+      delete element.dataset.scrollTop;
+      delete element.dataset.scrollBottom;
+      delete element.dataset.scrollRight;
+      delete element.dataset.scrollLeft;
+      return;
+    }
+    const pufferPx = 5;
+    if (element.scrollHeight > element.clientHeight) {
+      if (element.scrollHeight - element.clientHeight - pufferPx > element.scrollTop) {
+        element.dataset.scrollBottom = "";
+      } else {
+        delete element.dataset.scrollBottom;
+      }
+      if (element.scrollTop - pufferPx > 0) {
+        element.dataset.scrollTop = "";
+      } else {
+        delete element.dataset.scrollTop;
+      }
+      (_c = element.parentElement) == null ? void 0 : _c.style.setProperty(
+        "--scrollbar-width",
+        `${element.offsetWidth - element.clientWidth}px`
+      );
+    } else {
+      (_d = element.parentElement) == null ? void 0 : _d.style.removeProperty("--scrollbar-width");
+      delete element.dataset.scrollTop;
+      delete element.dataset.scrollBottom;
+    }
+    if (element.scrollWidth > element.clientWidth) {
+      if (element.scrollWidth - element.clientWidth - pufferPx > element.scrollLeft) {
+        element.dataset.scrollRight = "";
+      } else {
+        delete element.dataset.scrollRight;
+      }
+      if (element.scrollLeft - pufferPx > 0) {
+        element.dataset.scrollLeft = "";
+      } else {
+        delete element.dataset.scrollLeft;
+      }
+      (_e = element.parentElement) == null ? void 0 : _e.style.setProperty(
+        "--scrollbar-height",
+        `${element.offsetHeight - element.clientHeight}px`
+      );
+    } else {
+      delete element.dataset.scrollRight;
+      delete element.dataset.scrollLeft;
+      (_f = element.parentElement) == null ? void 0 : _f.style.removeProperty("--scrollbar-height");
+    }
+  };
+  const updateSetScrollPossibiltiesClasses = throttle(function() {
+    setScrollPossibilitiesClasses(refElement.value);
+  }, 15);
+  const refElementResizeObserver = new ResizeObserver(() => {
+    nextTick().then(updateSetScrollPossibiltiesClasses);
+  });
+  watch(
+    () => showScrollIndicators,
+    (shouldShowScrollIndicators) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (shouldShowScrollIndicators)
+        return;
+      (_b = (_a = refElement.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.removeProperty("--scrollbar-width");
+      (_d = (_c = refElement.value) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.style.removeProperty("--scrollbar-height");
+      (_e = refElement.value) == null ? true : delete _e.dataset.scrollTop;
+      (_f = refElement.value) == null ? true : delete _f.dataset.scrollBottom;
+      (_g = refElement.value) == null ? true : delete _g.dataset.scrollRight;
+      (_h = refElement.value) == null ? true : delete _h.dataset.scrollLeft;
+    },
+    {
+      immediate: true
+    }
+  );
+  onUpdated(() => {
+    nextTick().then(updateSetScrollPossibiltiesClasses);
+  });
+  onMounted(() => {
+    window.addEventListener("resize", updateSetScrollPossibiltiesClasses);
+    if (!refElement.value) {
+      return;
+    }
+    refElement.value.addEventListener("scroll", updateSetScrollPossibiltiesClasses);
+    refElementResizeObserver.observe(refElement.value);
+    nextTick().then(() => {
+      updateSetScrollPossibiltiesClasses();
+    });
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", updateSetScrollPossibiltiesClasses);
+    if (!refElement.value) {
+      return;
+    }
+    refElement.value.removeEventListener("scroll", updateSetScrollPossibiltiesClasses);
+    refElementResizeObserver.unobserve(refElement.value);
+  });
+  return {};
+}
+const getPreviousSibling = function(el, selector) {
+  if (!el)
+    return;
+  let sibling = el.previousElementSibling;
+  if (!selector)
+    return sibling;
+  while (sibling) {
+    if (sibling.matches(selector))
+      return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+};
+const setLeftValue = (el) => {
+  let width = 0;
+  let sibling = getPreviousSibling(el, "[data-sticky-column]");
+  while (sibling) {
+    width += sibling.clientWidth;
+    sibling = getPreviousSibling(sibling, "[data-sticky-column]");
+  }
+  el.style.left = `${width - 0.5}px`;
+  el.dataset.stickyColumnRight = `${width + el.getBoundingClientRect().width - 0.5}`;
+};
+let mutationObserver;
+const stickyColumn = {
+  beforeMount(el) {
+    el.dataset.stickyColumn = "";
+  },
+  mounted(el) {
+    setLeftValue(el);
+    mutationObserver = new MutationObserver(
+      throttle(() => {
+        setLeftValue(el);
+      }, 60)
+    );
+    mutationObserver.observe(el.parentElement, {
+      childList: true,
+      subtree: true
+    });
+  },
+  unmounted() {
+    mutationObserver == null ? void 0 : mutationObserver.disconnect();
+  }
+};
+const StickyColumn = stickyColumn;
+const _sfc_main = defineComponent({
+  directives: {
+    draggable,
+    droppable,
+    tooltip: vTooltip,
+    stickyColumn: StickyColumn
+  },
+  components: {
+    "mt-card": MtCard,
+    "mt-button": MtButton,
+    "mt-select": MtSelect,
+    "mt-icon": _sfc_main$1,
+    "mt-pagination": MtPagination,
+    "mt-search": MtSearch,
+    "mt-checkbox": MtCheckbox,
+    "mt-context-button": _sfc_main$2,
+    "mt-data-table-settings": MtDataTableSettings,
+    "mt-popover": mtPopover,
+    "mt-popover-item": mtPopoverItem,
+    "mt-popover-item-result": MtPopoverItemResult,
+    "mt-skeleton-bar": MtSkeletonBar,
+    "mt-context-menu-item": MtContextMenuItem,
+    "mt-floating-ui": _sfc_main$3,
+    "mt-segmented-control": MtSegmentedControl,
+    "mt-empty-state": MtEmptyState,
+    "mt-data-table-text-renderer": MtDataTableTextRenderer,
+    "mt-data-table-number-renderer": MtDataTableNumberRenderer,
+    "mt-data-table-badge-renderer": MtDataTableBadgeRenderer,
+    "mt-data-table-price-renderer": MtDataTablePriceRenderer,
+    "mt-data-table-reset-filter-button": MtDataTableResetFilterButton,
+    "mt-data-table-filter": MtDataTableFilter,
+    "mt-inset": MtInset
+  },
+  props: {
+    /**
+     * The data source which contains the data for the current
+     * state of the table.
+     */
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    /**
+     * The defintions for the columns which should be displayed in the table.
+     */
+    columns: {
+      type: Array,
+      required: true,
+      validator: (columnsValue) => {
+        const validValues = columnsValue.map((value) => {
+          const hasLabel = typeof value.label === "string" && value.label;
+          const hasProperty = typeof value.property === "string" && value.property;
+          const hasRenderer = typeof value.renderer === "string" && ["text", "number", "price", "badge"].includes(value.renderer);
+          const hasPosition = typeof value.position === "number";
+          const isInvalid = !hasLabel || !hasProperty || !hasRenderer || !hasPosition;
+          return isInvalid ? false : true;
+        });
+        return validValues.every((value) => value);
+      }
+    },
+    /**
+     * Optional property. When you want to override the current column
+     * information with the given changes, you can pass them here.
+     * The changes will be applied to the current column information.
+     * This is useful for saving and loading the current column configuration
+     * when the user customizes the table.
+     */
+    columnChanges: {
+      type: Object,
+      required: false,
+      default: () => reactive({})
+    },
+    /**
+     * Define the title of the table.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Define the subtitle of the table.
+     */
+    subtitle: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * The layout of the data table.
+     * @values default, full
+     */
+    layout: {
+      type: String,
+      required: false,
+      default: "default"
+    },
+    /**
+     * Activate the reload button at the top right corner of the table.
+     */
+    enableReload: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Define the current page of the table.
+     */
+    currentPage: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Define the limit of items per page.
+     */
+    paginationLimit: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Define the total amount of items.
+     */
+    paginationTotalItems: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Define the available pagination limits.
+     */
+    paginationOptions: {
+      type: Array,
+      required: false,
+      default: () => [5, 10, 25, 50]
+    },
+    /**
+     * Define the current sort by property.
+     */
+    sortBy: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Define the current sort direction.
+     */
+    sortDirection: {
+      type: String,
+      required: false,
+      default: "ASC"
+    },
+    /**
+     * If active then the search input will be disabled.
+     */
+    disableSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Define the current search value.
+     */
+    searchValue: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * If active then the table will be in loading state.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * If active user can select rows and can perform actions on them.
+     */
+    allowRowSelection: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableRowSelect: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    selectedRows: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * If active user can do bulk edit by selecting items
+     */
+    allowBulkEdit: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * If active user can do bulk delete by selecting items
+     */
+    allowBulkDelete: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Add more custom bulk edit actions
+     */
+    bulkEditMoreActions: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /***
+     * Enable numbered rows
+     */
+    enableRowNumbering: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Enable or disable the stripe design for the table.
+     */
+    showStripes: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Enable or disable outlines for the table.
+     */
+    showOutlines: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Enable or disable outline framing on hover
+     */
+    enableOutlineFraming: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Disable the possibility to delete items
+     */
+    disableDelete: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Disable the possibility to edit items
+     */
+    disableEdit: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Disable the possibility to settings table
+     */
+    disableSettingsTable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Caption for accessibility
+     */
+    caption: {
+      type: String,
+      required: false,
+      default: "Data table"
+    },
+    /**
+     * All available filters
+     */
+    filters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Filters in use by the user
+     */
+    appliedFilters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Displays how many results are found
+     */
+    numberOfResults: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    /**
+     * Additional context buttons to show in the context menu
+     */
+    additionalContextButtons: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: [
+    "reload",
+    "pagination-limit-change",
+    "pagination-current-page-change",
+    "search-value-change",
+    "sort-change",
+    "open-details",
+    "selection-change",
+    "multiple-selection-change",
+    "bulk-edit",
+    "bulk-delete",
+    "change-show-outlines",
+    "change-show-stripes",
+    "change-outline-framing",
+    "change-enable-row-numbering",
+    "item-delete",
+    "update:appliedFilters",
+    "context-select"
+  ],
+  setup(props, { emit }) {
+    const { t } = useI18n({
+      messages: {
+        en: {
+          itemsPerPage: "Items per page",
+          filter: {
+            numberOfResults: "No results found for | One result found for | {n} results found for",
+            addFilter: "Add filter",
+            fetchingFilteredResults: "Getting filtered results..."
+          },
+          columnSettings: {
+            sortAscending: "Sort ascending",
+            sortDescending: "Sort descending",
+            hideColumn: "Hide column"
+          },
+          addColumnIndicator: {
+            popoverTitle: "Add column content",
+            tooltipMessage: "Add column"
+          },
+          contextButtons: {
+            edit: "Edit",
+            delete: "Delete"
+          },
+          emptyState: {
+            headline: "Add your first item",
+            description: "Currently no items are available yet."
+          },
+          bulkEdit: {
+            itemsSelected: "1 item selected | {n} items selected",
+            edit: "Edit",
+            delete: "Delete",
+            more: "..."
+          },
+          reload: {
+            tooltip: "Reload"
+          }
+        },
+        zh: {
+          itemsPerPage: "每页条数",
+          filter: {
+            numberOfResults: "未找到结果 | 找到 1 条结果 | 找到 {n} 条结果",
+            addFilter: "添加筛选",
+            fetchingFilteredResults: "正在加载筛选结果..."
+          },
+          columnSettings: {
+            sortAscending: "升序排列",
+            sortDescending: "降序排列",
+            hideColumn: "隐藏列"
+          },
+          addColumnIndicator: {
+            popoverTitle: "添加列内容",
+            tooltipMessage: "添加列"
+          },
+          contextButtons: {
+            edit: "编辑",
+            delete: "删除"
+          },
+          emptyState: {
+            headline: "添加第一条记录",
+            description: "当前暂无记录。"
+          },
+          bulkEdit: {
+            itemsSelected: "已选择 1 项 | 已选择 {n} 项",
+            edit: "编辑",
+            delete: "删除",
+            more: "..."
+          },
+          reload: {
+            tooltip: "刷新"
+          }
+        }
+      }
+    });
+    const filterChildViews = computed(() => {
+      return props.filters.map(({ id, label }) => ({ name: id, title: label }));
+    });
+    const sortedColumns = computed(() => {
+      return columnsWithChanges.value.slice().sort((a, b) => a.position - b.position);
+    });
+    const currentHoveredColumn = ref(null);
+    const currentHoveredRow = ref(null);
+    const setCurrentHoveredCell = (columnProperty, rowId) => {
+      currentHoveredColumn.value = columnProperty;
+      currentHoveredRow.value = rowId;
+    };
+    const visibleColumns = computed(() => {
+      return sortedColumns.value.filter((column) => column.visible !== false);
+    });
+    const isFirstVisibleColumn = (column) => {
+      return visibleColumns.value[0].property === column.property;
+    };
+    const isPrimaryColumn = (column) => {
+      return props.columns[0].property === column.property;
+    };
+    const addColumnOptionsSearch = ref("");
+    const onAddColumnSearch = (value) => {
+      addColumnOptionsSearch.value = value;
+    };
+    const addColumnOptions = computed(() => {
+      return sortedColumns.value.map((column) => {
+        return {
+          id: column.property,
+          label: column.label,
+          parentGroup: void 0,
+          position: column.position,
+          isVisible: column.visible ?? true,
+          isClickable: column.visible === false ? true : false,
+          isSortable: false,
+          isHidable: false,
+          disabled: column.visible === false ? false : true
+        };
+      }).filter((column) => {
+        return column.label.toLowerCase().includes(addColumnOptionsSearch.value.toLowerCase());
+      });
+    });
+    const onAddColumnOptionClick = (columnProperty, previousColumnProperty) => {
+      changeColumnPosition(columnProperty, previousColumnProperty, "after");
+      changeColumnVisibility(columnProperty, true);
+    };
+    const resetAllChanges = () => {
+      Object.keys(props.columnChanges).forEach((key) => {
+        props.columnChanges[key] = {};
+      });
+    };
+    const addToColumnChanges = (columnProperty, columnChanges) => {
+      if (!props.columnChanges[columnProperty]) {
+        props.columnChanges[columnProperty] = {};
+      }
+      props.columnChanges[columnProperty] = {
+        ...props.columnChanges[columnProperty],
+        ...columnChanges
+      };
+    };
+    const columnsWithChanges = computed(() => {
+      return props.columns.map((column) => {
+        const columnChanges = props.columnChanges[column.property];
+        if (!columnChanges) {
+          return column;
+        }
+        return {
+          ...column,
+          ...columnChanges
+        };
+      });
+    });
+    const dataTable = ref(null);
+    const columnHeaderRefs = ref({});
+    const columnDataCellRefs = ref({});
+    const setColumnDataCellRefs = ({
+      el,
+      column,
+      index
+    }) => {
+      if (el) {
+        if (!Array.isArray(columnDataCellRefs.value[column.property])) {
+          columnDataCellRefs.value[column.property] = [];
+        }
+        columnDataCellRefs.value[column.property][index] = el;
+      }
+    };
+    onBeforeUpdate(() => {
+      columnHeaderRefs.value = {};
+      columnDataCellRefs.value = {};
+    });
+    const startColumnResizing = (column) => {
+      if (!column) {
+        return;
+      }
+      makeAllColumnsFixedWidth();
+      const currentColumnHeaderCell = columnHeaderRefs.value[column.property];
+      const currentColumnDataCells = columnDataCellRefs.value[column.property];
+      if (!currentColumnHeaderCell || typeof column.allowResize === "boolean" && !column.allowResize) {
+        return;
+      }
+      const columnHeaderBoundingClientRect = currentColumnHeaderCell.getBoundingClientRect();
+      const startColumnHeaderWidth = columnHeaderBoundingClientRect.width;
+      if (dataTable.value) {
+        dataTable.value.classList.add("--no-transition");
+        dataTable.value.classList.add("--resizing");
+      }
+      document.body.style.cursor = "col-resize";
+      const mouseMoveHandler = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const newWidth = Math.ceil(e.pageX - columnHeaderBoundingClientRect.left);
+        setColumnHeaderWidthInline(currentColumnHeaderCell, newWidth);
+        setColumnDataCellsWidthInline(currentColumnDataCells, newWidth);
+        if (dataTable.value) {
+          const paddingRight = startColumnHeaderWidth - newWidth;
+          dataTable.value.style.paddingRight = paddingRight > 0 ? `${paddingRight}px` : "";
+        }
+      };
+      const mouseUpHandler = () => {
+        document.body.style.cursor = "";
+        addToColumnChanges(column.property, {
+          width: parseInt(currentColumnHeaderCell.style.width, 10)
+        });
+        if (dataTable.value) {
+          dataTable.value.classList.remove("--no-transition");
+          dataTable.value.classList.remove("--resizing");
+          dataTable.value.style.removeProperty("padding-right");
+        }
+        window.removeEventListener("mousemove", mouseMoveHandler);
+        window.removeEventListener("mouseup", mouseUpHandler);
+      };
+      window.addEventListener("mousemove", mouseMoveHandler);
+      window.addEventListener("mouseup", mouseUpHandler);
+    };
+    const makeAllColumnsFixedWidth = () => {
+      const currentWidths = {};
+      Object.entries(columnHeaderRefs.value).forEach(([columnProperty, columnHeaderElement]) => {
+        const currentColumnDefinition = props.columns.find(
+          (column) => column.property === columnProperty
+        );
+        if (currentColumnDefinition && currentColumnDefinition.allowResize === false && typeof currentColumnDefinition.width === "number") {
+          return;
+        }
+        const columnHeaderBoundingClientRect = columnHeaderElement.getBoundingClientRect();
+        currentWidths[columnProperty] = columnHeaderBoundingClientRect.width;
+        setColumnHeaderWidthInline(columnHeaderElement, currentWidths[columnProperty]);
+      });
+      Object.entries(columnDataCellRefs.value).forEach(([columnProperty, columnDataCells]) => {
+        if (currentWidths[columnProperty]) {
+          setColumnDataCellsWidthInline(columnDataCells, currentWidths[columnProperty]);
+        }
+      });
+    };
+    const setColumnHeaderWidthInline = (columnHeader, width) => {
+      columnHeader.style.width = `${width}px`;
+      columnHeader.style.minWidth = `${width}px`;
+    };
+    const setColumnDataCellsWidthInline = (columnDataCells, width) => {
+      columnDataCells.forEach((columnDataCell) => {
+        columnDataCell.style.width = `${width}px`;
+        columnDataCell.style.minWidth = `${width}px`;
+        columnDataCell.style.maxWidth = `${width}px`;
+      });
+    };
+    const renderColumnDefaultStyle = (column) => {
+      var _a;
+      const customColumnWidth = (_a = props.columnChanges[column.property]) == null ? void 0 : _a.width;
+      const defaultColumnWidth = "auto";
+      const minimumColumnWidth = "100px";
+      const width = (() => {
+        if (customColumnWidth && column.allowResize !== false) {
+          return `${customColumnWidth}px`;
+        }
+        return typeof column.width === "number" ? `${column.width}px` : defaultColumnWidth;
+      })();
+      const minWidth = (() => {
+        if (customColumnWidth && column.allowResize !== false) {
+          return `${customColumnWidth}px`;
+        }
+        return typeof column.width === "number" ? `${column.width}px` : minimumColumnWidth;
+      })();
+      const maxWidth = (() => {
+        if (customColumnWidth && column.allowResize !== false) {
+          return `${customColumnWidth}px`;
+        }
+        if (column.cellWrap === "normal") {
+          return "auto";
+        }
+        if (typeof column.width === "number") {
+          return `${column.width}px`;
+        }
+        return minimumColumnWidth;
+      })();
+      const whiteSpace = typeof column.cellWrap === "string" ? column.cellWrap : "nowrap";
+      return {
+        width,
+        "min-width": minWidth,
+        "max-width": maxWidth,
+        "white-space": whiteSpace
+      };
+    };
+    const renderColumnHeaderStyle = (column) => {
+      return {
+        ...renderColumnDefaultStyle(column),
+        "max-width": "fit-content"
+      };
+    };
+    const renderColumnDataCellStyle = (column) => {
+      return {
+        ...renderColumnDefaultStyle(column)
+      };
+    };
+    const getColumnDataCellClasses = (column) => {
+      const classes = [];
+      if (highlightedColumn.value === column.property) {
+        classes.push("--highlighted");
+      }
+      if (currentHoveredColumn.value === column.property) {
+        classes.push("--hovered");
+      }
+      return classes;
+    };
+    const getColumnHeaderClasses = (column) => {
+      const classes = [];
+      if (highlightedColumn.value === column.property) {
+        classes.push("--highlighted");
+      }
+      if (currentHoveredColumn.value === column.property) {
+        classes.push("--hovered");
+      }
+      return classes;
+    };
+    const getColumnDataRowClasses = (rowId) => {
+      const classes = [];
+      if (currentHoveredRow.value === rowId) {
+        classes.push("--hovered");
+      }
+      return classes;
+    };
+    const isColumnVisible = (column) => {
+      return column.visible ?? true;
+    };
+    const isMouseOver = ref(false);
+    const forceHighlightedColumn = ref(false);
+    const highlightedColumn = ref(null);
+    const setHighlightedColumn = (column) => {
+      var _a;
+      if ((_a = dataTable.value) == null ? void 0 : _a.classList.contains("--resizing")) {
+        return;
+      }
+      if (!column) {
+        if (forceHighlightedColumn.value) {
+          return;
+        }
+        isMouseOver.value = false;
+        window.setTimeout(() => {
+          if (!isMouseOver.value) {
+            highlightedColumn.value = null;
+          }
+        }, 100);
+        return;
+      }
+      if (forceHighlightedColumn.value) {
+        return;
+      }
+      isMouseOver.value = true;
+      highlightedColumn.value = column.property;
+    };
+    const emitReload = () => emit("reload");
+    const emitPaginationLimitChange = (limitValue) => {
+      emit("pagination-limit-change", limitValue);
+    };
+    const emitPaginationCurrentPageChange = (currentPage) => {
+      emit("pagination-current-page-change", currentPage);
+    };
+    const emitSearchValueChange = (searchValue) => {
+      emit("search-value-change", searchValue);
+    };
+    const debouncedEmitSearchValueChange = useDebounceFn((value) => {
+      emitSearchValueChange(value);
+    }, 300);
+    const handleSearchUpdate = (value) => {
+      debouncedEmitSearchValueChange(value);
+    };
+    const paginationOptionsConverted = computed(() => {
+      return props.paginationOptions.map((paginationNumber) => ({
+        id: paginationNumber,
+        label: paginationNumber.toString(),
+        value: paginationNumber
+      }));
+    });
+    const changeColumnPosition = (columnId, targetColumnId, insertPosition = "before") => {
+      const column = columnsWithChanges.value.find((column2) => column2.property === columnId);
+      const targetColumn = columnsWithChanges.value.find(
+        (column2) => column2.property === targetColumnId
+      );
+      if (!column || !targetColumn) {
+        return;
+      }
+      [...columnsWithChanges.value].sort((columnA, columnB) => {
+        return columnA.position - columnB.position;
+      }).sort((columnA, columnB) => {
+        if (columnB.property === column.property) {
+          if (insertPosition === "after") {
+            return columnA.position <= targetColumn.position ? -1 : 1;
+          } else {
+            return columnA.position < targetColumn.position ? -1 : 1;
+          }
+        }
+        if (columnA.property === column.property) {
+          if (insertPosition === "after") {
+            return columnB.position > targetColumn.position ? -1 : 1;
+          } else {
+            return columnB.position >= targetColumn.position ? -1 : 1;
+          }
+        }
+        return 0;
+      }).forEach((column2, index) => {
+        addToColumnChanges(column2.property, { position: index * 100 });
+      });
+    };
+    const isDragging = ref(false);
+    const DRAG_GROUP_COLUMN = "drag-group-column";
+    const dragConfig = {
+      dragGroup: DRAG_GROUP_COLUMN,
+      preventEvent: false,
+      validateDragStart: (dragConfigData, el, event) => {
+        const allDragZones = document.querySelectorAll(".mt-data-table__table-head-dragzone");
+        const isChild = [...allDragZones].some((dragZone) => dragZone.contains(event.target));
+        return isChild;
+      },
+      onDragStart: () => {
+        if (dataTable.value) {
+          dataTable.value.classList.add("is--dragging-inside");
+        }
+        document.body.style.cursor = "grabbing";
+        isDragging.value = true;
+      },
+      onDrop: (dragConfigData, dropConfigData) => {
+        if (dataTable.value) {
+          dataTable.value.classList.remove("is--dragging-inside");
+        }
+        document.body.style.cursor = "";
+        isDragging.value = false;
+        if (dragConfigData && dropConfigData) {
+          changeColumnPosition(
+            dragConfigData.property,
+            dropConfigData.property,
+            dropConfigData.dropZone
+          );
+        }
+      }
+    };
+    const dropConfig = {
+      dragGroup: DRAG_GROUP_COLUMN
+    };
+    const changeColumnVisibility = (columnProperty, visibility) => {
+      const column = columnsWithChanges.value.find((column2) => column2.property === columnProperty);
+      if (!column) {
+        return;
+      }
+      addToColumnChanges(columnProperty, {
+        visible: visibility
+      });
+    };
+    const emitSortChange = (property, direction) => {
+      emit("sort-change", property, direction);
+    };
+    const onColumnSettingsSortChange = (property, direction, chainMethod) => {
+      emitSortChange(property, direction);
+      if (chainMethod) {
+        chainMethod();
+      }
+    };
+    function removeFilter(id) {
+      const updatedFilters = props.appliedFilters.filter((filter) => filter.id !== id);
+      emit("update:appliedFilters", updatedFilters);
+    }
+    function addOption(filterId, optionId) {
+      const filter = props.filters.find((filter2) => filter2.id === filterId);
+      if (!filter)
+        throw new Error(
+          `Failed to add filter option: Filter with the id "${filterId}" is not correct`
+        );
+      const filterAlreadyInUse = !!props.appliedFilters.find((appliedFilter) => {
+        return appliedFilter.id === filter.id;
+      });
+      if (!filterAlreadyInUse) {
+        emit("update:appliedFilters", [
+          ...props.appliedFilters,
+          {
+            ...filter,
+            type: {
+              ...filter.type,
+              options: [filter.type.options.find((option) => option.id === optionId)]
+            }
+          }
+        ]);
+        return;
+      }
+      emit("update:appliedFilters", [
+        ...props.appliedFilters.map((appliedFilter) => {
+          if (appliedFilter.id === filter.id) {
+            return {
+              ...appliedFilter,
+              type: {
+                ...appliedFilter.type,
+                options: [
+                  ...appliedFilter.type.options,
+                  filter.type.options.find((option) => option.id === optionId)
+                ]
+              }
+            };
+          }
+          return appliedFilter;
+        })
+      ]);
+    }
+    function removeOption(filterId, optionId) {
+      const removingLastOptionInFilter = props.appliedFilters.some((appliedFilter) => {
+        if (appliedFilter.id === filterId) {
+          if (appliedFilter.type.options.length === 1) {
+            return true;
+          }
+        }
+        return false;
+      });
+      if (removingLastOptionInFilter) {
+        const newFilters2 = props.appliedFilters.filter(
+          (appliedFilter) => appliedFilter.id !== filterId
+        );
+        emit("update:appliedFilters", newFilters2);
+        return;
+      }
+      const newFilters = props.appliedFilters.map((appliedFilter) => {
+        if (appliedFilter.id === filterId) {
+          return {
+            ...appliedFilter,
+            type: {
+              ...appliedFilter.type,
+              options: appliedFilter.type.options.filter((option) => option.id !== optionId)
+            }
+          };
+        }
+        return appliedFilter;
+      });
+      emit("update:appliedFilters", newFilters);
+    }
+    function isOptionSelected(filterId, optionId) {
+      const filterInUse = props.appliedFilters.find((appliedFilter) => {
+        return appliedFilter.id === filterId;
+      });
+      if (!filterInUse)
+        return false;
+      return !!filterInUse.type.options.find((option) => option.id === optionId);
+    }
+    const showData = computed(() => {
+      return props.dataSource.length > 0 || props.isLoading;
+    });
+    const tableWrapper = ref();
+    useScrollPossibilitiesClasses(tableWrapper, showData);
+    const MtDataTableClasses = computed(() => {
+      return {
+        "mt-data-table__layout-default": props.layout === "default",
+        "mt-data-table__layout-full": props.layout === "full",
+        "mt-data-table__first-column-fixed": props.allowRowSelection,
+        // could be relevant in the feature when you can disable the context button
+        "mt-data-table__last-column-fixed": true,
+        "mt-data-table__stripes": props.showStripes,
+        "mt-data-table__outlines": props.showOutlines,
+        "mt-data-table__column-outline-framing-active": props.enableOutlineFraming
+      };
+    });
+    const getColumnHeaderInnerWrapperClasses = (column) => {
+      return [`mt-data-table__table-head-inner-wrapper-${column.renderer}-renderer`];
+    };
+    const leftFixedColumnWidth = ref(0);
+    const calculateLeftFixedColumnWith = () => {
+      if (dataTable.value) {
+        const stickyColumns = dataTable.value.querySelectorAll("thead th[data-sticky-column]");
+        const lastStickyColumn = stickyColumns[stickyColumns.length - 1];
+        if (!lastStickyColumn) {
+          return;
+        }
+        const lastStickyColumnRight = lastStickyColumn.dataset.stickyColumnRight;
+        leftFixedColumnWidth.value = Number(lastStickyColumnRight);
+      }
+    };
+    let tableMutationObserver;
+    const createTableMutationObserver = () => {
+      if (dataTable.value) {
+        tableMutationObserver = new MutationObserver(
+          throttle(() => {
+            calculateLeftFixedColumnWith();
+          }, 60)
+        );
+        tableMutationObserver.observe(dataTable.value, {
+          childList: true,
+          subtree: true,
+          attributes: true
+        });
+      }
+    };
+    onMounted(() => {
+      createTableMutationObserver();
+      calculateLeftFixedColumnWith();
+    });
+    onBeforeUnmount(() => {
+      if (tableMutationObserver) {
+        tableMutationObserver.disconnect();
+      }
+    });
+    const tableStylingVariables = computed(() => {
+      return {
+        "--fixed-left-column-width": `${leftFixedColumnWidth.value}px`,
+        "--fixed-right-column-width": "105px"
+      };
+    });
+    const getSelectionValue = (dataId) => {
+      if (props.allowRowSelection) {
+        return props.selectedRows.includes(dataId);
+      }
+      return false;
+    };
+    const onRowSelect = (dataId) => {
+      if (props.allowRowSelection && !props.disableRowSelect.includes(dataId)) {
+        const previousValue = getSelectionValue(dataId);
+        emit("selection-change", {
+          id: dataId,
+          value: !previousValue
+        });
+      }
+    };
+    const somethingSelected = computed(() => {
+      return props.selectedRows.length > 0;
+    });
+    const bulkEditSegmentedControlActions = computed(() => {
+      const actions = [
+        {
+          id: "item-selection-count",
+          label: t("bulkEdit.itemsSelected", { n: props.selectedRows.length }),
+          onClick: () => {
+            emit("multiple-selection-change", {
+              selections: props.selectedRows,
+              value: false
+            });
+          },
+          isPressed: true,
+          checked: true,
+          hasCheckbox: true
+        }
+      ];
+      if (props.allowBulkEdit && !props.disableEdit) {
+        actions.push({
+          id: "edit",
+          label: t("bulkEdit.edit"),
+          onClick: () => emit("bulk-edit")
+        });
+      }
+      if (props.allowBulkDelete && !props.disableDelete) {
+        actions.push({
+          id: "delete",
+          label: t("bulkEdit.delete"),
+          onClick: () => emit("bulk-delete"),
+          isCritical: true
+        });
+      }
+      if (props.bulkEditMoreActions.length > 0) {
+        actions.push({
+          id: "more",
+          label: t("bulkEdit.more"),
+          popover: {}
+        });
+      }
+      return actions;
+    });
+    const handleSelectAll = () => {
+      emit("multiple-selection-change", {
+        selections: props.dataSource.filter((r) => !props.disableRowSelect.includes(r.id)).map((r) => r.id),
+        value: true
+      });
+    };
+    const getPreviousVisibleColumn = (column) => {
+      const visibleColumns2 = sortedColumns.value.filter((c) => isColumnVisible(c));
+      const index = visibleColumns2.findIndex((c) => c.property === column.property);
+      if (index <= 0) {
+        return null;
+      }
+      return visibleColumns2[index - 1];
+    };
+    const emptyData = computed(() => {
+      return Array.from({ length: props.paginationLimit }, () => ({}));
+    });
+    const getRealIndex = (index) => {
+      return (props.currentPage - 1) * props.paginationLimit + index + 1;
+    };
+    return {
+      t,
+      sortedColumns,
+      isFirstVisibleColumn,
+      addColumnOptions,
+      renderColumnDataCellStyle,
+      renderColumnHeaderStyle,
+      tableWrapper,
+      emitReload,
+      emitPaginationLimitChange,
+      emitPaginationCurrentPageChange,
+      emitSearchValueChange,
+      paginationOptionsConverted,
+      startColumnResizing,
+      columnHeaderRefs,
+      columnDataCellRefs,
+      setColumnDataCellRefs,
+      dataTable,
+      dragConfig,
+      dropConfig,
+      resetAllChanges,
+      changeColumnPosition,
+      isColumnVisible,
+      changeColumnVisibility,
+      emitSortChange,
+      onColumnSettingsSortChange,
+      MtDataTableClasses,
+      tableStylingVariables,
+      getSelectionValue,
+      onRowSelect,
+      somethingSelected,
+      bulkEditSegmentedControlActions,
+      handleSelectAll,
+      highlightedColumn,
+      setHighlightedColumn,
+      getColumnDataCellClasses,
+      getColumnHeaderClasses,
+      getPreviousVisibleColumn,
+      getColumnDataRowClasses,
+      getColumnHeaderInnerWrapperClasses,
+      forceHighlightedColumn,
+      addColumnOptionsSearch,
+      onAddColumnOptionClick,
+      onAddColumnSearch,
+      currentHoveredColumn,
+      currentHoveredRow,
+      setCurrentHoveredCell,
+      isPrimaryColumn,
+      emptyData,
+      getRealIndex,
+      isDragging,
+      filterChildViews,
+      removeFilter,
+      addOption,
+      removeOption,
+      isOptionSelected,
+      handleSearchUpdate
+      // Use explicit assignment
+    };
+  }
+});
+const mtDataTable_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1 = { class: "mt-data-table__toolbar" };
+const _hoisted_2 = {
+  key: 0,
+  class: "mt-data-table__filter"
+};
+const _hoisted_3 = { class: "mt-data-table__filter-list" };
+const _hoisted_4 = ["aria-label", "onClick"];
+const _hoisted_5 = {
+  key: 0,
+  class: "mt-data-table__table-selection-bulk-edit"
+};
+const _hoisted_6 = {
+  ref: "tableWrapper",
+  class: "mt-data-table__table-wrapper"
+};
+const _hoisted_7 = { ref: "dataTable" };
+const _hoisted_8 = { class: "mt-data-table__caption" };
+const _hoisted_9 = {
+  key: 0,
+  class: "mt-data-table__table-row-number-head",
+  scope: "col"
+};
+const _hoisted_10 = {
+  key: 1,
+  class: "mt-data-table__table-selection-head",
+  scope: "col"
+};
+const _hoisted_11 = ["data-header-column-property", "data-testid", "onMouseenter"];
+const _hoisted_12 = ["data-testid"];
+const _hoisted_13 = ["data-testid"];
+const _hoisted_14 = { class: "mt-data-table__table-head-dragzone-indicator" };
+const _hoisted_15 = {
+  key: 0,
+  class: "mt-data-table__table-head-sorting-icons"
+};
+const _hoisted_16 = ["data-testid"];
+const _hoisted_17 = ["data-testid"];
+const _hoisted_18 = ["data-testid", "onClick"];
+const _hoisted_19 = ["data-testid", "onMousedown", "onMouseenter"];
+const _hoisted_20 = ["data-testid", "onMousedown", "onMouseenter"];
+const _hoisted_21 = {
+  key: 2,
+  class: "mt-data-table__table-settings-button",
+  scope: "col"
+};
+const _hoisted_22 = {
+  key: 0,
+  class: "mt-data-table__table-row-number"
+};
+const _hoisted_23 = {
+  key: 1,
+  class: "mt-data-table__table-select-row"
+};
+const _hoisted_24 = ["data-cell-column-property", "onMouseenter"];
+const _hoisted_25 = {
+  key: 2,
+  class: "mt-data-table__table-context-button"
+};
+const _hoisted_26 = ["onClick"];
+const _hoisted_27 = {
+  key: 1,
+  class: "mt-data-table__empty-state"
+};
+const _hoisted_28 = { class: "mt-data-table__footer-left" };
+const _hoisted_29 = { class: "mt-data-table__pagination-info-text" };
+const _hoisted_30 = { class: "mt-data-table__footer-right" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_mt_search = resolveComponent("mt-search");
+  const _component_mt_icon = resolveComponent("mt-icon");
+  const _component_mt_button = resolveComponent("mt-button");
+  const _component_mt_popover_item = resolveComponent("mt-popover-item");
+  const _component_mt_popover = resolveComponent("mt-popover");
+  const _component_mt_data_table_filter = resolveComponent("mt-data-table-filter");
+  const _component_mt_data_table_reset_filter_button = resolveComponent("mt-data-table-reset-filter-button");
+  const _component_mt_segmented_control = resolveComponent("mt-segmented-control");
+  const _component_mt_checkbox = resolveComponent("mt-checkbox");
+  const _component_mt_popover_item_result = resolveComponent("mt-popover-item-result");
+  const _component_mt_floating_ui = resolveComponent("mt-floating-ui");
+  const _component_mt_data_table_settings = resolveComponent("mt-data-table-settings");
+  const _component_mt_skeleton_bar = resolveComponent("mt-skeleton-bar");
+  const _component_mt_data_table_number_renderer = resolveComponent("mt-data-table-number-renderer");
+  const _component_mt_data_table_text_renderer = resolveComponent("mt-data-table-text-renderer");
+  const _component_mt_data_table_badge_renderer = resolveComponent("mt-data-table-badge-renderer");
+  const _component_mt_data_table_price_renderer = resolveComponent("mt-data-table-price-renderer");
+  const _component_mt_context_menu_item = resolveComponent("mt-context-menu-item");
+  const _component_mt_context_button = resolveComponent("mt-context-button");
+  const _component_mt_empty_state = resolveComponent("mt-empty-state");
+  const _component_mt_select = resolveComponent("mt-select");
+  const _component_mt_pagination = resolveComponent("mt-pagination");
+  const _component_mt_inset = resolveComponent("mt-inset");
+  const _component_mt_card = resolveComponent("mt-card");
+  const _directive_stickyColumn = resolveDirective("stickyColumn");
+  const _directive_droppable = resolveDirective("droppable");
+  const _directive_tooltip = resolveDirective("tooltip");
+  const _directive_draggable = resolveDirective("draggable");
+  return openBlock(), createBlock(_component_mt_card, {
+    class: normalizeClass(["mt-data-table", _ctx.MtDataTableClasses]),
+    title: _ctx.title,
+    subtitle: _ctx.subtitle
+  }, {
+    toolbar: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        _ctx.disableSearch !== true ? (openBlock(), createBlock(_component_mt_search, {
+          key: 0,
+          class: "mt-data-table__search",
+          size: "small",
+          "model-value": _ctx.searchValue,
+          "onUpdate:modelValue": _ctx.handleSearchUpdate
+        }, null, 8, ["model-value", "onUpdate:modelValue"])) : createCommentVNode("", true),
+        _ctx.filters.length > 0 ? (openBlock(), createBlock(_component_mt_popover, {
+          key: 1,
+          title: "Filters",
+          "child-views": _ctx.filterChildViews
+        }, createSlots({
+          trigger: withCtx(({ toggleFloatingUi }) => [
+            createVNode(_component_mt_button, {
+              variant: "secondary",
+              onClick: toggleFloatingUi
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_mt_icon, {
+                  name: "solid-filter-s",
+                  "aria-hidden": "true"
+                }),
+                createElementVNode("span", null, toDisplayString(_ctx.t("filter.addFilter")), 1)
+              ]),
+              _: 2
+            }, 1032, ["onClick"])
+          ]),
+          "popover-items__base": withCtx(({ changeView }) => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
+              return openBlock(), createBlock(_component_mt_popover_item, {
+                key: filter.id,
+                label: filter.label,
+                "show-options": "",
+                onClickOptions: () => changeView(filter.id)
+              }, null, 8, ["label", "onClickOptions"]);
+            }), 128))
+          ]),
+          _: 2
+        }, [
+          renderList(_ctx.filters, (filter) => {
+            return {
+              name: `popover-items__${filter.id}`,
+              fn: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(filter.type.options, (option) => {
+                  return openBlock(), createBlock(_component_mt_popover_item, {
+                    key: option.id,
+                    label: option.label,
+                    "show-checkbox": "",
+                    "checkbox-checked": _ctx.isOptionSelected(filter.id, option.id),
+                    onChangeCheckbox: (isChecked) => isChecked ? _ctx.addOption(filter.id, option.id) : _ctx.removeOption(filter.id, option.id)
+                  }, null, 8, ["label", "checkbox-checked", "onChangeCheckbox"]);
+                }), 128))
+              ])
+            };
+          })
+        ]), 1032, ["child-views"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "toolbar")
+      ]),
+      _ctx.appliedFilters.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        createElementVNode("span", null, toDisplayString(_ctx.isLoading ? _ctx.t("filter.fetchingFilteredResults") : _ctx.t("filter.numberOfResults", { n: _ctx.numberOfResults ?? 0 })), 1),
+        createElementVNode("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.appliedFilters, (filter) => {
+            return openBlock(), createBlock(_component_mt_data_table_filter, {
+              key: filter.id,
+              filter: _ctx.filters.find((f) => f.id === filter.id),
+              "applied-options": filter.type.options,
+              onAddOption: _cache[0] || (_cache[0] = (filterId, optionId) => _ctx.addOption(filterId, optionId)),
+              onRemoveOption: _cache[1] || (_cache[1] = (filterId, optionId) => _ctx.removeOption(filterId, optionId)),
+              onRemoveFilter: ($event) => _ctx.removeFilter(filter.id)
+            }, null, 8, ["filter", "applied-options", "onRemoveFilter"]);
+          }), 128))
+        ]),
+        createVNode(_component_mt_popover, {
+          title: "Filters",
+          "child-views": _ctx.filterChildViews
+        }, createSlots({
+          trigger: withCtx(({ toggleFloatingUi }) => [
+            createElementVNode("button", {
+              type: "button",
+              class: "mt-data-table__add-filter-button",
+              "aria-label": _ctx.t("filter.addFilter"),
+              onClick: toggleFloatingUi
+            }, [
+              createVNode(_component_mt_icon, { name: "solid-plus-square-s" })
+            ], 8, _hoisted_4)
+          ]),
+          "popover-items__base": withCtx(({ changeView }) => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
+              return openBlock(), createBlock(_component_mt_popover_item, {
+                key: filter.id,
+                label: filter.label,
+                "show-options": "",
+                onClickOptions: () => changeView(filter.id)
+              }, null, 8, ["label", "onClickOptions"]);
+            }), 128))
+          ]),
+          _: 2
+        }, [
+          renderList(_ctx.filters, (filter) => {
+            return {
+              name: `popover-items__${filter.id}`,
+              fn: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(filter.type.options, (option) => {
+                  return openBlock(), createBlock(_component_mt_popover_item, {
+                    key: option.id,
+                    label: option.label,
+                    "show-checkbox": "",
+                    "checkbox-checked": _ctx.isOptionSelected(filter.id, option.id),
+                    onChangeCheckbox: (isChecked) => isChecked ? _ctx.addOption(filter.id, option.id) : _ctx.removeOption(filter.id, option.id)
+                  }, null, 8, ["label", "checkbox-checked", "onChangeCheckbox"]);
+                }), 128))
+              ])
+            };
+          })
+        ]), 1032, ["child-views"]),
+        createVNode(_component_mt_data_table_reset_filter_button, {
+          "number-of-applied-filters": _ctx.appliedFilters.length,
+          onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:appliedFilters", []))
+        }, null, 8, ["number-of-applied-filters"])
+      ])) : createCommentVNode("", true)
+    ]),
+    default: withCtx(() => [
+      _ctx.somethingSelected ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        createVNode(_component_mt_segmented_control, {
+          "disable-context": "",
+          actions: _ctx.bulkEditSegmentedControlActions
+        }, {
+          "more--popover-items__base": withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.bulkEditMoreActions, (moreAction) => {
+              return openBlock(), createBlock(_component_mt_popover_item, {
+                key: moreAction.id,
+                label: moreAction.label,
+                "on-label-click": moreAction.onClick,
+                type: moreAction.type,
+                icon: moreAction.icon,
+                "meta-copy": moreAction.metaCopy,
+                "contextual-detail": moreAction.contextualDetail
+              }, null, 8, ["label", "on-label-click", "type", "icon", "meta-copy", "contextual-detail"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["actions"])
+      ])) : createCommentVNode("", true),
+      createElementVNode("div", _hoisted_6, [
+        createElementVNode("table", _hoisted_7, [
+          createElementVNode("caption", _hoisted_8, toDisplayString(_ctx.caption), 1),
+          createElementVNode("thead", null, [
+            createElementVNode("tr", null, [
+              _ctx.enableRowNumbering ? withDirectives((openBlock(), createElementBlock("th", _hoisted_9, _cache[15] || (_cache[15] = [
+                createElementVNode("span", null, " # ", -1)
+              ]))), [
+                [_directive_stickyColumn]
+              ]) : createCommentVNode("", true),
+              _ctx.allowRowSelection ? withDirectives((openBlock(), createElementBlock("th", _hoisted_10, [
+                createVNode(_component_mt_checkbox, {
+                  checked: _ctx.somethingSelected,
+                  onChange: _ctx.handleSelectAll
+                }, null, 8, ["checked", "onChange"])
+              ])), [
+                [_directive_stickyColumn]
+              ]) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortedColumns, (column) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  _ctx.isColumnVisible(column) ? withDirectives((openBlock(), createElementBlock("th", {
+                    key: column.property,
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) {
+                        _ctx.columnHeaderRefs[column.property] = el;
+                      }
+                    },
+                    scope: "col",
+                    class: normalizeClass(["mt-data-table__table-wrapper-table-head", _ctx.getColumnHeaderClasses(column)]),
+                    "data-header-column-property": column.property,
+                    style: normalizeStyle(_ctx.renderColumnHeaderStyle(column)),
+                    "data-testid": "column-table-head__" + column.property,
+                    onMouseenter: () => _ctx.currentHoveredColumn = column.property,
+                    onMouseleave: _cache[7] || (_cache[7] = () => _ctx.currentHoveredColumn = null)
+                  }, [
+                    createElementVNode("div", {
+                      class: "mt-data-table__table-head-dragzone",
+                      "data-testid": "column-dragzone__" + column.property
+                    }, [
+                      createElementVNode("div", {
+                        class: "mt-data-table__table-head-dragzone-bar",
+                        "data-testid": "column-dragzone-bar__" + column.property
+                      }, [
+                        createElementVNode("div", _hoisted_14, [
+                          createVNode(_component_mt_icon, { name: "regular-grip-horizontal-s" })
+                        ])
+                      ], 8, _hoisted_13)
+                    ], 8, _hoisted_12),
+                    createElementVNode("div", {
+                      class: normalizeClass(["mt-data-table__table-head-inner-wrapper", _ctx.getColumnHeaderInnerWrapperClasses(column)])
+                    }, [
+                      createElementVNode("span", null, toDisplayString(column.label), 1),
+                      _ctx.sortBy === column.property ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                        createVNode(_component_mt_icon, {
+                          name: _ctx.sortDirection === "ASC" ? "solid-long-arrow-up" : "solid-long-arrow-down",
+                          class: "mt-data-table__table-head-sort"
+                        }, null, 8, ["name"])
+                      ])) : createCommentVNode("", true)
+                    ], 2),
+                    withDirectives(createElementVNode("div", {
+                      class: "mt-data-table__table-head-dropzone-before",
+                      "data-testid": "column-dropzone-before__" + column.property
+                    }, null, 8, _hoisted_16), [
+                      [_directive_droppable, { ..._ctx.dropConfig, data: { ...column, dropZone: "before" } }]
+                    ]),
+                    withDirectives(createElementVNode("div", {
+                      class: "mt-data-table__table-head-dropzone-after",
+                      "data-testid": "column-dropzone-after__" + column.property
+                    }, null, 8, _hoisted_17), [
+                      [_directive_droppable, { ..._ctx.dropConfig, data: { ...column, dropZone: "after" } }]
+                    ]),
+                    createVNode(_component_mt_popover, {
+                      title: column.label,
+                      class: "mt-data-table__table-head-column-settings"
+                    }, {
+                      trigger: withCtx(({ toggleFloatingUi }) => [
+                        createElementVNode("div", {
+                          class: "mt-data-table__table-head-column-settings-trigger",
+                          "data-testid": "column-settings-trigger__" + column.property,
+                          onClick: toggleFloatingUi
+                        }, null, 8, _hoisted_18)
+                      ]),
+                      "popover-items__base": withCtx(({ toggleFloatingUi }) => [
+                        column.sortable ? (openBlock(), createBlock(_component_mt_popover_item, {
+                          key: 0,
+                          label: _ctx.t("columnSettings.sortAscending"),
+                          icon: "regular-long-arrow-up",
+                          "contextual-detail": "A -> Z",
+                          "on-label-click": () => _ctx.onColumnSettingsSortChange(column.property, "ASC", toggleFloatingUi)
+                        }, null, 8, ["label", "on-label-click"])) : createCommentVNode("", true),
+                        column.sortable ? (openBlock(), createBlock(_component_mt_popover_item, {
+                          key: 1,
+                          label: _ctx.t("columnSettings.sortDescending"),
+                          icon: "regular-long-arrow-down",
+                          "contextual-detail": "Z -> A",
+                          "on-label-click": () => _ctx.onColumnSettingsSortChange(column.property, "DESC", toggleFloatingUi)
+                        }, null, 8, ["label", "on-label-click"])) : createCommentVNode("", true),
+                        !_ctx.isPrimaryColumn(column) ? (openBlock(), createBlock(_component_mt_popover_item, {
+                          key: 2,
+                          label: _ctx.t("columnSettings.hideColumn"),
+                          icon: "regular-eye-slash",
+                          "on-label-click": () => _ctx.changeColumnVisibility(column.property, false),
+                          "border-top": ""
+                        }, null, 8, ["label", "on-label-click"])) : createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["title"]),
+                    _ctx.highlightedColumn === column.property && !_ctx.isDragging ? (openBlock(), createBlock(_component_mt_floating_ui, {
+                      key: 0,
+                      "is-opened": true,
+                      offset: 0,
+                      class: "mt-data-table__table-head-add-column-indicator",
+                      "auto-update-options": { animationFrame: true }
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_mt_popover, {
+                          title: _ctx.t("addColumnIndicator.popoverTitle"),
+                          "onUpdate:isOpened": _cache[4] || (_cache[4] = (value) => {
+                            if (value === false) {
+                              _ctx.forceHighlightedColumn = false;
+                              _ctx.setHighlightedColumn(null);
+                            }
+                          })
+                        }, {
+                          trigger: withCtx(({ toggleFloatingUi }) => [
+                            withDirectives(createVNode(_component_mt_icon, {
+                              name: "solid-plus-square-s",
+                              "data-testid": "add-column-indicator-icon__" + column.property,
+                              onMouseenter: () => _ctx.setHighlightedColumn(column),
+                              onMouseleave: _cache[3] || (_cache[3] = () => _ctx.setHighlightedColumn(null)),
+                              onClick: () => {
+                                _ctx.forceHighlightedColumn = true;
+                                toggleFloatingUi();
+                              }
+                            }, null, 8, ["data-testid", "onMouseenter", "onClick"]), [
+                              [_directive_tooltip, {
+                                message: _ctx.t("addColumnIndicator.tooltipMessage"),
+                                width: "auto"
+                              }]
+                            ])
+                          ]),
+                          "popover-items__base": withCtx(({ toggleFloatingUi }) => [
+                            createVNode(_component_mt_popover_item_result, {
+                              options: _ctx.addColumnOptions,
+                              onSearch: _ctx.onAddColumnSearch,
+                              onClickOption: (columnProperty) => {
+                                _ctx.onAddColumnOptionClick(columnProperty, column.property);
+                                toggleFloatingUi();
+                              }
+                            }, null, 8, ["options", "onSearch", "onClickOption"])
+                          ]),
+                          _: 2
+                        }, 1032, ["title"])
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true),
+                    column.allowResize !== false ? (openBlock(), createElementBlock("div", {
+                      key: 1,
+                      class: "mt-data-table__table-head-resizable mt-data-table__table-head-resizable-before",
+                      "data-testid": "mt-data-table__table-head-resizable-before__" + column.property,
+                      onMousedown: withModifiers(
+                        () => _ctx.startColumnResizing(_ctx.getPreviousVisibleColumn(column)),
+                        ["prevent", "stop"]
+                      ),
+                      onMouseenter: () => _ctx.setHighlightedColumn(_ctx.getPreviousVisibleColumn(column)),
+                      onMouseleave: _cache[5] || (_cache[5] = () => _ctx.setHighlightedColumn(null))
+                    }, null, 40, _hoisted_19)) : createCommentVNode("", true),
+                    column.allowResize !== false ? (openBlock(), createElementBlock("div", {
+                      key: 2,
+                      class: "mt-data-table__table-head-resizable mt-data-table__table-head-resizable-after",
+                      "data-testid": "mt-data-table__table-head-resizable-after__" + column.property,
+                      onMousedown: withModifiers(() => _ctx.startColumnResizing(column), ["prevent", "stop"]),
+                      onMouseenter: () => _ctx.setHighlightedColumn(column),
+                      onMouseleave: _cache[6] || (_cache[6] = () => _ctx.setHighlightedColumn(null))
+                    }, null, 40, _hoisted_20)) : createCommentVNode("", true)
+                  ], 46, _hoisted_11)), [
+                    [_directive_draggable, { ..._ctx.dragConfig, data: column }]
+                  ]) : createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              !(_ctx.disableSettingsTable && _ctx.disableEdit && _ctx.disableDelete && !_ctx.additionalContextButtons.length) ? (openBlock(), createElementBlock("th", _hoisted_21, [
+                !_ctx.disableSettingsTable ? (openBlock(), createBlock(_component_mt_data_table_settings, {
+                  key: 0,
+                  columns: _ctx.sortedColumns,
+                  "show-outlines": _ctx.showOutlines,
+                  "show-stripes": _ctx.showStripes,
+                  "enable-outline-framing": _ctx.enableOutlineFraming,
+                  "enable-row-numbering": _ctx.enableRowNumbering,
+                  onChangeShowOutlines: _cache[8] || (_cache[8] = (newValue) => _ctx.$emit("change-show-outlines", newValue)),
+                  onChangeShowStripes: _cache[9] || (_cache[9] = (newValue) => _ctx.$emit("change-show-stripes", newValue)),
+                  onChangeOutlineFraming: _cache[10] || (_cache[10] = (newValue) => _ctx.$emit("change-outline-framing", newValue)),
+                  onChangeEnableRowNumbering: _cache[11] || (_cache[11] = (newValue) => _ctx.$emit("change-enable-row-numbering", newValue)),
+                  onResetAllChanges: _ctx.resetAllChanges,
+                  onChangeColumnOrder: _cache[12] || (_cache[12] = ({ itemId, dropId, dropZone }) => _ctx.changeColumnPosition(itemId, dropId, dropZone)),
+                  onChangeColumnVisibility: _cache[13] || (_cache[13] = (columnProperty, visibility) => _ctx.changeColumnVisibility(columnProperty, visibility))
+                }, null, 8, ["columns", "show-outlines", "show-stripes", "enable-outline-framing", "enable-row-numbering", "onResetAllChanges"])) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
+            ])
+          ]),
+          createElementVNode("tbody", null, [
+            _ctx.dataSource.length > 0 || _ctx.isLoading ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.isLoading ? _ctx.emptyData : _ctx.dataSource, (data, rowIndex) => {
+              var _a, _b;
+              return openBlock(), createElementBlock("tr", {
+                key: data.id,
+                class: normalizeClass(_ctx.getColumnDataRowClasses(data.id))
+              }, [
+                _ctx.enableRowNumbering ? withDirectives((openBlock(), createElementBlock("td", _hoisted_22, [
+                  createElementVNode("span", null, toDisplayString(_ctx.getRealIndex(rowIndex)), 1)
+                ])), [
+                  [_directive_stickyColumn]
+                ]) : createCommentVNode("", true),
+                _ctx.allowRowSelection ? withDirectives((openBlock(), createElementBlock("td", _hoisted_23, [
+                  createVNode(_component_mt_checkbox, {
+                    checked: _ctx.getSelectionValue(data.id),
+                    disabled: _ctx.disableRowSelect.includes(data.id),
+                    onChange: ($event) => _ctx.onRowSelect(data.id)
+                  }, null, 8, ["checked", "disabled", "onChange"])
+                ])), [
+                  [_directive_stickyColumn]
+                ]) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortedColumns, (column) => {
+                  return openBlock(), createElementBlock(Fragment, null, [
+                    _ctx.isColumnVisible(column) ? (openBlock(), createElementBlock("td", {
+                      key: column.property + JSON.stringify(_ctx.columnChanges[column.property]),
+                      ref_for: true,
+                      ref: (el) => {
+                        _ctx.setColumnDataCellRefs({ el, column, index: rowIndex });
+                      },
+                      "data-cell-column-property": column.property,
+                      style: normalizeStyle(_ctx.renderColumnDataCellStyle(column)),
+                      class: normalizeClass(_ctx.getColumnDataCellClasses(column)),
+                      onMouseenter: () => _ctx.setCurrentHoveredCell(column.property, data.id),
+                      onMouseleave: _cache[14] || (_cache[14] = () => _ctx.setCurrentHoveredCell(null, null))
+                    }, [
+                      _ctx.isLoading ? (openBlock(), createBlock(_component_mt_skeleton_bar, { key: 0 })) : renderSlot(_ctx.$slots, `column-${column.property}`, {
+                        key: 1,
+                        data,
+                        columnDefinition: column
+                      }, () => [
+                        column.renderer === "number" ? (openBlock(), createBlock(_component_mt_data_table_number_renderer, {
+                          key: 0,
+                          data,
+                          "column-definition": column,
+                          onClick: ($event) => _ctx.$emit("open-details", data)
+                        }, null, 8, ["data", "column-definition", "onClick"])) : column.renderer === "text" ? (openBlock(), createBlock(_component_mt_data_table_text_renderer, {
+                          key: 1,
+                          data,
+                          "column-definition": column,
+                          onClick: ($event) => _ctx.$emit("open-details", data)
+                        }, null, 8, ["data", "column-definition", "onClick"])) : column.renderer === "badge" ? (openBlock(), createBlock(_component_mt_data_table_badge_renderer, {
+                          key: 2,
+                          data,
+                          "column-definition": column,
+                          onClick: ($event) => _ctx.$emit("open-details", data)
+                        }, null, 8, ["data", "column-definition", "onClick"])) : column.renderer === "price" ? (openBlock(), createBlock(_component_mt_data_table_price_renderer, {
+                          key: 3,
+                          data,
+                          "column-definition": column,
+                          onClick: ($event) => _ctx.$emit("open-details", data)
+                        }, null, 8, ["data", "column-definition", "onClick"])) : createCommentVNode("", true)
+                      ])
+                    ], 46, _hoisted_24)) : createCommentVNode("", true)
+                  ], 64);
+                }), 256)),
+                !(_ctx.disableSettingsTable && _ctx.disableEdit && _ctx.disableDelete && !((_a = _ctx.additionalContextButtons) == null ? void 0 : _a.length)) ? (openBlock(), createElementBlock("td", _hoisted_25, [
+                  !_ctx.disableEdit ? (openBlock(), createElementBlock("a", {
+                    key: 0,
+                    href: "#",
+                    onClick: withModifiers(($event) => _ctx.$emit("open-details", data), ["prevent"])
+                  }, toDisplayString(_ctx.t("contextButtons.edit")), 9, _hoisted_26)) : createCommentVNode("", true),
+                  !(_ctx.disableDelete && _ctx.disableEdit && !((_b = _ctx.additionalContextButtons) == null ? void 0 : _b.length)) ? (openBlock(), createBlock(_component_mt_context_button, { key: 1 }, {
+                    default: withCtx(({ toggleFloatingUi }) => [
+                      !_ctx.disableEdit ? (openBlock(), createBlock(_component_mt_context_menu_item, {
+                        key: 0,
+                        label: _ctx.t("contextButtons.edit"),
+                        onClick: () => {
+                          toggleFloatingUi();
+                          _ctx.$emit("open-details", data);
+                        }
+                      }, null, 8, ["label", "onClick"])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.additionalContextButtons, (action) => {
+                        return openBlock(), createBlock(_component_mt_context_menu_item, {
+                          key: action.key,
+                          type: action.type ?? "default",
+                          label: action.label,
+                          onClick: () => {
+                            _ctx.$emit("context-select", { key: action.key, data });
+                            toggleFloatingUi();
+                          }
+                        }, null, 8, ["type", "label", "onClick"]);
+                      }), 128)),
+                      !_ctx.disableDelete ? (openBlock(), createBlock(_component_mt_context_menu_item, {
+                        key: 1,
+                        type: "critical",
+                        label: _ctx.t("contextButtons.delete"),
+                        onClick: () => {
+                          _ctx.$emit("item-delete", data);
+                          toggleFloatingUi();
+                        }
+                      }, null, 8, ["label", "onClick"])) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ], 2);
+            }), 128)) : (openBlock(), createElementBlock("div", _hoisted_27, [
+              renderSlot(_ctx.$slots, "empty-state", {}, () => [
+                createVNode(_component_mt_empty_state, {
+                  icon: "solid-products",
+                  headline: _ctx.t("emptyState.headline"),
+                  description: _ctx.t("emptyState.description")
+                }, null, 8, ["headline", "description"])
+              ])
+            ]))
+          ])
+        ], 512)
+      ], 512),
+      createElementVNode("div", {
+        style: normalizeStyle(_ctx.tableStylingVariables),
+        class: "mt-data-table__scroll-shadow mt-data-table__scroll-shadow-top"
+      }, null, 4),
+      createElementVNode("div", {
+        style: normalizeStyle(_ctx.tableStylingVariables),
+        class: "mt-data-table__scroll-shadow mt-data-table__scroll-shadow-right"
+      }, null, 4),
+      createElementVNode("div", {
+        style: normalizeStyle(_ctx.tableStylingVariables),
+        class: "mt-data-table__scroll-shadow mt-data-table__scroll-shadow-bottom"
+      }, null, 4),
+      createElementVNode("div", {
+        style: normalizeStyle(_ctx.tableStylingVariables),
+        class: "mt-data-table__scroll-shadow mt-data-table__scroll-shadow-left"
+      }, null, 4)
+    ]),
+    footer: withCtx(() => [
+      createVNode(_component_mt_inset, { class: "mt-data-table__footer-inset" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_28, [
+            createVNode(_component_mt_select, {
+              small: "",
+              "hide-clearable-button": "",
+              options: _ctx.paginationOptionsConverted,
+              "model-value": _ctx.paginationLimit,
+              "aria-label": _ctx.t("itemsPerPage"),
+              onChange: _ctx.emitPaginationLimitChange
+            }, null, 8, ["options", "model-value", "aria-label", "onChange"]),
+            createElementVNode("span", _hoisted_29, toDisplayString(_ctx.t("itemsPerPage")), 1)
+          ]),
+          createElementVNode("div", _hoisted_30, [
+            createVNode(_component_mt_pagination, {
+              limit: _ctx.paginationLimit,
+              "current-page": _ctx.currentPage,
+              "total-items": _ctx.paginationTotalItems,
+              onChangeCurrentPage: _ctx.emitPaginationCurrentPageChange
+            }, null, 8, ["limit", "current-page", "total-items", "onChangeCurrentPage"]),
+            _ctx.enableReload ? withDirectives((openBlock(), createBlock(_component_mt_button, {
+              key: 0,
+              square: "",
+              "aria-label": "reload-data",
+              variant: "secondary",
+              onClick: _ctx.emitReload
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_mt_icon, { name: "solid-undo-s" })
+              ]),
+              _: 1
+            }, 8, ["onClick"])), [
+              [_directive_tooltip, {
+                message: _ctx.t("reload.tooltip"),
+                width: "auto"
+              }]
+            ]) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 3
+  }, 8, ["class", "title", "subtitle"]);
+}
+const MtDataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  MtDataTable as default
+};