sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseDataTableTemplate.vue

@@ -1,838 +1,838 @@
-<template>
-  <div
-    class="relative w-full overflow-hidden"
-    :style="{
-      minHeight: maxHeight ? maxHeight + 'px' : '200px',
-    }"
-  >
-    <div
-      ref="slot"
-      style="display: none"
-    >
-      <slot />
-    </div>
-
-    <BaseTable
-      ref="baseTableRef"
-      class="min-w-full"
-      :size="size"
-      :fixed-header="(maxHeight && maxHeight > 0) == true"
-      :fixed-column="true"
-      :max-height="maxHeight"
-      :loading="loading"
-      :virtual-scrolling="virtualScrolling"
-    >
-      <BaseTableHead v-if="newColumns.length">
-        <BaseTableRow>
-          <BaseTableHeader
-            v-for="(column, index) in visibleColumnsInternal"
-            :key="column.newKey + ':' + index + 'header'"
-            :style="column.style"
-            :tooltip="column.tooltip"
-            class="bg-slate-50"
-          >
-            <div class="flex gap-4">
-              <template v-if="index == 0">
-                <div
-                  v-if="showDetailRowIcon"
-                  class="flex h-5 w-5 shrink-0 grow-0"
-                />
-
-                <div
-                  v-if="checkable"
-                  class="flex items-center cursor-pointer"
-                  @click="checkAll"
-                >
-                  <input
-                    type="checkbox"
-                    autocomplete="off"
-                    :checked="isAllChecked"
-                    :disabled="isAllUncheckable"
-                    :class="checkboxStyle"
-                  >
-                </div>
-              </template>
-
-              <button
-                type="button"
-                class="flex gap-2 w-full items-start bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
-                :class="[
-                  column.sortable ? 'cursor-pointer' : '',
-                  column.align == 'right' ? 'justify-start flex-row-reverse text-right' : ''
-                ]"
-                @click="sort(column, undefined, $event as any)"
-              >
-                <div
-                  class="whitespace-nowrap text-slate-600"
-                  :class="{
-                    'text-[12px]': size == 'sm',
-                    'text-xs': size == 'md',
-                  }"
-                  v-html="column.label"
-                />
-                <!-- h-4 is used to make sure the tooltip icon is always smaller than label and avoid alignment issues when icon is not present -->
-                <div
-                  v-if="column.sortable"
-                  class="h-4 relative top-0.5"
-                  :class="[
-                    currentSortColumn === column
-                      ? ''
-                      : 'opacity-0 duration-200 group-hover:opacity-100',
-                  ]"
-                >
-                  <svg
-                    width="11"
-                    height="11"
-                    viewBox="0 0 11 11"
-                    fill="none"
-                    class="block"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      :opacity="!isAsc ? '0.5' : '1'"
-                      d="M4.88471 0.366233C5.00079 0.250125 5.1386 0.158021 5.29028 0.0951819C5.44196 0.0323429 5.60453 0 5.76871 0C5.93289 0 6.09546 0.0323429 6.24714 0.0951819C6.39882 0.158021 6.53663 0.250125 6.65271 0.366233L9.29871 3.01323C9.43119 3.15541 9.50331 3.34345 9.49988 3.53776C9.49646 3.73206 9.41774 3.91744 9.28033 4.05485C9.14292 4.19227 8.95753 4.27098 8.76323 4.27441C8.56893 4.27784 8.38088 4.20571 8.23871 4.07323L5.76871 1.60323L3.29871 4.07323C3.23005 4.14692 3.14725 4.20602 3.05525 4.24701C2.96325 4.28801 2.86393 4.31005 2.76323 4.31182C2.66253 4.3136 2.5625 4.29508 2.46911 4.25736C2.37572 4.21963 2.29089 4.16349 2.21967 4.09227C2.14845 4.02105 2.09231 3.93622 2.05459 3.84283C2.01686 3.74944 1.99834 3.64941 2.00012 3.54871C2.00189 3.44801 2.02394 3.34869 2.06493 3.25669C2.10592 3.1647 2.16502 3.08189 2.23871 3.01323L4.88471 0.366233Z"
-                      fill="black"
-                    ></path>
-                    <path
-                      :opacity="isAsc ? '0.5' : '1'"
-
-                      d="M4.84729 10.6083C4.96337 10.7244 5.10118 10.8165 5.25286 10.8793C5.40454 10.9422 5.56711 10.9745 5.73129 10.9745C5.89547 10.9745 6.05804 10.9422 6.20972 10.8793C6.3614 10.8165 6.49921 10.7244 6.61529 10.6083L9.26129 7.96129C9.39377 7.81912 9.4659 7.63107 9.46247 7.43677C9.45904 7.24247 9.38033 7.05708 9.24291 6.91967C9.1055 6.78226 8.92011 6.70354 8.72581 6.70012C8.53151 6.69669 8.34347 6.76881 8.20129 6.90129L5.73129 9.37129L3.26129 6.90129C3.11912 6.76881 2.93107 6.69669 2.73677 6.70012C2.54247 6.70354 2.35708 6.78226 2.21967 6.91967C2.08226 7.05708 2.00355 7.24247 2.00012 7.43677C1.99669 7.63107 2.06881 7.81912 2.20129 7.96129L4.84729 10.6083Z"
-                      fill="black"
-                    ></path>
-                  </svg>
-                </div>
-              </button>
-            </div>  
-          </BaseTableHeader>
-        </BaseTableRow>
-      </BaseTableHead>
-
-      <BaseTableBody
-        class="bg-white"
-      >
-        <template
-          v-for="(row, index) in data"
-          :key="getRowKey(row)"
-        >
-          <BaseTableRow
-            :to="rowTo ? rowTo(row) : undefined"
-            :selected="rowSelected ? rowSelected(row) : false"
-            v-bind="rowBindings(row, index)"
-          >
-            <BaseTableCell
-              v-for="(column, columnIndex) in visibleColumnsInternal"
-              :key="column.newKey + index + ':' + columnIndex"
-              :class="[column.class, column.numeric ? 'tabular-nums' : '']"
-              :align="column.align"
-              :style="column.style"
-              :to="column.to ? column.to(row) : undefined"
-              :href="column.href ? column.href(row) : undefined"
-              :target="column.target"
-              :ignore-row-interactions="column.ignoreRowInteractions"
-              :on-click="onCellClick(row, index, column, columnIndex)"
-            >
-              <div :class="[columnIndex == 0 ? 'flex items-center gap-4' : '']">
-                <template v-if="columnIndex == 0">
-                  <button
-                    v-if="showDetailRowIcon"
-                    type="button"
-                    class="relative z-[1] || flex h-5 w-5 shrink-0 grow-0 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 hover:text-slate-600 hover:shadow-md"
-                    @click.stop="toggleDetails(row)"
-                  >
-                    <BaseIcon
-                      v-if="hasDetailedVisible(row)"
-                      icon="mdi:chevron-down"
-                      class="h-5 w-5 duration-300"
-                      :class="{
-                        'rotate-180': isVisibleDetailRow(row)
-                      }"
-                    />
-                  </button>
-
-                  <div
-                    v-if="checkable"
-                    class="relative z-[1] || flex items-center group cursor-pointer bg-white"
-                    @click.stop="checkRow(row, index, $event as MouseEvent)"
-                  >
-                    <input
-                      type="checkbox"
-                      autocomplete="off"
-                      :disabled="!isRowCheckable(row)"
-                      :checked="isRowChecked(row)"
-                      :class="checkboxStyle"
-                    >
-                  </div>
-                </template>
-
-                <SlotComponent
-                  :component="column"
-                  scoped
-                  name="default"
-                  tag="div"
-                  class="text-sm grow"
-                  :data-label="column.label"
-                  :props="{ row, column, index, columnIndex, toggleDetails }"
-                />
-              </div>
-            </BaseTableCell>
-          </BaseTableRow>
-
-          <BaseTableRow
-            v-if="isActiveDetailRow(row)"
-            :key="getRowKey(row) + 'detail'"
-          >
-            <BaseTableCell
-              :colspan="columnCount"
-            >
-              <slot
-                name="detail"
-                :row="row"
-                :index="index"
-              />
-            </BaseTableCell>
-          </BaseTableRow>
-        </template>
-
-        <BaseTableRow v-if="data.length == 0">
-          <BaseTableCell :colspan="columnCount">
-            <slot name="empty" />
-          </BaseTableCell>
-        </BaseTableRow>
-      </BaseTableBody>
-    </BaseTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ref } from 'vue';
-import { BaseTableColumnData, CollectionItem, Row } from '@/types';
-import SlotComponent from './SlotComponent';
-import { isArray } from 'lodash';
-import { Size } from '@/utils/sizes';
-import objectHash from 'object-hash';
-import BaseTable from './BaseTable.vue';
-import BaseTableHead from './BaseTableHead.vue';
-import BaseTableHeader from './BaseTableHeader.vue';
-import BaseTableBody from './BaseTableBody.vue';
-import BaseTableRow from './BaseTableRow.vue';
-import BaseTableCell from './BaseTableCell.vue';
-import { RouteLocationRaw } from 'vue-router';
-import { customKeyActions } from '@/services/table/customKeyActions';
-
-const checkboxStyle =
-  'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
-
-defineOptions({
-  name: 'BaseDataTableTemplate',
-  inheritAttrs: false,
-});
-
-provide('table', getCurrentInstance());
-
-const props = defineProps({
-  /** Table data */
-  data: {
-    type: Array as PropType<Row[]>,
-    default: () => [],
-  },
-  /** Loading state */
-  loading: {
-    default: false,
-    type: Boolean,
-  },
-  visibleColumns: {
-    default: undefined,
-    type: Array as PropType<string[]>,
-  },
-  columnOrder: {
-    default: undefined,
-    type: Array as PropType<string[]>,
-  },
-  /** Allow row details  */
-  detailed: {
-    default: false,
-    type: Boolean,
-  },
-  /** Rows can be checked (multiple) */
-  checkable: {
-    default: false,
-    type: Boolean,
-  },
-  /** Custom method to verify if a row is checkable, works when is checkable */
-  isRowCheckable: {
-    type: Function,
-    default: () => true,
-  },
-  /** Set which rows are checked, use v-model:checkedRows to make it two-way binding */
-  checkedRows: {
-    default: () => [],
-    type: Array as PropType<Row[]>,
-  },
-  /** Sets the default sort column field */
-  sortField: {
-    type: String,
-    default: '',
-  },
-  /**
-   * Sets the default sort column direction
-   * @values asc, desc
-   */
-  sortDirection: {
-    type: String,
-    default: 'asc',
-  },
-  /** Controls the visibility of the trigger that toggles the detailed rows. */
-  hasDetailedVisible: {
-    type: Function,
-    default: () => true,
-  },
-  /* Max height (in px) */
-  maxHeight: {
-    default: undefined,
-    type: Number,
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: 'md',
-  },
-  rowTo: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => RouteLocationRaw) | undefined>,
-  },
-  rowHref: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
-  },
-  onRowClick: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>,
-  },
-  rowKey: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => string | number) | undefined>,
-  },
-  rowSelected: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => boolean) | undefined>,
-  },
-  virtualScrolling: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits([
-  'check',
-  'check-all',
-  'update:checkedRows',
-  'details-open',
-  'details-close',
-  'update:openedDetailed',
-  'sort',
-  'cell-click',
-  'row-click',
-]);
-
-const visibleDetailRows = ref<string[]>([]);
-// eslint-disable-next-line vue/no-setup-props-destructure
-const newCheckedRows = ref<Row[]>([...props.checkedRows]);
-const lastCheckedRowIndex = ref<number | null>(null);
-const currentSortColumn = ref<BaseTableColumnData | null>(null);
-const isAsc = ref(true);
-const defaultSlots = ref<BaseTableColumnData[]>([]);
-
-const slot = ref<HTMLElement | null>(null);
-
-const newColumns = computed(() => {
-  const cols = defaultSlots.value;
-
-  if (props.columnOrder && props.columnOrder.length) {
-
-    const colOrder = props.columnOrder;
-
-    return cols
-      .sort((a, b) => {
-
-        // Always put actions column at the end
-
-        if (a.newKey === customKeyActions) {
-          return 1;
-        }
-
-        if (b.newKey === customKeyActions) {
-          return -1;
-        }
-
-        // If not found, put it at the end
-
-        const existsA = colOrder.includes(a.newKey);
-        const existsB = colOrder.includes(b.newKey);
-
-        if (!existsA && !existsB) {
-          return 0;
-        }
-
-        if (!existsA) {
-          return 1;
-        }
-
-        if (!existsB) {
-          return -1;
-        }
-
-        // Sort based on the order
-
-        return colOrder.indexOf(a.newKey) - colOrder.indexOf(b.newKey);
-      });
-  }
-
-  return cols;
-});
-
-
-const visibleColumnsInternal = computed(() => {
-
-  if (!newColumns.value) {
-    return [];
-  }
-
-  return newColumns.value
-    .filter((column: BaseTableColumnData) => {
-      if (column.toggle === false) {
-        return true;
-      }
-
-      if (!isArray(props.visibleColumns)) {
-        return true;
-      }
-
-      if (props.visibleColumns.includes(column.newKey)) {
-        return true;
-      }
-
-      return false;
-    });
-});
-
-/**
- * Return total column count based if it's checkable or expanded
- */
-const columnCount = computed(() => {
-  let count = visibleColumnsInternal.value.length;
-  count += props.checkable ? 1 : 0;
-  count += props.detailed ? 1 : 0;
-
-  return count;
-});
-
-/**
- * Return if detailed row tabled
- * will be with chevron column & icon or not
- */
-const showDetailRowIcon = computed(() => {
-  return props.detailed;
-});
-
-/**
- * When checkedRows prop change, update internal value without
- * mutating original data.
- */
-watch(
-  () => props.checkedRows,
-  (rows) => {
-    newCheckedRows.value = [...rows];
-  },
-  { deep: true }
-);
-
-watch(
-  () => props.sortField,
-  () => {
-    updateSortState();
-  }
-);
-
-watch(
-  () => props.sortDirection,
-  () => {
-    updateSortState();
-  }
-);
-
-onMounted(() => {
-  nextTick(() => {
-    updateSortState();
-  });
-});
-
-/**
- * Sort the column.
- * Toggle current direction on column if it's sortable
- * and not just updating the prop.
- */
-function sort(column: BaseTableColumnData, updatingData = false, event = null) {
-  if (!column || !column.sortable) {
-    return;
-  }
-
-  if (!updatingData) {
-    isAsc.value =
-      column === currentSortColumn.value
-        ? !isAsc.value
-        : props.sortDirection.toLowerCase() !== 'desc';
-  }
-
-  /**
-   * @property {string} field column field
-   * @property {boolean} direction 'asc' or 'desc'
-   * @property {Event} event native event
-   */
-  emit('sort', column.field, isAsc.value ? 'asc' : 'desc', event);
-
-  currentSortColumn.value = column;
-}
-
-/**
- * Check if the row is checked (is added to the array).
- */
-function isRowChecked(row: Row): boolean {
-  const found = newCheckedRows.value.find((r) => {
-    const key1 = getRowKey(r);
-    const key2 = getRowKey(row);
-    return key1 == key2
-  });
-
-  return found !== undefined;
-}
-
-/**
- * Check if all rows in the page are checkable.
- */
-const isAllUncheckable = computed(() => {
-  const validData = props.data.filter((row) => props.isRowCheckable(row));
-  return validData.length === 0;
-});
-
-/**
- * Check if all rows in the page are checked.
- */
-const isAllChecked = computed(() => {
-  const validData = props.data.filter((row) => {
-    return props.isRowCheckable(row);
-  });
-
-  if (validData.length === 0) {
-    return false;
-  }
-
-  const missingChecked = validData.some((currentRow) => {
-    return !isRowChecked(currentRow);
-  });
-
-  return !missingChecked;
-});
-
-function getCheckedRowIndex(row: Row) {
-  const foundIndex = newCheckedRows.value.findIndex((r) => {
-    const key1 = getRowKey(r);
-    const key2 = getRowKey(row);
-    return key1 == key2
-  });
-
-  return foundIndex;
-}
-
-/**
- * Remove a checked row from the array.
- */
-function removeCheckedRow(row: Row) {
-  const index = getCheckedRowIndex(row);
-  if (index >= 0) {
-    newCheckedRows.value.splice(index, 1);
-  }
-}
-
-/**
- * Header checkbox click listener.
- * Add or remove all rows in current page.
- */
-function checkAll() {
-  if (isAllChecked.value) {
-    newCheckedRows.value = [];
-  } else {
-    props.data.forEach((currentRow) => {
-      if (props.isRowCheckable(currentRow) && !isRowChecked(currentRow)) {
-        newCheckedRows.value.push(currentRow);
-      }
-    });
-  }
-
-  sendCheckUpdate();
-}
-
-/**
- * Remove all rows in current page.
- */
-function uncheckAll() {
-  newCheckedRows.value = [];
-
-  sendCheckUpdate();
-}
-
-function sendCheckUpdate() {
-  emit('check', newCheckedRows.value);
-  emit('check-all', newCheckedRows.value);
-  emit('update:checkedRows', newCheckedRows.value);
-}
-
-/**
- * Row checkbox click listener.
- */
-function checkRow(row: Row, index: number, event: MouseEvent) {
-  if (!props.isRowCheckable(row)) {
-    return;
-  }
-
-  const lastIndex = lastCheckedRowIndex.value;
-  lastCheckedRowIndex.value = index;
-
-  if (event.shiftKey && lastIndex !== null && index !== lastIndex) {
-    shiftCheckRow(row, index, lastIndex);
-  } else if (!isRowChecked(row)) {
-    newCheckedRows.value.push(row);
-  } else {
-    removeCheckedRow(row);
-  }
-
-  emit('check', newCheckedRows.value, row);
-
-  // Emit checked rows to update user variable
-  emit('update:checkedRows', newCheckedRows.value);
-}
-
-/**
- * Check row when shift is pressed.
- */
-function shiftCheckRow(row: Row, index: number, lastCheckedRowIndex: number) {
-  // Get the subset of the list between the two indices
-  const subset = props.data.slice(
-    Math.min(index, lastCheckedRowIndex),
-    Math.max(index, lastCheckedRowIndex) + 1
-  );
-
-  // Determine the operation based on the state of the clicked checkbox
-  const shouldCheck = !isRowChecked(row);
-
-  subset.forEach((item) => {
-    removeCheckedRow(item);
-    if (shouldCheck && props.isRowCheckable(item)) {
-      newCheckedRows.value.push(item);
-    }
-  });
-}
-
-/**
- * Toggle to show/hide details slot
- */
-function toggleDetails(row: Row) {
-  const found = isVisibleDetailRow(row);
-
-  if (found) {
-    closeDetailRow(row);
-    emit('details-close', row);
-  } else {
-    openDetailRow(row);
-    emit('details-open', row);
-  }
-
-  // Syncs the detailed rows with the parent component
-  emit('update:openedDetailed', visibleDetailRows.value);
-}
-
-function openDetailRow(row: Row) {
-  const key = getRowKey(row);
-  visibleDetailRows.value.push(key);
-}
-
-function closeDetailRow(row: Row) {
-  const key = getRowKey(row);
-  const i = visibleDetailRows.value.indexOf(key);
-  if (i >= 0) {
-    visibleDetailRows.value.splice(i, 1);
-  }
-}
-
-function isVisibleDetailRow(row: Row) {
-  const key = getRowKey(row);
-  return visibleDetailRows.value.indexOf(key) >= 0;
-}
-
-function isActiveDetailRow(row: Row) {
-  return props.detailed && isVisibleDetailRow(row);
-}
-
-/**
- * Update sort state
- */
-function updateSortState() {
-  const sortField = props.sortField;
-
-  const sortDirection = props.sortDirection;
-
-  const sortColumn = newColumns.value.filter(
-    (column) => column.field === sortField
-  )[0];
-
-  // Set sort state
-
-  if (sortColumn) {
-    currentSortColumn.value = sortColumn;
-    isAsc.value = sortDirection.toLowerCase() !== 'desc';
-  } else {
-    currentSortColumn.value = null;
-    return;
-  }
-}
-
-/*
-|--------------------------------------------------------------------------
-| BaseTableColumns functions
-|--------------------------------------------------------------------------
-*/
-
-function addColumn(column: BaseTableColumnData) {
-  defaultSlots.value.push(column);
-
-  const slotHTMLElement = slot.value as HTMLElement;
-
-  if (slotHTMLElement && slotHTMLElement.children) {
-    nextTick(() => {
-      const ids = defaultSlots.value
-        .map((it) => `[data-id="${it.newKey}"]`)
-        .join(',');
-
-      const sortedIds = Array.from(slotHTMLElement.querySelectorAll(ids)).map(
-        (el: Element) => el.getAttribute('data-id')
-      );
-
-      defaultSlots.value = defaultSlots.value.sort((a, b) => {
-        return (
-          sortedIds.indexOf(`${a.newKey}`) - sortedIds.indexOf(`${b.newKey}`)
-        );
-      });
-    });
-  }
-}
-
-function removeColumn(column: BaseTableColumnData) {
-  defaultSlots.value = defaultSlots.value.filter(
-    (d) => d.newKey !== column.newKey
-  );
-}
-
-function rowBindings(row: CollectionItem, index: number) {
-  return {
-    onClick: props.onRowClick ? (event: MouseEvent) => props.onRowClick && props.onRowClick(row, index, event) : undefined,
-  }
-}
-
-function onCellClick(row: CollectionItem, index: number, column: BaseTableColumnData, columnIndex: number) {
-  if (!column.onClick) {
-    return undefined;
-  }
-
-  return (event: MouseEvent) => {
-    if (!column.onClick) {
-      return;
-    }
-
-    column.onClick(row, index, column, columnIndex, event);
-  };
-}
-
-let warningNoRowKeyFoundShown = false;
-
-function getRowKey(row: Row): string {
-
-  if (props.rowKey) {
-    return props.rowKey(row) + '';
-  }
-
-  if (row.id) {
-    return row.id;
-  }
-
-  if (row.key) {
-    return row.key;
-  }
-
-  if (row.uuid) {
-    return row.uuid;
-  }
-
-  if (!warningNoRowKeyFoundShown) {
-    console.warn('%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) or use the row-key props to specify a unique key.', 'font-weight: bold', 'font-weight: normal');
-    warningNoRowKeyFoundShown = true;
-  }
-
-  // if no key is found, hash a simplified version of the row object
-  // We use a simplified version to avoid hashing functions, objects, etc. for performance reasons
-
-  const simpleRow = {} as Record<string, string | number | boolean>;
-
-  for (const key in row) {
-    const value = row[key];
-    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-      simpleRow[key] = value;
-    }
-  }
-
-  return objectHash(simpleRow);
-}
-
-provide('addColumn', addColumn);
-provide('removeColumn', removeColumn);
-
-const baseTableRef = ref<InstanceType<typeof BaseTable> | null>(null);
-
-
-/*
-|--------------------------------------------------------------------------
-| Checks
-|--------------------------------------------------------------------------
-*/
-
-watch(
-  () => newColumns.value.map((item) => item.newKey),
-  (keys: string[]) => {
-
-    // check duplicates
-
-    const duplicates = keys.reduce((acc, key, index) => {
-      if (keys.indexOf(key) !== index && !acc.includes(key)) {
-        acc.push(key);
-      }
-
-      return acc;
-    }, [] as string[]);
-
-    if (duplicates.length) {
-      throw new Error(`Duplicate BaseTableColumn keys found: ${duplicates.join(', ')}`);
-    }
-  }
-)
-
-/*
-|--------------------------------------------------------------------------
-| Expose
-|--------------------------------------------------------------------------
-*/
-
-defineExpose({
-  newColumns,
-  uncheckAll,
-  scrollTop: () => {
-    baseTableRef.value?.scrollTop();
-  },
-});
-</script>
+<template>
+  <div
+    class="relative w-full overflow-hidden"
+    :style="{
+      minHeight: maxHeight ? maxHeight + 'px' : '200px',
+    }"
+  >
+    <div
+      ref="slot"
+      style="display: none"
+    >
+      <slot />
+    </div>
+
+    <BaseTable
+      ref="baseTableRef"
+      class="min-w-full"
+      :size="size"
+      :fixed-header="(maxHeight && maxHeight > 0) == true"
+      :fixed-column="true"
+      :max-height="maxHeight"
+      :loading="loading"
+      :virtual-scrolling="virtualScrolling"
+    >
+      <BaseTableHead v-if="newColumns.length">
+        <BaseTableRow>
+          <BaseTableHeader
+            v-for="(column, index) in visibleColumnsInternal"
+            :key="column.newKey + ':' + index + 'header'"
+            :style="column.style"
+            :tooltip="column.tooltip"
+            class="bg-slate-50"
+          >
+            <div class="flex gap-4">
+              <template v-if="index == 0">
+                <div
+                  v-if="showDetailRowIcon"
+                  class="flex h-5 w-5 shrink-0 grow-0"
+                />
+
+                <div
+                  v-if="checkable"
+                  class="flex items-center cursor-pointer"
+                  @click="checkAll"
+                >
+                  <input
+                    type="checkbox"
+                    autocomplete="off"
+                    :checked="isAllChecked"
+                    :disabled="isAllUncheckable"
+                    :class="checkboxStyle"
+                  >
+                </div>
+              </template>
+
+              <button
+                type="button"
+                class="flex gap-2 w-full items-start bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
+                :class="[
+                  column.sortable ? 'cursor-pointer' : '',
+                  column.align == 'right' ? 'justify-start flex-row-reverse text-right' : ''
+                ]"
+                @click="sort(column, undefined, $event as any)"
+              >
+                <div
+                  class="whitespace-nowrap text-slate-600"
+                  :class="{
+                    'text-[12px]': size == 'sm',
+                    'text-xs': size == 'md',
+                  }"
+                  v-html="column.label"
+                />
+                <!-- h-4 is used to make sure the tooltip icon is always smaller than label and avoid alignment issues when icon is not present -->
+                <div
+                  v-if="column.sortable"
+                  class="h-4 relative top-0.5"
+                  :class="[
+                    currentSortColumn === column
+                      ? ''
+                      : 'opacity-0 duration-200 group-hover:opacity-100',
+                  ]"
+                >
+                  <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 11 11"
+                    fill="none"
+                    class="block"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      :opacity="!isAsc ? '0.5' : '1'"
+                      d="M4.88471 0.366233C5.00079 0.250125 5.1386 0.158021 5.29028 0.0951819C5.44196 0.0323429 5.60453 0 5.76871 0C5.93289 0 6.09546 0.0323429 6.24714 0.0951819C6.39882 0.158021 6.53663 0.250125 6.65271 0.366233L9.29871 3.01323C9.43119 3.15541 9.50331 3.34345 9.49988 3.53776C9.49646 3.73206 9.41774 3.91744 9.28033 4.05485C9.14292 4.19227 8.95753 4.27098 8.76323 4.27441C8.56893 4.27784 8.38088 4.20571 8.23871 4.07323L5.76871 1.60323L3.29871 4.07323C3.23005 4.14692 3.14725 4.20602 3.05525 4.24701C2.96325 4.28801 2.86393 4.31005 2.76323 4.31182C2.66253 4.3136 2.5625 4.29508 2.46911 4.25736C2.37572 4.21963 2.29089 4.16349 2.21967 4.09227C2.14845 4.02105 2.09231 3.93622 2.05459 3.84283C2.01686 3.74944 1.99834 3.64941 2.00012 3.54871C2.00189 3.44801 2.02394 3.34869 2.06493 3.25669C2.10592 3.1647 2.16502 3.08189 2.23871 3.01323L4.88471 0.366233Z"
+                      fill="black"
+                    ></path>
+                    <path
+                      :opacity="isAsc ? '0.5' : '1'"
+
+                      d="M4.84729 10.6083C4.96337 10.7244 5.10118 10.8165 5.25286 10.8793C5.40454 10.9422 5.56711 10.9745 5.73129 10.9745C5.89547 10.9745 6.05804 10.9422 6.20972 10.8793C6.3614 10.8165 6.49921 10.7244 6.61529 10.6083L9.26129 7.96129C9.39377 7.81912 9.4659 7.63107 9.46247 7.43677C9.45904 7.24247 9.38033 7.05708 9.24291 6.91967C9.1055 6.78226 8.92011 6.70354 8.72581 6.70012C8.53151 6.69669 8.34347 6.76881 8.20129 6.90129L5.73129 9.37129L3.26129 6.90129C3.11912 6.76881 2.93107 6.69669 2.73677 6.70012C2.54247 6.70354 2.35708 6.78226 2.21967 6.91967C2.08226 7.05708 2.00355 7.24247 2.00012 7.43677C1.99669 7.63107 2.06881 7.81912 2.20129 7.96129L4.84729 10.6083Z"
+                      fill="black"
+                    ></path>
+                  </svg>
+                </div>
+              </button>
+            </div>  
+          </BaseTableHeader>
+        </BaseTableRow>
+      </BaseTableHead>
+
+      <BaseTableBody
+        class="bg-white"
+      >
+        <template
+          v-for="(row, index) in data"
+          :key="getRowKey(row)"
+        >
+          <BaseTableRow
+            :to="rowTo ? rowTo(row) : undefined"
+            :selected="rowSelected ? rowSelected(row) : false"
+            v-bind="rowBindings(row, index)"
+          >
+            <BaseTableCell
+              v-for="(column, columnIndex) in visibleColumnsInternal"
+              :key="column.newKey + index + ':' + columnIndex"
+              :class="[column.class, column.numeric ? 'tabular-nums' : '']"
+              :align="column.align"
+              :style="column.style"
+              :to="column.to ? column.to(row) : undefined"
+              :href="column.href ? column.href(row) : undefined"
+              :target="column.target"
+              :ignore-row-interactions="column.ignoreRowInteractions"
+              :on-click="onCellClick(row, index, column, columnIndex)"
+            >
+              <div :class="[columnIndex == 0 ? 'flex items-center gap-4' : '']">
+                <template v-if="columnIndex == 0">
+                  <button
+                    v-if="showDetailRowIcon"
+                    type="button"
+                    class="relative z-[1] || flex h-5 w-5 shrink-0 grow-0 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 hover:text-slate-600 hover:shadow-md"
+                    @click.stop="toggleDetails(row)"
+                  >
+                    <BaseIcon
+                      v-if="hasDetailedVisible(row)"
+                      icon="mdi:chevron-down"
+                      class="h-5 w-5 duration-300"
+                      :class="{
+                        'rotate-180': isVisibleDetailRow(row)
+                      }"
+                    />
+                  </button>
+
+                  <div
+                    v-if="checkable"
+                    class="relative z-[1] || flex items-center group cursor-pointer bg-white"
+                    @click.stop="checkRow(row, index, $event as MouseEvent)"
+                  >
+                    <input
+                      type="checkbox"
+                      autocomplete="off"
+                      :disabled="!isRowCheckable(row)"
+                      :checked="isRowChecked(row)"
+                      :class="checkboxStyle"
+                    >
+                  </div>
+                </template>
+
+                <SlotComponent
+                  :component="column"
+                  scoped
+                  name="default"
+                  tag="div"
+                  class="text-sm grow"
+                  :data-label="column.label"
+                  :props="{ row, column, index, columnIndex, toggleDetails }"
+                />
+              </div>
+            </BaseTableCell>
+          </BaseTableRow>
+
+          <BaseTableRow
+            v-if="isActiveDetailRow(row)"
+            :key="getRowKey(row) + 'detail'"
+          >
+            <BaseTableCell
+              :colspan="columnCount"
+            >
+              <slot
+                name="detail"
+                :row="row"
+                :index="index"
+              />
+            </BaseTableCell>
+          </BaseTableRow>
+        </template>
+
+        <BaseTableRow v-if="data.length == 0">
+          <BaseTableCell :colspan="columnCount">
+            <slot name="empty" />
+          </BaseTableCell>
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref } from 'vue';
+import { BaseTableColumnData, CollectionItem, Row } from '@/types';
+import SlotComponent from './SlotComponent';
+import { isArray } from 'lodash';
+import { Size } from '@/utils/sizes';
+import objectHash from 'object-hash';
+import BaseTable from './BaseTable.vue';
+import BaseTableHead from './BaseTableHead.vue';
+import BaseTableHeader from './BaseTableHeader.vue';
+import BaseTableBody from './BaseTableBody.vue';
+import BaseTableRow from './BaseTableRow.vue';
+import BaseTableCell from './BaseTableCell.vue';
+import { RouteLocationRaw } from 'vue-router';
+import { customKeyActions } from '@/services/table/customKeyActions';
+
+const checkboxStyle =
+  'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
+
+defineOptions({
+  name: 'BaseDataTableTemplate',
+  inheritAttrs: false,
+});
+
+provide('table', getCurrentInstance());
+
+const props = defineProps({
+  /** Table data */
+  data: {
+    type: Array as PropType<Row[]>,
+    default: () => [],
+  },
+  /** Loading state */
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+  visibleColumns: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
+  columnOrder: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
+  /** Allow row details  */
+  detailed: {
+    default: false,
+    type: Boolean,
+  },
+  /** Rows can be checked (multiple) */
+  checkable: {
+    default: false,
+    type: Boolean,
+  },
+  /** Custom method to verify if a row is checkable, works when is checkable */
+  isRowCheckable: {
+    type: Function,
+    default: () => true,
+  },
+  /** Set which rows are checked, use v-model:checkedRows to make it two-way binding */
+  checkedRows: {
+    default: () => [],
+    type: Array as PropType<Row[]>,
+  },
+  /** Sets the default sort column field */
+  sortField: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Sets the default sort column direction
+   * @values asc, desc
+   */
+  sortDirection: {
+    type: String,
+    default: 'asc',
+  },
+  /** Controls the visibility of the trigger that toggles the detailed rows. */
+  hasDetailedVisible: {
+    type: Function,
+    default: () => true,
+  },
+  /* Max height (in px) */
+  maxHeight: {
+    default: undefined,
+    type: Number,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+  },
+  rowTo: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => RouteLocationRaw) | undefined>,
+  },
+  rowHref: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
+  },
+  onRowClick: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>,
+  },
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string | number) | undefined>,
+  },
+  rowSelected: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => boolean) | undefined>,
+  },
+  virtualScrolling: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits([
+  'check',
+  'check-all',
+  'update:checkedRows',
+  'details-open',
+  'details-close',
+  'update:openedDetailed',
+  'sort',
+  'cell-click',
+  'row-click',
+]);
+
+const visibleDetailRows = ref<string[]>([]);
+// eslint-disable-next-line vue/no-setup-props-destructure
+const newCheckedRows = ref<Row[]>([...props.checkedRows]);
+const lastCheckedRowIndex = ref<number | null>(null);
+const currentSortColumn = ref<BaseTableColumnData | null>(null);
+const isAsc = ref(true);
+const defaultSlots = ref<BaseTableColumnData[]>([]);
+
+const slot = ref<HTMLElement | null>(null);
+
+const newColumns = computed(() => {
+  const cols = defaultSlots.value;
+
+  if (props.columnOrder && props.columnOrder.length) {
+
+    const colOrder = props.columnOrder;
+
+    return cols
+      .sort((a, b) => {
+
+        // Always put actions column at the end
+
+        if (a.newKey === customKeyActions) {
+          return 1;
+        }
+
+        if (b.newKey === customKeyActions) {
+          return -1;
+        }
+
+        // If not found, put it at the end
+
+        const existsA = colOrder.includes(a.newKey);
+        const existsB = colOrder.includes(b.newKey);
+
+        if (!existsA && !existsB) {
+          return 0;
+        }
+
+        if (!existsA) {
+          return 1;
+        }
+
+        if (!existsB) {
+          return -1;
+        }
+
+        // Sort based on the order
+
+        return colOrder.indexOf(a.newKey) - colOrder.indexOf(b.newKey);
+      });
+  }
+
+  return cols;
+});
+
+
+const visibleColumnsInternal = computed(() => {
+
+  if (!newColumns.value) {
+    return [];
+  }
+
+  return newColumns.value
+    .filter((column: BaseTableColumnData) => {
+      if (column.toggle === false) {
+        return true;
+      }
+
+      if (!isArray(props.visibleColumns)) {
+        return true;
+      }
+
+      if (props.visibleColumns.includes(column.newKey)) {
+        return true;
+      }
+
+      return false;
+    });
+});
+
+/**
+ * Return total column count based if it's checkable or expanded
+ */
+const columnCount = computed(() => {
+  let count = visibleColumnsInternal.value.length;
+  count += props.checkable ? 1 : 0;
+  count += props.detailed ? 1 : 0;
+
+  return count;
+});
+
+/**
+ * Return if detailed row tabled
+ * will be with chevron column & icon or not
+ */
+const showDetailRowIcon = computed(() => {
+  return props.detailed;
+});
+
+/**
+ * When checkedRows prop change, update internal value without
+ * mutating original data.
+ */
+watch(
+  () => props.checkedRows,
+  (rows) => {
+    newCheckedRows.value = [...rows];
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.sortField,
+  () => {
+    updateSortState();
+  }
+);
+
+watch(
+  () => props.sortDirection,
+  () => {
+    updateSortState();
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    updateSortState();
+  });
+});
+
+/**
+ * Sort the column.
+ * Toggle current direction on column if it's sortable
+ * and not just updating the prop.
+ */
+function sort(column: BaseTableColumnData, updatingData = false, event = null) {
+  if (!column || !column.sortable) {
+    return;
+  }
+
+  if (!updatingData) {
+    isAsc.value =
+      column === currentSortColumn.value
+        ? !isAsc.value
+        : props.sortDirection.toLowerCase() !== 'desc';
+  }
+
+  /**
+   * @property {string} field column field
+   * @property {boolean} direction 'asc' or 'desc'
+   * @property {Event} event native event
+   */
+  emit('sort', column.field, isAsc.value ? 'asc' : 'desc', event);
+
+  currentSortColumn.value = column;
+}
+
+/**
+ * Check if the row is checked (is added to the array).
+ */
+function isRowChecked(row: Row): boolean {
+  const found = newCheckedRows.value.find((r) => {
+    const key1 = getRowKey(r);
+    const key2 = getRowKey(row);
+    return key1 == key2
+  });
+
+  return found !== undefined;
+}
+
+/**
+ * Check if all rows in the page are checkable.
+ */
+const isAllUncheckable = computed(() => {
+  const validData = props.data.filter((row) => props.isRowCheckable(row));
+  return validData.length === 0;
+});
+
+/**
+ * Check if all rows in the page are checked.
+ */
+const isAllChecked = computed(() => {
+  const validData = props.data.filter((row) => {
+    return props.isRowCheckable(row);
+  });
+
+  if (validData.length === 0) {
+    return false;
+  }
+
+  const missingChecked = validData.some((currentRow) => {
+    return !isRowChecked(currentRow);
+  });
+
+  return !missingChecked;
+});
+
+function getCheckedRowIndex(row: Row) {
+  const foundIndex = newCheckedRows.value.findIndex((r) => {
+    const key1 = getRowKey(r);
+    const key2 = getRowKey(row);
+    return key1 == key2
+  });
+
+  return foundIndex;
+}
+
+/**
+ * Remove a checked row from the array.
+ */
+function removeCheckedRow(row: Row) {
+  const index = getCheckedRowIndex(row);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
+  }
+}
+
+/**
+ * Header checkbox click listener.
+ * Add or remove all rows in current page.
+ */
+function checkAll() {
+  if (isAllChecked.value) {
+    newCheckedRows.value = [];
+  } else {
+    props.data.forEach((currentRow) => {
+      if (props.isRowCheckable(currentRow) && !isRowChecked(currentRow)) {
+        newCheckedRows.value.push(currentRow);
+      }
+    });
+  }
+
+  sendCheckUpdate();
+}
+
+/**
+ * Remove all rows in current page.
+ */
+function uncheckAll() {
+  newCheckedRows.value = [];
+
+  sendCheckUpdate();
+}
+
+function sendCheckUpdate() {
+  emit('check', newCheckedRows.value);
+  emit('check-all', newCheckedRows.value);
+  emit('update:checkedRows', newCheckedRows.value);
+}
+
+/**
+ * Row checkbox click listener.
+ */
+function checkRow(row: Row, index: number, event: MouseEvent) {
+  if (!props.isRowCheckable(row)) {
+    return;
+  }
+
+  const lastIndex = lastCheckedRowIndex.value;
+  lastCheckedRowIndex.value = index;
+
+  if (event.shiftKey && lastIndex !== null && index !== lastIndex) {
+    shiftCheckRow(row, index, lastIndex);
+  } else if (!isRowChecked(row)) {
+    newCheckedRows.value.push(row);
+  } else {
+    removeCheckedRow(row);
+  }
+
+  emit('check', newCheckedRows.value, row);
+
+  // Emit checked rows to update user variable
+  emit('update:checkedRows', newCheckedRows.value);
+}
+
+/**
+ * Check row when shift is pressed.
+ */
+function shiftCheckRow(row: Row, index: number, lastCheckedRowIndex: number) {
+  // Get the subset of the list between the two indices
+  const subset = props.data.slice(
+    Math.min(index, lastCheckedRowIndex),
+    Math.max(index, lastCheckedRowIndex) + 1
+  );
+
+  // Determine the operation based on the state of the clicked checkbox
+  const shouldCheck = !isRowChecked(row);
+
+  subset.forEach((item) => {
+    removeCheckedRow(item);
+    if (shouldCheck && props.isRowCheckable(item)) {
+      newCheckedRows.value.push(item);
+    }
+  });
+}
+
+/**
+ * Toggle to show/hide details slot
+ */
+function toggleDetails(row: Row) {
+  const found = isVisibleDetailRow(row);
+
+  if (found) {
+    closeDetailRow(row);
+    emit('details-close', row);
+  } else {
+    openDetailRow(row);
+    emit('details-open', row);
+  }
+
+  // Syncs the detailed rows with the parent component
+  emit('update:openedDetailed', visibleDetailRows.value);
+}
+
+function openDetailRow(row: Row) {
+  const key = getRowKey(row);
+  visibleDetailRows.value.push(key);
+}
+
+function closeDetailRow(row: Row) {
+  const key = getRowKey(row);
+  const i = visibleDetailRows.value.indexOf(key);
+  if (i >= 0) {
+    visibleDetailRows.value.splice(i, 1);
+  }
+}
+
+function isVisibleDetailRow(row: Row) {
+  const key = getRowKey(row);
+  return visibleDetailRows.value.indexOf(key) >= 0;
+}
+
+function isActiveDetailRow(row: Row) {
+  return props.detailed && isVisibleDetailRow(row);
+}
+
+/**
+ * Update sort state
+ */
+function updateSortState() {
+  const sortField = props.sortField;
+
+  const sortDirection = props.sortDirection;
+
+  const sortColumn = newColumns.value.filter(
+    (column) => column.field === sortField
+  )[0];
+
+  // Set sort state
+
+  if (sortColumn) {
+    currentSortColumn.value = sortColumn;
+    isAsc.value = sortDirection.toLowerCase() !== 'desc';
+  } else {
+    currentSortColumn.value = null;
+    return;
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| BaseTableColumns functions
+|--------------------------------------------------------------------------
+*/
+
+function addColumn(column: BaseTableColumnData) {
+  defaultSlots.value.push(column);
+
+  const slotHTMLElement = slot.value as HTMLElement;
+
+  if (slotHTMLElement && slotHTMLElement.children) {
+    nextTick(() => {
+      const ids = defaultSlots.value
+        .map((it) => `[data-id="${it.newKey}"]`)
+        .join(',');
+
+      const sortedIds = Array.from(slotHTMLElement.querySelectorAll(ids)).map(
+        (el: Element) => el.getAttribute('data-id')
+      );
+
+      defaultSlots.value = defaultSlots.value.sort((a, b) => {
+        return (
+          sortedIds.indexOf(`${a.newKey}`) - sortedIds.indexOf(`${b.newKey}`)
+        );
+      });
+    });
+  }
+}
+
+function removeColumn(column: BaseTableColumnData) {
+  defaultSlots.value = defaultSlots.value.filter(
+    (d) => d.newKey !== column.newKey
+  );
+}
+
+function rowBindings(row: CollectionItem, index: number) {
+  return {
+    onClick: props.onRowClick ? (event: MouseEvent) => props.onRowClick && props.onRowClick(row, index, event) : undefined,
+  }
+}
+
+function onCellClick(row: CollectionItem, index: number, column: BaseTableColumnData, columnIndex: number) {
+  if (!column.onClick) {
+    return undefined;
+  }
+
+  return (event: MouseEvent) => {
+    if (!column.onClick) {
+      return;
+    }
+
+    column.onClick(row, index, column, columnIndex, event);
+  };
+}
+
+let warningNoRowKeyFoundShown = false;
+
+function getRowKey(row: Row): string {
+
+  if (props.rowKey) {
+    return props.rowKey(row) + '';
+  }
+
+  if (row.id) {
+    return row.id;
+  }
+
+  if (row.key) {
+    return row.key;
+  }
+
+  if (row.uuid) {
+    return row.uuid;
+  }
+
+  if (!warningNoRowKeyFoundShown) {
+    console.warn('%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) or use the row-key props to specify a unique key.', 'font-weight: bold', 'font-weight: normal');
+    warningNoRowKeyFoundShown = true;
+  }
+
+  // if no key is found, hash a simplified version of the row object
+  // We use a simplified version to avoid hashing functions, objects, etc. for performance reasons
+
+  const simpleRow = {} as Record<string, string | number | boolean>;
+
+  for (const key in row) {
+    const value = row[key];
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      simpleRow[key] = value;
+    }
+  }
+
+  return objectHash(simpleRow);
+}
+
+provide('addColumn', addColumn);
+provide('removeColumn', removeColumn);
+
+const baseTableRef = ref<InstanceType<typeof BaseTable> | null>(null);
+
+
+/*
+|--------------------------------------------------------------------------
+| Checks
+|--------------------------------------------------------------------------
+*/
+
+watch(
+  () => newColumns.value.map((item) => item.newKey),
+  (keys: string[]) => {
+
+    // check duplicates
+
+    const duplicates = keys.reduce((acc, key, index) => {
+      if (keys.indexOf(key) !== index && !acc.includes(key)) {
+        acc.push(key);
+      }
+
+      return acc;
+    }, [] as string[]);
+
+    if (duplicates.length) {
+      throw new Error(`Duplicate BaseTableColumn keys found: ${duplicates.join(', ')}`);
+    }
+  }
+)
+
+/*
+|--------------------------------------------------------------------------
+| Expose
+|--------------------------------------------------------------------------
+*/
+
+defineExpose({
+  newColumns,
+  uncheckAll,
+  scrollTop: () => {
+    baseTableRef.value?.scrollTop();
+  },
+});
+</script>