sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseDataTable.vue

@@ -1,779 +1,779 @@
-<template>
-  <BaseDataIterator
-    ref="dataIterator"
-    :url="url"
-    :url-query="urlQuery"
-    :default-query="defaultQuery"
-    :searchable="searchable"
-    :actions="actions"
-    :history-mode="historyMode"
-    :layout="layout"
-    :size="size"
-    :sections="sectionsInternal"
-    :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
-    @fetch="onFetch"
-    @will-scroll-top="onWillScrollTop"
-  >
-    <template
-      #default="{
-        items,
-        loading,
-        sortField,
-        sortDirection,
-        onSortChange,
-        error,
-        firstLoad,
-      }"
-    >
-      <BaseCard
-        clipped
-        class="w-full overflow-hidden"
-      >
-        <div v-if="newCheckedRows.length">
-          <div
-            class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
-          >
-            <div>
-              <span class="mr-3 text-slate-500">{{
-                t('sui.x_rows_selected', {
-                  count: newCheckedRows.length,
-                })
-              }}.</span>
-              <button
-                type="button"
-                class="mr-3 inline text-slate-800 underline underline-offset-1 decoration-slate-400 decoration-2 decoration-dashed"
-                @click="uncheckAll()"
-              >
-                {{ t('sui.deselect_all') }}
-              </button>
-            </div>
-            <BaseMenu
-              v-if="checkableActions?.length"
-              tw-menu="w-52"
-              :items="checkableActions"
-            >
-              <template #button="{ open }">
-                <div
-                  class="flex h-10 px-4 items-center justify-center btn pl-3"
-                  :class="[
-                    open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
-                  ]"
-                >
-                  <BaseIcon
-                    icon="heroicons-solid:dots-vertical"
-                    class="mr-2"
-                  />
-
-                  <span class="font-semibold">
-                    {{ t('sui.bulk_actions') }}
-                  </span>
-                </div>
-              </template>
-            </BaseMenu>
-          </div>
-        </div>
-
-        <BaseTable
-          ref="table"
-          :checked-rows="newCheckedRows"
-          :data="items"
-          :loading="loading"
-          :detailed="detailed"
-          :has-detailed-visible="hasDetailedVisible"
-          :checkable="checkable"
-          :is-row-checkable="isRowCheckable"
-          checkbox-position="left"
-          :sort-field="sortField"
-          :sort-direction="sortDirection"
-          :max-height="maxHeight"
-          :visible-columns="visibleColumns"
-          :size="size"
-          @update:checked-rows="onCheckedRowsUpdate"
-          @sort="onSortChange"
-          @cell-click="onCellClick"
-        >
-          <template #default>
-            <slot />
-
-            <BaseTableColumn
-              v-slot="{ row }"
-              :visible="rowActionsInternal.length"
-              :toggle="false"
-              :clickable="false"
-              custom-key="actions"
-              class="overflow-hidden"
-            >
-              <div class="flex justify-end gap-1 pr-2 text-right">
-                <div class="btn-group">
-                  <template
-                    v-for="rowAction in visibleRowActions"
-                    :key="rowAction.icon"
-                  >
-                    <BaseDataTableRowAction
-                      :row="row"
-                      :row-action="rowAction"
-                      :size="size"
-                    />
-                  </template>
-                  <BaseMenu
-                    v-if="showRowActionMenu"
-                    :items="rowActionMenuItems(row)"
-                    :size="size == 'sm' ? 'xs' : 'sm'"
-                    :tw-button="[
-                      'btn flex p-0 items-center justify-center',
-                      {
-                        'py-1.5 px-2': size == 'sm',
-                        'p-2': size == 'md'
-                      }
-                    ]"
-                  >
-                    <template #button>
-                      <BaseIcon
-                        icon="heroicons-solid:dots-vertical"
-                        :class="{
-                          'h-3 w-3': size == 'sm'
-                        }"
-                      />
-                    </template>
-                  </BaseMenu>
-                </div>
-              </div>
-            </BaseTableColumn>
-          </template>
-
-          <template #detail="propsDetail">
-            <slot
-              name="detail"
-              v-bind="propsDetail"
-            />
-          </template>
-
-          <template #checkedHeader="propsCheckHeader">
-            <slot
-              name="checkedHeader"
-              v-bind="propsCheckHeader"
-            />
-          </template>
-
-          <template #empty>
-            <div
-              v-if="error"
-              class="flex items-center justify-center py-16"
-            >
-              <div class="flex flex-col items-center justify-center">
-                <BaseIcon
-                  icon="heroicons:x-circle"
-                  class="h-10 w-10 text-red-600"
-                />
-                <p class="mt-3 text-center text-sm text-slate-600">
-                  {{ t('sui.whoops') }}
-                </p>
-              </div>
-            </div>
-            <div
-              v-else-if="firstLoad"
-              class="flex items-center justify-center py-16"
-            >
-              <div class="flex flex-col items-center">
-                <BaseEmptyState class="w-32" />
-
-                <p class="mt-3 text-center text-sm text-slate-600">
-                  {{ t('sui.nothing_found') }}
-                </p>
-              </div>
-            </div>
-          </template>
-        </BaseTable>
-      </BaseCard>
-    </template>
-
-    <template
-      v-if="$slots.filters"
-      #filters="{ query, updateQuery, updateQueryValue }"
-    >
-      <slot
-        name="filters"
-        :query="query"
-        :update-query="updateQuery"
-        :update-query-value="updateQueryValue"
-      />
-    </template>
-
-    <template #sidebarTop="sidebarProps">
-      <slot
-        name="sidebarTop"
-        v-bind="sidebarProps"
-      />
-    </template>
-
-    <template #sidebarBottom="sidebarProps">
-      <slot
-        name="sidebarBottom"
-        v-bind="sidebarProps"
-      />
-    </template>
-
-    <template
-      v-if="toggleable"
-      #columns
-    >
-      <BaseDataIteratorSectionColumns
-        v-model:visibleColumns="visibleColumns"
-        :table="table"
-        @update:visible-columns="onUpdateVisibleColumn"
-      />
-    </template>
-
-    <template
-      v-for="section in sections"
-      :key="section.name"
-      #[section.name]
-    >
-      <slot :name="section.name" />
-    </template>
-  </BaseDataIterator>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { t } from '@/i18n';
-import {
-  Collection,
-  CollectionItem,
-  DataIteratorSection,
-  DataTableQuery,
-  MenuItemInterface,
-  PaginatedCollection,
-  ResourceCollection,
-  RowAction,
-} from '@/types';
-import { useDialogsStore } from '@/stores/dialogs';
-import { useNotificationsStore } from '../stores/notifications';
-import BaseDataIterator from './BaseDataIterator.vue';
-import { cloneDeep, isArray } from 'lodash';
-
-import BaseCard from './BaseCard.vue';
-import BaseTable from './BaseTable.vue';
-import BaseTableColumn from './BaseTableColumn.vue';
-import BaseDataIteratorSectionColumns from './BaseDataIteratorSectionColumns.vue';
-import { BaseIcon, config } from '@/index';
-import BaseEmptyState from '../svg/BaseEmptyState.vue';
-import { RouteLocationRaw } from 'vue-router';
-import BaseMenu from './BaseMenu.vue';
-import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
-
-const router = useRouter();
-
-const http = config.http;
-
-const dialogs = useDialogsStore();
-const notifications = useNotificationsStore();
-
-const table = ref<null | InstanceType<typeof BaseTable>>(null);
-
-const props = defineProps({
-  /**
-   * Base URL from which to make requests
-   */
-  url: {
-    required: true,
-    type: String,
-  },
-
-  /**
-   * Query params that always get applied
-   */
-  urlQuery: {
-    default: undefined,
-    type: Object as PropType<Record<string, any>>,
-  },
-
-  /**
-   * Query params that gets applied by default
-   * These may be overwritten by URL params generated by the data-table or filters
-   */
-  defaultQuery: {
-    default: undefined,
-    type: Object as PropType<DataTableQuery>,
-  },
-
-  /**
-   * Show url for router link
-   */
-  showUrl: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => RouteLocationRaw) | undefined
-    >,
-  },
-
-  /**
-   * Show/Hide edit button
-   */
-  editButton: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Edit url for router link
-   */
-  editUrl: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => RouteLocationRaw) | undefined
-    >,
-  },
-
-  /**
-   * Show/Hide delete button
-   */
-  deleteButton: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Delete endpoint to delete an item
-   */
-  deleteUrl: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
-  },
-
-  /**
-   * Show toggle-able details on each row
-   */
-  detailed: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Check is a given row has details
-   */
-  hasDetailedVisible: {
-    default() {
-      return true;
-    },
-    type: Function as PropType<(row: any) => boolean>,
-  },
-
-  /**
-   * Makes row checkable
-   */
-  checkable: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Actions on each row
-   */
-  checkableActions: {
-    default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
-  },
-
-  /**
-   * Checked rows array
-   */
-  checkedRows: {
-    default() {
-      return [];
-    },
-    type: Array as PropType<Record<string, any>[]>,
-  },
-
-  /**
-   * Check is a given row is checkable
-   */
-  isRowCheckable: {
-    default() {
-      return () => true;
-    },
-    type: Function,
-  },
-
-  /**
-   * Adds a search bar
-   */
-  searchable: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Shows the column toggle utility
-   */
-  toggleable: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Actions
-   */
-  actions: {
-    default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
-  },
-
-  /**
-   * Save data table state in URL
-   */
-  historyMode: {
-    default: false,
-    type: Boolean,
-  },
-
-  /*
-   * Max height (in px)
-   */
-  maxHeight: {
-    default: undefined,
-    type: Number,
-  },
-
-  /**
-   * Layout type
-   * 
-   * default: Layout with a sidebar
-   * compact: Layout without a sidebar, this is the default layout for mobile, even if you don't specify it
-   */
-  layout: {
-    default: 'default',
-    type: String as PropType<'default' | 'compact'>,
-  },
-
-  /**
-   * Overall size and spacing of the component
-   */
-  size: {
-    default: 'md',
-    type: String as PropType<'sm' | 'md'>,
-  },
-
-  sections: {
-    default: undefined,
-    type: Array as PropType<DataIteratorSection[]>,
-  },
-
-  rowActions: {
-    default: undefined,
-    type: Array as PropType<RowAction[]>,
-  },
-
-  numberOfVisibleRowActions: {
-    default: 2,
-    type: Number,
-  },
-
-  /**
-   * Scroll to top when fetching new data
-   */
-  scrollTopOnFetch: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits([
-  'cell-click',
-  'delete',
-  'update:checked-rows',
-  'fetch',
-]);
-
-const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
-
-/*
-|--------------------------------------------------------------------------
-| Handlers
-|--------------------------------------------------------------------------
-*/
-
-function onCellClick(payload: CollectionItem) {
-  if (props.showUrl) {
-    router.push(props.showUrl(payload));
-  }
-  emit('cell-click', payload);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Gate helpers
-|--------------------------------------------------------------------------
-*/
-
-const gate = (row: CollectionItem, action: string): boolean => {
-  if (row.can && Object.prototype.hasOwnProperty.call(row.can, action)) {
-    return row.can[action];
-  }
-  return true;
-};
-
-const canUpdate = (row: CollectionItem): boolean => {
-  return gate(row, 'update');
-};
-
-const canDelete = (row: CollectionItem): boolean => {
-  return gate(row, 'delete');
-};
-
-function onDeleteClick(row: CollectionItem) {
-  dialogs.push({
-    title: t('sui.delete_record') + '?',
-    message: t('sui.delete_record_description'),
-    color: 'danger',
-    closeOnOutsideClick: true,
-    confirmText: t('sui.yes_delete'),
-    onConfirm: () => onDelete(row),
-  });
-}
-
-const onDelete = (row: CollectionItem) => {
-  if (!props.deleteUrl) {
-    return;
-  }
-
-  http
-    .delete(props.deleteUrl(row))
-    .then((response) => {
-      if (response.data && response.data.message) {
-        notifications.push({
-          title: t('sui.success'),
-          text: response.data.message,
-          color: 'success',
-        });
-      }
-      emit('delete', row);
-
-      // Refetch even if URL is the same
-      fetch();
-    })
-    .catch((error) => {
-      notifications.push({
-        title: t('sui.error'),
-        text: error.response.data?.message ?? 'Unknown error',
-        color: 'danger',
-      });
-    });
-};
-
-/*
-|--------------------------------------------------------------------------
-| Toggle columns
-|--------------------------------------------------------------------------
-*/
-
-const visibleColumns = ref<number[]>([]);
-
-// Find visible columns in local storage
-const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';
-const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY =
-  VISIBLE_COLUMNS_LOCAL_STORAGE + window.location.pathname;
-
-const visibleColumnsFromStorage = JSON.parse(
-  localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
-) as number[];
-
-// If found, set visibleColumns
-if (
-  visibleColumnsFromStorage &&
-  isArray(visibleColumnsFromStorage) &&
-  visibleColumnsFromStorage.length > 0
-) {
-  visibleColumns.value = visibleColumnsFromStorage;
-}
-
-// If nothing is found, set visibleColumns to all columns from table
-const unWatchTable = watch(
-  () => table.value,
-  () => {
-    if (
-      table.value &&
-      table.value.newColumns.length &&
-      visibleColumns.value.length == 0
-    ) {
-      visibleColumns.value = table.value.newColumns
-        .filter((c) => c.toggle)
-        .filter((c) => c.toggleDefault ?? true)
-        .map((c) => c.newKey);
-
-      unWatchTable();
-    }
-  }
-);
-
-/**
- * Update local storage when check input update
- */
-function onUpdateVisibleColumn() {
-  localStorage.setItem(
-    VISIBLE_COLUMNS_LOCAL_STORAGE_KEY,
-    JSON.stringify(visibleColumns.value)
-  );
-}
-
-/*
-|--------------------------------------------------------------------------
-| Row Actions
-|--------------------------------------------------------------------------
-*/
-
-const rowActionsInternal = computed<RowAction[]>(() => {
-  const actions = cloneDeep(props.rowActions) ?? [];
-
-  if (props.editUrl && props.editButton) {
-    actions.push({
-      label: t('sui.edit'),
-      icon: 'heroicons:cog-6-tooth-solid',
-      to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
-      disabled: (row: CollectionItem) => !canUpdate(row),
-    });
-  }
-
-  if (props.deleteUrl && props.deleteButton) {
-    actions.push({
-      label: t('sui.delete'),
-      icon: 'heroicons:trash-20-solid',
-      action: onDeleteClick,
-      disabled: (row: CollectionItem) => !canDelete(row),
-    });
-  }
-
-  return actions;
-});
-
-const visibleRowActions = computed<RowAction[]>(() => {
-  return rowActionsInternal.value.slice(0, props.numberOfVisibleRowActions);
-});
-
-const showRowActionMenu = computed<boolean>(() => {
-  return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
-});
-
-function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
-  return rowActionsInternal.value.map((action) => {
-    return {
-      label: action.label,
-      icon: action.icon,
-      disabled: action.disabled && action.disabled(row),
-      action: action.action
-        ? () => {
-          if (action.action) action.action(row);
-        }
-        : undefined,
-      to: action.to ? action.to(row) : undefined,
-    };
-  });
-}
-
-/*
-|--------------------------------------------------------------------------
-| Checkable
-|--------------------------------------------------------------------------
-*/
-
-const newCheckedRows = ref<Record<string, any>[]>([]);
-
-watch(
-  () => props.checkedRows,
-  (checkedRows) => {
-    newCheckedRows.value = checkedRows;
-  }
-);
-
-function uncheckAll() {
-  table.value?.uncheckAll();
-}
-
-const sectionsInternal = computed<DataIteratorSection[]>(() => {
-  const sections = props.sections ?? [];
-
-  if (props.toggleable) {
-    return [
-      ...sections,
-      {
-        name: 'columns',
-        icon: 'heroicons:view-columns',
-        title: t('sui.columns'),
-        closeText: t('sui.apply'),
-        opened: false,
-      },
-    ];
-  }
-
-  return sections;
-});
-
-function onCheckedRowsUpdate(checkedRows: Record<string, any>[]) {
-  newCheckedRows.value = checkedRows;
-  emit('update:checked-rows', checkedRows);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Scrolling behavior
-|--------------------------------------------------------------------------
-*/
-
-function onWillScrollTop() {
-  if (!props.scrollTopOnFetch) {
-    return;
-  }
-
-  if (props.maxHeight) {
-    table.value?.scrollTop();
-
-    const top = dataIterator.value?.$el?.getBoundingClientRect()?.top ?? 0;
-
-    if (top < 0) {
-      dataIterator.value?.scrollIntoView();
-    }
-  }
-}
-
-/*
-|--------------------------------------------------------------------------
-| On fetch
-|--------------------------------------------------------------------------
-*/
-
-function onFetch(
-  payload: null | ResourceCollection | PaginatedCollection | Collection
-) {
-  emit('fetch', payload);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Exposed functions
-|--------------------------------------------------------------------------
-*/
-
-function fetch() {
-  if (!dataIterator.value) {
-    return;
-  }
-  dataIterator.value.fetch();
-}
-
-function fetchWithoutLoading() {
-  if (!dataIterator.value) {
-    return;
-  }
-  dataIterator.value.fetchWithoutLoading();
-}
-
-const dataIteratorQuery = computed((): DataTableQuery | null => {
-  return dataIterator.value?.query ?? null;
-});
-
-defineExpose({
-  fetch,
-  fetchWithoutLoading,
-  query: dataIteratorQuery,
-});
-</script>
+<template>
+  <BaseDataIterator
+    ref="dataIterator"
+    :url="url"
+    :url-query="urlQuery"
+    :default-query="defaultQuery"
+    :searchable="searchable"
+    :actions="actions"
+    :history-mode="historyMode"
+    :layout="layout"
+    :size="size"
+    :sections="sectionsInternal"
+    :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
+    @fetch="onFetch"
+    @will-scroll-top="onWillScrollTop"
+  >
+    <template
+      #default="{
+        items,
+        loading,
+        sortField,
+        sortDirection,
+        onSortChange,
+        error,
+        firstLoad,
+      }"
+    >
+      <BaseCard
+        clipped
+        class="w-full overflow-hidden"
+      >
+        <div v-if="newCheckedRows.length">
+          <div
+            class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
+          >
+            <div>
+              <span class="mr-3 text-slate-500">{{
+                t('sui.x_rows_selected', {
+                  count: newCheckedRows.length,
+                })
+              }}.</span>
+              <button
+                type="button"
+                class="mr-3 inline text-slate-800 underline underline-offset-1 decoration-slate-400 decoration-2 decoration-dashed"
+                @click="uncheckAll()"
+              >
+                {{ t('sui.deselect_all') }}
+              </button>
+            </div>
+            <BaseMenu
+              v-if="checkableActions?.length"
+              tw-menu="w-52"
+              :items="checkableActions"
+            >
+              <template #button="{ open }">
+                <div
+                  class="flex h-10 px-4 items-center justify-center btn pl-3"
+                  :class="[
+                    open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
+                  ]"
+                >
+                  <BaseIcon
+                    icon="heroicons-solid:dots-vertical"
+                    class="mr-2"
+                  />
+
+                  <span class="font-semibold">
+                    {{ t('sui.bulk_actions') }}
+                  </span>
+                </div>
+              </template>
+            </BaseMenu>
+          </div>
+        </div>
+
+        <BaseTable
+          ref="table"
+          :checked-rows="newCheckedRows"
+          :data="items"
+          :loading="loading"
+          :detailed="detailed"
+          :has-detailed-visible="hasDetailedVisible"
+          :checkable="checkable"
+          :is-row-checkable="isRowCheckable"
+          checkbox-position="left"
+          :sort-field="sortField"
+          :sort-direction="sortDirection"
+          :max-height="maxHeight"
+          :visible-columns="visibleColumns"
+          :size="size"
+          @update:checked-rows="onCheckedRowsUpdate"
+          @sort="onSortChange"
+          @cell-click="onCellClick"
+        >
+          <template #default>
+            <slot />
+
+            <BaseTableColumn
+              v-slot="{ row }"
+              :visible="rowActionsInternal.length"
+              :toggle="false"
+              :clickable="false"
+              custom-key="actions"
+              class="overflow-hidden"
+            >
+              <div class="flex justify-end gap-1 pr-2 text-right">
+                <div class="btn-group">
+                  <template
+                    v-for="rowAction in visibleRowActions"
+                    :key="rowAction.icon"
+                  >
+                    <BaseDataTableRowAction
+                      :row="row"
+                      :row-action="rowAction"
+                      :size="size"
+                    />
+                  </template>
+                  <BaseMenu
+                    v-if="showRowActionMenu"
+                    :items="rowActionMenuItems(row)"
+                    :size="size == 'sm' ? 'xs' : 'sm'"
+                    :tw-button="[
+                      'btn flex p-0 items-center justify-center',
+                      {
+                        'py-1.5 px-2': size == 'sm',
+                        'p-2': size == 'md'
+                      }
+                    ]"
+                  >
+                    <template #button>
+                      <BaseIcon
+                        icon="heroicons-solid:dots-vertical"
+                        :class="{
+                          'h-3 w-3': size == 'sm'
+                        }"
+                      />
+                    </template>
+                  </BaseMenu>
+                </div>
+              </div>
+            </BaseTableColumn>
+          </template>
+
+          <template #detail="propsDetail">
+            <slot
+              name="detail"
+              v-bind="propsDetail"
+            />
+          </template>
+
+          <template #checkedHeader="propsCheckHeader">
+            <slot
+              name="checkedHeader"
+              v-bind="propsCheckHeader"
+            />
+          </template>
+
+          <template #empty>
+            <div
+              v-if="error"
+              class="flex items-center justify-center py-16"
+            >
+              <div class="flex flex-col items-center justify-center">
+                <BaseIcon
+                  icon="heroicons:x-circle"
+                  class="h-10 w-10 text-red-600"
+                />
+                <p class="mt-3 text-center text-sm text-slate-600">
+                  {{ t('sui.whoops') }}
+                </p>
+              </div>
+            </div>
+            <div
+              v-else-if="firstLoad"
+              class="flex items-center justify-center py-16"
+            >
+              <div class="flex flex-col items-center">
+                <BaseEmptyState class="w-32" />
+
+                <p class="mt-3 text-center text-sm text-slate-600">
+                  {{ t('sui.nothing_found') }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </BaseTable>
+      </BaseCard>
+    </template>
+
+    <template
+      v-if="$slots.filters"
+      #filters="{ query, updateQuery, updateQueryValue }"
+    >
+      <slot
+        name="filters"
+        :query="query"
+        :update-query="updateQuery"
+        :update-query-value="updateQueryValue"
+      />
+    </template>
+
+    <template #sidebarTop="sidebarProps">
+      <slot
+        name="sidebarTop"
+        v-bind="sidebarProps"
+      />
+    </template>
+
+    <template #sidebarBottom="sidebarProps">
+      <slot
+        name="sidebarBottom"
+        v-bind="sidebarProps"
+      />
+    </template>
+
+    <template
+      v-if="toggleable"
+      #columns
+    >
+      <BaseDataIteratorSectionColumns
+        v-model:visibleColumns="visibleColumns"
+        :table="table"
+        @update:visible-columns="onUpdateVisibleColumn"
+      />
+    </template>
+
+    <template
+      v-for="section in sections"
+      :key="section.name"
+      #[section.name]
+    >
+      <slot :name="section.name" />
+    </template>
+  </BaseDataIterator>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { t } from '@/i18n';
+import {
+  Collection,
+  CollectionItem,
+  DataIteratorSection,
+  DataTableQuery,
+  MenuItemInterface,
+  PaginatedCollection,
+  ResourceCollection,
+  RowAction,
+} from '@/types';
+import { useDialogsStore } from '@/stores/dialogs';
+import { useNotificationsStore } from '../stores/notifications';
+import BaseDataIterator from './BaseDataIterator.vue';
+import { cloneDeep, isArray } from 'lodash';
+
+import BaseCard from './BaseCard.vue';
+import BaseTable from './BaseTable.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseDataIteratorSectionColumns from './BaseDataIteratorSectionColumns.vue';
+import { BaseIcon, config } from '@/index';
+import BaseEmptyState from '../svg/BaseEmptyState.vue';
+import { RouteLocationRaw } from 'vue-router';
+import BaseMenu from './BaseMenu.vue';
+import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
+
+const router = useRouter();
+
+const http = config.http;
+
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
+
+const table = ref<null | InstanceType<typeof BaseTable>>(null);
+
+const props = defineProps({
+  /**
+   * Base URL from which to make requests
+   */
+  url: {
+    required: true,
+    type: String,
+  },
+
+  /**
+   * Query params that always get applied
+   */
+  urlQuery: {
+    default: undefined,
+    type: Object as PropType<Record<string, any>>,
+  },
+
+  /**
+   * Query params that gets applied by default
+   * These may be overwritten by URL params generated by the data-table or filters
+   */
+  defaultQuery: {
+    default: undefined,
+    type: Object as PropType<DataTableQuery>,
+  },
+
+  /**
+   * Show url for router link
+   */
+  showUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  /**
+   * Show/Hide edit button
+   */
+  editButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Edit url for router link
+   */
+  editUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  /**
+   * Show/Hide delete button
+   */
+  deleteButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Delete endpoint to delete an item
+   */
+  deleteUrl: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
+  },
+
+  /**
+   * Show toggle-able details on each row
+   */
+  detailed: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Check is a given row has details
+   */
+  hasDetailedVisible: {
+    default() {
+      return true;
+    },
+    type: Function as PropType<(row: any) => boolean>,
+  },
+
+  /**
+   * Makes row checkable
+   */
+  checkable: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Actions on each row
+   */
+  checkableActions: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+
+  /**
+   * Checked rows array
+   */
+  checkedRows: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Record<string, any>[]>,
+  },
+
+  /**
+   * Check is a given row is checkable
+   */
+  isRowCheckable: {
+    default() {
+      return () => true;
+    },
+    type: Function,
+  },
+
+  /**
+   * Adds a search bar
+   */
+  searchable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Shows the column toggle utility
+   */
+  toggleable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Actions
+   */
+  actions: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+
+  /**
+   * Save data table state in URL
+   */
+  historyMode: {
+    default: false,
+    type: Boolean,
+  },
+
+  /*
+   * Max height (in px)
+   */
+  maxHeight: {
+    default: undefined,
+    type: Number,
+  },
+
+  /**
+   * Layout type
+   * 
+   * default: Layout with a sidebar
+   * compact: Layout without a sidebar, this is the default layout for mobile, even if you don't specify it
+   */
+  layout: {
+    default: 'default',
+    type: String as PropType<'default' | 'compact'>,
+  },
+
+  /**
+   * Overall size and spacing of the component
+   */
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
+
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
+
+  rowActions: {
+    default: undefined,
+    type: Array as PropType<RowAction[]>,
+  },
+
+  numberOfVisibleRowActions: {
+    default: 2,
+    type: Number,
+  },
+
+  /**
+   * Scroll to top when fetching new data
+   */
+  scrollTopOnFetch: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits([
+  'cell-click',
+  'delete',
+  'update:checked-rows',
+  'fetch',
+]);
+
+const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
+
+/*
+|--------------------------------------------------------------------------
+| Handlers
+|--------------------------------------------------------------------------
+*/
+
+function onCellClick(payload: CollectionItem) {
+  if (props.showUrl) {
+    router.push(props.showUrl(payload));
+  }
+  emit('cell-click', payload);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Gate helpers
+|--------------------------------------------------------------------------
+*/
+
+const gate = (row: CollectionItem, action: string): boolean => {
+  if (row.can && Object.prototype.hasOwnProperty.call(row.can, action)) {
+    return row.can[action];
+  }
+  return true;
+};
+
+const canUpdate = (row: CollectionItem): boolean => {
+  return gate(row, 'update');
+};
+
+const canDelete = (row: CollectionItem): boolean => {
+  return gate(row, 'delete');
+};
+
+function onDeleteClick(row: CollectionItem) {
+  dialogs.push({
+    title: t('sui.delete_record') + '?',
+    message: t('sui.delete_record_description'),
+    color: 'danger',
+    closeOnOutsideClick: true,
+    confirmText: t('sui.yes_delete'),
+    onConfirm: () => onDelete(row),
+  });
+}
+
+const onDelete = (row: CollectionItem) => {
+  if (!props.deleteUrl) {
+    return;
+  }
+
+  http
+    .delete(props.deleteUrl(row))
+    .then((response) => {
+      if (response.data && response.data.message) {
+        notifications.push({
+          title: t('sui.success'),
+          text: response.data.message,
+          color: 'success',
+        });
+      }
+      emit('delete', row);
+
+      // Refetch even if URL is the same
+      fetch();
+    })
+    .catch((error) => {
+      notifications.push({
+        title: t('sui.error'),
+        text: error.response.data?.message ?? 'Unknown error',
+        color: 'danger',
+      });
+    });
+};
+
+/*
+|--------------------------------------------------------------------------
+| Toggle columns
+|--------------------------------------------------------------------------
+*/
+
+const visibleColumns = ref<number[]>([]);
+
+// Find visible columns in local storage
+const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';
+const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY =
+  VISIBLE_COLUMNS_LOCAL_STORAGE + window.location.pathname;
+
+const visibleColumnsFromStorage = JSON.parse(
+  localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
+) as number[];
+
+// If found, set visibleColumns
+if (
+  visibleColumnsFromStorage &&
+  isArray(visibleColumnsFromStorage) &&
+  visibleColumnsFromStorage.length > 0
+) {
+  visibleColumns.value = visibleColumnsFromStorage;
+}
+
+// If nothing is found, set visibleColumns to all columns from table
+const unWatchTable = watch(
+  () => table.value,
+  () => {
+    if (
+      table.value &&
+      table.value.newColumns.length &&
+      visibleColumns.value.length == 0
+    ) {
+      visibleColumns.value = table.value.newColumns
+        .filter((c) => c.toggle)
+        .filter((c) => c.toggleDefault ?? true)
+        .map((c) => c.newKey);
+
+      unWatchTable();
+    }
+  }
+);
+
+/**
+ * Update local storage when check input update
+ */
+function onUpdateVisibleColumn() {
+  localStorage.setItem(
+    VISIBLE_COLUMNS_LOCAL_STORAGE_KEY,
+    JSON.stringify(visibleColumns.value)
+  );
+}
+
+/*
+|--------------------------------------------------------------------------
+| Row Actions
+|--------------------------------------------------------------------------
+*/
+
+const rowActionsInternal = computed<RowAction[]>(() => {
+  const actions = cloneDeep(props.rowActions) ?? [];
+
+  if (props.editUrl && props.editButton) {
+    actions.push({
+      label: t('sui.edit'),
+      icon: 'heroicons:cog-6-tooth-solid',
+      to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
+      disabled: (row: CollectionItem) => !canUpdate(row),
+    });
+  }
+
+  if (props.deleteUrl && props.deleteButton) {
+    actions.push({
+      label: t('sui.delete'),
+      icon: 'heroicons:trash-20-solid',
+      action: onDeleteClick,
+      disabled: (row: CollectionItem) => !canDelete(row),
+    });
+  }
+
+  return actions;
+});
+
+const visibleRowActions = computed<RowAction[]>(() => {
+  return rowActionsInternal.value.slice(0, props.numberOfVisibleRowActions);
+});
+
+const showRowActionMenu = computed<boolean>(() => {
+  return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
+});
+
+function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
+  return rowActionsInternal.value.map((action) => {
+    return {
+      label: action.label,
+      icon: action.icon,
+      disabled: action.disabled && action.disabled(row),
+      action: action.action
+        ? () => {
+          if (action.action) action.action(row);
+        }
+        : undefined,
+      to: action.to ? action.to(row) : undefined,
+    };
+  });
+}
+
+/*
+|--------------------------------------------------------------------------
+| Checkable
+|--------------------------------------------------------------------------
+*/
+
+const newCheckedRows = ref<Record<string, any>[]>([]);
+
+watch(
+  () => props.checkedRows,
+  (checkedRows) => {
+    newCheckedRows.value = checkedRows;
+  }
+);
+
+function uncheckAll() {
+  table.value?.uncheckAll();
+}
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (props.toggleable) {
+    return [
+      ...sections,
+      {
+        name: 'columns',
+        icon: 'heroicons:view-columns',
+        title: t('sui.columns'),
+        closeText: t('sui.apply'),
+        opened: false,
+      },
+    ];
+  }
+
+  return sections;
+});
+
+function onCheckedRowsUpdate(checkedRows: Record<string, any>[]) {
+  newCheckedRows.value = checkedRows;
+  emit('update:checked-rows', checkedRows);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Scrolling behavior
+|--------------------------------------------------------------------------
+*/
+
+function onWillScrollTop() {
+  if (!props.scrollTopOnFetch) {
+    return;
+  }
+
+  if (props.maxHeight) {
+    table.value?.scrollTop();
+
+    const top = dataIterator.value?.$el?.getBoundingClientRect()?.top ?? 0;
+
+    if (top < 0) {
+      dataIterator.value?.scrollIntoView();
+    }
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| On fetch
+|--------------------------------------------------------------------------
+*/
+
+function onFetch(
+  payload: null | ResourceCollection | PaginatedCollection | Collection
+) {
+  emit('fetch', payload);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Exposed functions
+|--------------------------------------------------------------------------
+*/
+
+function fetch() {
+  if (!dataIterator.value) {
+    return;
+  }
+  dataIterator.value.fetch();
+}
+
+function fetchWithoutLoading() {
+  if (!dataIterator.value) {
+    return;
+  }
+  dataIterator.value.fetchWithoutLoading();
+}
+
+const dataIteratorQuery = computed((): DataTableQuery | null => {
+  return dataIterator.value?.query ?? null;
+});
+
+defineExpose({
+  fetch,
+  fetchWithoutLoading,
+  query: dataIteratorQuery,
+});
+</script>