@rotki/ui-library 2.12.2 → 2.13.0

package/dist/components/tables/RuiDataTable.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, toRefs, computed, ref, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, createBlock, isRef, createCommentVNode, createElementVNode, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, Fragment, toDisplayString, createTextVNode, Transition } from "vue";
+import { defineComponent, useModel, useSlots, computed, useTemplateRef, toRef, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, createBlock, isRef, createCommentVNode, createElementVNode, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, Fragment, toDisplayString, createTextVNode, Transition, mergeModels } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiCheckbox from "../forms/checkbox/RuiCheckbox.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
@@ -11,10 +11,15 @@ import noDataPlaceholder from "./table_no_data_placeholder.svg.js";
 import noDataPlaceholderDark from "./table_no_data_placeholder_dark.svg.js";
 import { useTable } from "../../composables/defaults/table.js";
 import { useStickyTableHeader } from "../../composables/sticky-header.js";
+import { useTableColumns } from "../../composables/tables/data-table/columns.js";
+import { useTableExpansion } from "../../composables/tables/data-table/expansion.js";
+import { useTableGrouping } from "../../composables/tables/data-table/grouping.js";
+import { useTablePagination } from "../../composables/tables/data-table/pagination.js";
+import { useTableSelection } from "../../composables/tables/data-table/selection.js";
+import { useTableSort } from "../../composables/tables/data-table/sort.js";
+import { isRow } from "../../composables/tables/data-table/types.js";
 import { useRotkiTheme } from "../../composables/theme.js";
-import { assert } from "../../utils/assert.js";
 import { get, set } from "@vueuse/shared";
-import { watchImmediate, isDefined } from "@vueuse/core";
 const _hoisted_1 = ["aria-busy"];
 const _hoisted_2 = ["colspan"];
 const _hoisted_3 = { class: "flex items-center gap-2" };
@@ -30,17 +35,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "RuiDataTable"
   },
   __name: "RuiDataTable",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     rows: {},
     rowAttr: {},
-    modelValue: { default: void 0 },
     search: { default: "" },
     itemsPerPage: { default: 10 },
-    pagination: { default: void 0 },
-    paginationModifiers: { default: void 0 },
-    sort: { default: void 0 },
-    sortModifiers: { default: void 0 },
-    cols: { default: void 0 },
+    cols: {},
     columnAttr: { default: "label" },
     dense: { type: Boolean, default: false },
     outlined: { type: Boolean, default: false },
@@ -51,579 +51,162 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hideDefaultHeader: { type: Boolean, default: false },
     hideDefaultFooter: { type: Boolean, default: false },
     rounded: { default: "md" },
-    expanded: { default: void 0 },
     singleExpand: { type: Boolean, default: false },
     stickyHeader: { type: Boolean, default: false },
-    stickyOffset: { default: void 0 },
-    globalItemsPerPage: { type: Boolean, default: void 0 },
-    group: { default: void 0 },
+    stickyOffset: {},
+    globalItemsPerPage: { type: Boolean, default: () => void 0 },
     groupExpandButtonPosition: { default: "start" },
-    collapsed: { default: void 0 },
-    disabledRows: { default: void 0 },
+    disabledRows: {},
     multiPageSelect: { type: Boolean, default: false },
-    scroller: { default: void 0 },
     itemClass: { type: [Function, String], default: "" }
-  },
-  emits: ["update:model-value", "update:expanded", "update:pagination", "update:sort", "update:options", "update:group", "update:collapsed", "copy:group"],
+  }, {
+    "modelValue": {},
+    "modelModifiers": {},
+    "expanded": {},
+    "expandedModifiers": {},
+    "pagination": {},
+    "paginationModifiers": {},
+    "sort": {},
+    "sortModifiers": {},
+    "group": {},
+    "groupModifiers": {},
+    "collapsed": {},
+    "collapsedModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:options", "copy:group"], ["update:modelValue", "update:expanded", "update:pagination", "update:sort", "update:group", "update:collapsed"]),
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const selectedData = useModel(__props, "modelValue");
+    const expanded = useModel(__props, "expanded");
+    const [pagination, paginationModifiers] = useModel(__props, "pagination");
+    const [sort, sortModifiers] = useModel(__props, "sort");
+    const group = useModel(__props, "group");
+    const collapsed = useModel(__props, "collapsed");
     const emit = __emit;
     const slots = useSlots();
-    const { stickyHeader, collapsed, modelValue, disabledRows } = toRefs(props);
     const tableDefaults = useTable();
     const { isDark } = useRotkiTheme();
-    const stickyHeaderOffset = computed(() => props.stickyOffset !== void 0 ? props.stickyOffset : get(tableDefaults.stickyOffset));
-    function isRow(item) {
-      return !("__header__" in item);
-    }
-    function isHeaderSlot(slotName) {
-      return slotName.startsWith("header.");
-    }
-    const { stick, table, tableScroller } = useStickyTableHeader(
-      stickyHeader,
-      get(stickyHeaderOffset)
+    const stickyHeaderOffset = computed(
+      () => __props.stickyOffset !== void 0 ? __props.stickyOffset : get(tableDefaults.stickyOffset)
     );
-    const expandable = computed(() => props.expanded && slots["expanded-item"]);
-    const headerSlots = computed(
-      () => Object.keys(slots).filter(isHeaderSlot)
+    const table = useTemplateRef("table");
+    const tableScroller = useTemplateRef("tableScroller");
+    const { stick } = useStickyTableHeader(
+      toRef(() => __props.stickyHeader),
+      stickyHeaderOffset,
+      { table, tableScroller }
     );
-    const globalItemsPerPageSettings = computed(() => {
-      if (props.globalItemsPerPage !== void 0)
-        return props.globalItemsPerPage;
-      return get(tableDefaults.globalItemsPerPage);
-    });
-    const getKeys = (t) => Object.keys(t);
-    const groupKeys = computed(() => {
-      const groupBy = props.group;
-      if (!groupBy) {
-        return [];
-      }
-      if (!Array.isArray(groupBy)) {
-        return [groupBy];
-      }
-      return groupBy;
-    });
-    const groupKey = computed(() => get(groupKeys).join(":"));
-    const isGrouped = computed(() => !!get(groupKey));
-    const columns = computed(() => {
-      const data = props.cols ?? getKeys(props.rows[0] ?? {}).map(
-        (key) => ({
-          key,
-          [props.columnAttr]: String(key)
-        })
-      );
-      const hasExpandColumn = data.some((row) => row.key === "expand");
-      if (get(expandable) && !hasExpandColumn) {
-        return [
-          ...data,
-          {
-            key: "expand",
-            sortable: false,
-            class: "w-16",
-            cellClass: "!py-0 w-16",
-            align: "end"
-          }
-        ];
-      }
-      const groupByKeys = get(groupKeys);
-      if (groupByKeys.length === 0)
-        return data;
-      return data.filter(
-        (column) => !groupByKeys.includes(column.key)
-      );
-    });
-    const itemsLength = ref(0);
-    const selectedData = computed({
-      get() {
-        return get(modelValue);
-      },
-      set(value) {
-        emit("update:model-value", value);
+    const hasExpandedItemSlot = computed(() => !!slots["expanded-item"]);
+    const { expandable, isExpanded, onToggleExpand } = useTableExpansion(
+      { rowAttr: __props.rowAttr, singleExpand: __props.singleExpand },
+      { expanded, hasExpandedItemSlot }
+    );
+    function emitUpdateOptions(opts) {
+      emit("update:options", opts);
+    }
+    const {
+      sortData,
+      sortedMap,
+      sorted,
+      onSort: applySort
+    } = useTableSort(
+      { rows: () => __props.rows, search: () => __props.search, sortModifiersExternal: sortModifiers.external },
+      {
+        sort,
+        pagination,
+        emitUpdateOptions
       }
-    });
-    const internalSelectedData = ref([]);
-    watchImmediate(modelValue, (modelValue2) => {
-      set(internalSelectedData, modelValue2);
-    });
-    const rowIdentifier = computed(() => props.rowAttr);
-    const internalPaginationState = ref();
-    const collapsedRows = ref([]);
-    const pagination = computed(() => props.pagination);
-    watchImmediate(pagination, (pagination2) => {
-      set(internalPaginationState, pagination2);
-    });
-    watchImmediate(collapsed, (value) => {
-      set(collapsedRows, value ?? []);
-    });
-    const paginationData = computed({
-      get() {
-        const paginated = get(internalPaginationState);
-        if (!paginated) {
-          return {
-            total: get(itemsLength),
-            limit: props.itemsPerPage,
-            page: 1
-          };
-        }
-        if (props.paginationModifiers?.external)
-          return paginated;
-        return {
-          total: get(itemsLength),
-          limit: paginated.limit,
-          page: paginated.page,
-          limits: paginated.limits
-        };
-      },
-      set(value) {
-        set(internalPaginationState, value);
-        emit("update:pagination", value);
-        emit("update:options", {
-          pagination: value,
-          sort: props.sort
-        });
+    );
+    const {
+      groupKeys,
+      groupKey,
+      grouped,
+      isExpandedGroup,
+      isHiddenRow,
+      onToggleExpandGroup,
+      onUngroup,
+      onCopyGroup
+    } = useTableGrouping(
+      { rowAttr: __props.rowAttr },
+      {
+        group,
+        collapsed,
+        sorted,
+        emitCopyGroup: (value) => emit("copy:group", value)
       }
-    });
-    const sortData = computed({
-      get() {
-        return props.sort;
+    );
+    const {
+      paginationData,
+      filtered,
+      setInternalTotal,
+      resetPagination
+    } = useTablePagination(
+      {
+        itemsPerPage: __props.itemsPerPage,
+        paginationModifiersExternal: paginationModifiers.external,
+        globalItemsPerPage: __props.globalItemsPerPage
       },
-      set(value) {
-        if (!props.multiPageSelect)
-          onToggleAll(false);
-        resetCheckboxShiftState();
-        emit("update:sort", value);
-        emit("update:options", {
-          sort: value,
-          pagination: get(pagination)
-        });
+      {
+        pagination,
+        grouped,
+        isHiddenRow,
+        sort,
+        emitUpdateOptions,
+        tableDefaults
       }
-    });
-    const sortedMap = computed(() => {
-      const mapped = {};
-      const sortBy = get(sortData);
-      if (!sortBy)
-        return mapped;
-      if (!Array.isArray(sortBy)) {
-        if (sortBy.column)
-          mapped[sortBy.column] = sortBy;
-        return mapped;
-      }
-      return sortBy.reduce((acc, curr) => {
-        if (!curr.column)
-          return acc;
-        return { ...acc, [curr.column]: curr };
-      }, mapped);
-    });
-    const searchData = computed(() => {
-      const query = props.search?.toLocaleLowerCase();
-      if (!query)
-        return props.rows;
-      return props.rows.filter(
-        (row) => getKeys(row).some(
-          (key) => `${row[key]}`.toLocaleLowerCase().includes(query)
-        )
-      );
-    });
-    const sorted = computed(() => {
-      const sortBy = get(sortData);
-      const data = [...get(searchData)];
-      if (!sortBy || props.sortModifiers?.external)
-        return data;
-      const sortOptions = { sensitivity: "accent", usage: "sort" };
-      const sort = (by) => {
-        data.sort((a, b) => {
-          const column = by.column;
-          if (!column)
-            return 0;
-          let [aValue, bValue] = [a[column], b[column]];
-          if (by.direction === "desc")
-            [aValue, bValue] = [bValue, aValue];
-          const aNumber = Number(aValue);
-          const bNumber = Number(bValue);
-          if (!isNaN(aNumber) && !isNaN(bNumber))
-            return aNumber - bNumber;
-          return `${aValue}`.localeCompare(
-            `${bValue}`,
-            void 0,
-            sortOptions
-          );
-        });
-      };
-      if (!Array.isArray(sortBy))
-        sort(sortBy);
-      else
-        [...sortBy].reverse().forEach(sort);
-      return data;
-    });
-    const mappedGroups = computed(() => {
-      if (!get(isGrouped)) {
-        return {};
-      }
-      const result = get(sorted);
-      const identifier = props.rowAttr;
-      return result.reduce((acc, row) => {
-        if (!isDefined(row[identifier]) || row[identifier] === "")
-          return acc;
-        const group = getRowGroup(row);
-        const groupVal = Object.values(group).filter(isDefined).join(",");
-        if (!acc[groupVal]) {
-          acc[groupVal] = [
-            {
-              __header__: true,
-              group,
-              identifier: groupVal
-            }
-          ];
-        }
-        acc[groupVal].push(row);
-        return acc;
-      }, {});
-    });
-    const grouped = computed(() => {
-      const result = get(sorted);
-      const groupByKey = get(groupKey);
-      if (!groupByKey) {
-        return result;
-      }
-      return Object.values(get(mappedGroups)).flatMap((grouped2) => grouped2);
-    });
-    const filtered = computed(() => {
-      const result = get(grouped);
-      const paginated = get(paginationData);
-      const limit = paginated.limit;
-      if (paginated && !props.paginationModifiers?.external) {
-        const start = (paginated.page - 1) * limit;
-        const end = start + limit;
-        const preGroups = result.slice(0, start + 1).filter((item) => !isRow(item));
-        const postGroups = result.slice(start + 1, end + preGroups.length).filter((item) => !isRow(item));
-        const data = result.slice(start + preGroups.length, end + preGroups.length + postGroups.length);
-        const nearestGroup = preGroups.at(-1);
-        if (data.length > 0) {
-          const firstItem = data[0];
-          assert(firstItem);
-          if (isRow(firstItem) && nearestGroup)
-            data.unshift(nearestGroup);
-          const lastItem = data.at(-1);
-          if (lastItem && !isRow(lastItem))
-            data.pop();
-        }
-        return data.filter((row) => !isHiddenRow(row));
-      }
-      return result.filter((row) => !isHiddenRow(row));
-    });
-    const visibleIdentifiers = computed(() => {
-      const selectBy = props.rowAttr;
-      if (!selectBy)
-        return [];
-      return get(filtered).filter(isRow).map((row) => row[selectBy]);
-    });
-    const isAllSelected = computed(() => {
-      const selectedRows = get(selectedData);
-      if (!selectedRows)
-        return false;
-      return selectedRows.length > 0 && get(visibleIdentifiers).every((id) => selectedRows.includes(id));
-    });
-    const indeterminate = computed(() => {
-      const selectedRows = get(selectedData);
-      if (!selectedRows)
-        return false;
-      return selectedRows.length > 0 && !get(isAllSelected);
-    });
+    );
     const noData = computed(() => get(filtered).length === 0);
-    const colspan = computed(() => {
-      let columnLength = get(columns).length;
-      if (get(selectedData))
-        columnLength++;
-      return columnLength;
+    const { columns, colspan, headerSlots, cellValue } = useTableColumns({
+      cols: () => __props.cols,
+      columnAttr: __props.columnAttr,
+      rows: () => __props.rows,
+      expandable,
+      groupKeys,
+      selectedData,
+      slots
     });
-    const isSortedBy = (key) => key in get(sortedMap);
-    function getSortIndex(key) {
-      const sortBy = get(sortData);
-      if (!sortBy || !Array.isArray(sortBy) || !isSortedBy(key))
-        return -1;
-      return sortBy.findIndex((sort) => sort.column === key) ?? -1;
-    }
-    function isSelected(identifier) {
-      const selection = get(selectedData);
-      if (!selection)
-        return false;
-      return selection.includes(identifier);
-    }
-    function isDisabledRow(rowKey) {
-      const identifier = props.rowAttr;
-      if (!identifier)
-        return false;
-      return !!get(disabledRows)?.some((disabledRow) => rowKey === disabledRow[identifier]);
-    }
-    function isExpanded(identifier) {
-      const { expanded } = props;
-      if (!expanded?.length)
-        return false;
-      return expanded.some((data) => data[props.rowAttr] === identifier);
-    }
-    function onToggleExpand(row) {
-      const { expanded } = props;
-      if (!expanded)
-        return;
-      const key = props.rowAttr;
-      const rowExpanded = isExpanded(row[key]);
-      if (props.singleExpand)
-        return emit("update:expanded", rowExpanded ? [] : [row]);
-      return emit(
-        "update:expanded",
-        rowExpanded ? expanded.filter((item) => item[key] !== row[key]) : [...expanded, row]
-      );
-    }
-    function getRowGroup(row) {
-      return get(groupKeys).reduce((acc, key) => ({ ...acc, [key]: row[key] }), {});
-    }
-    function getGroupRows(groupVal) {
-      if (!get(isGrouped))
-        return [];
-      const groupRows = get(mappedGroups)[groupVal];
-      assert(groupRows);
-      return groupRows.filter(isRow);
-    }
-    function compareGroupsFn(a, b) {
-      const group = get(groupKeys);
-      if (group.length === 0)
-        return false;
-      return group.every((key) => a[key] === b[key]);
-    }
-    function isExpandedGroup(value) {
-      return get(collapsedRows).every((row) => !compareGroupsFn(row, value));
-    }
-    function isHiddenRow(row) {
-      const identifier = props.rowAttr;
-      return get(isGrouped) && get(collapsedRows).some(
-        (value) => isRow(row) && row[identifier] === value[identifier]
-      );
-    }
-    function onToggleExpandGroup(group, value) {
-      if (!value)
-        return;
-      const collapsed2 = get(collapsedRows);
-      const groupExpanded = isExpandedGroup(group);
-      const groupRows = getGroupRows(value);
-      set(
-        collapsedRows,
-        groupExpanded ? [...collapsed2, ...groupRows] : collapsed2.filter((row) => !compareGroupsFn(row, group))
-      );
-      emit("update:collapsed", get(collapsedRows));
-    }
-    function onUngroup() {
-      set(collapsedRows, []);
-      emit("update:collapsed", []);
-      emit("update:group", Array.isArray(props.group) ? [] : void 0);
-    }
-    function onCopyGroup(value) {
-      emit("copy:group", value);
-    }
-    function onSort({
-      key,
-      direction
-    }) {
-      const sortBy = get(sortData);
-      if (!sortBy)
-        return;
-      if (!Array.isArray(sortBy)) {
-        if (isSortedBy(key)) {
-          const newDirection = !direction || direction === "asc" ? "desc" : "asc";
-          if (sortBy.direction === newDirection) {
-            set(sortData, { ...sortBy, column: void 0, direction: "asc" });
-          } else {
-            set(sortData, {
-              ...sortBy,
-              direction: sortBy.direction === "asc" ? "desc" : "asc"
-            });
-          }
-        } else {
-          set(sortData, { column: key, direction: direction || "asc" });
-        }
-        return;
-      }
-      if (isSortedBy(key)) {
-        const newDirection = !direction || direction === "asc" ? "desc" : "asc";
-        const index = getSortIndex(key);
-        const sortByCol = sortBy[index];
-        assert(sortByCol);
-        if (sortByCol.direction === newDirection)
-          sortBy.splice(index, 1);
-        else
-          sortByCol.direction = sortByCol.direction === "asc" ? "desc" : "asc";
-        set(sortData, sortBy);
-      } else {
-        set(sortData, [...sortBy, { column: key, direction: direction || "asc" }]);
-      }
-    }
-    function isSelectable(rowKey) {
-      return isSelected(rowKey) || !isDisabledRow(rowKey);
-    }
-    function mustSelect(rowKey) {
-      return isSelected(rowKey) && isDisabledRow(rowKey);
-    }
-    function onToggleAll(checked) {
-      const selectedRows = get(selectedData);
-      if (!isDefined(selectedRows)) {
-        return;
-      }
-      if (!props.multiPageSelect) {
-        if (checked)
-          set(selectedData, get(visibleIdentifiers).filter(isSelectable));
-        else
-          set(selectedData, get(visibleIdentifiers).filter(mustSelect));
-      } else {
-        if (checked) {
-          set(
-            selectedData,
-            Array.from(/* @__PURE__ */ new Set(
-              [
-                ...selectedRows,
-                ...get(visibleIdentifiers).filter(isSelectable)
-              ]
-            ))
-          );
-        } else {
-          set(
-            selectedData,
-            selectedRows.filter((rowKey) => !get(visibleIdentifiers).includes(rowKey) || get(visibleIdentifiers).filter(mustSelect).includes(rowKey))
-          );
-        }
-      }
-    }
-    const shiftClicked = ref(false);
-    const lastSelectedIndex = ref(-1);
-    function resetCheckboxShiftState() {
-      set(shiftClicked, false);
-      set(lastSelectedIndex, -1);
-    }
-    function onSelect(checked, value, userAction = false) {
-      if (get(shiftClicked) && userAction)
-        return;
-      const selectedRows = get(internalSelectedData);
-      if (!selectedRows)
-        return false;
-      const selected = isSelected(value);
-      if (checked && !selected) {
-        set(internalSelectedData, [...selectedRows, value]);
-      } else if (!checked && selected) {
-        set(
-          internalSelectedData,
-          [...selectedRows].filter((r) => r !== value)
-        );
-      }
-      if (userAction)
-        set(selectedData, get(internalSelectedData));
-    }
-    function onCheckboxClick(event, value, index) {
-      const input = event.currentTarget.querySelector("input");
-      const nodeName = event.target.nodeName;
-      const shiftKey = event.shiftKey;
-      set(shiftClicked, shiftKey);
-      if (input && nodeName !== "INPUT") {
-        if (shiftKey) {
-          setTimeout(() => {
-            let lastIndex = get(lastSelectedIndex);
-            if (lastIndex === -1)
-              lastIndex = index;
-            const tableData = get(filtered);
-            const lastSelectedData = tableData[lastIndex];
-            assert(lastSelectedData);
-            if (isRow(lastSelectedData)) {
-              const id = get(rowIdentifier);
-              const valueToApply = isSelected(lastSelectedData[id]);
-              if (lastIndex === index) {
-                onSelect(!valueToApply, value);
-              } else {
-                const from = Math.min(lastIndex, index);
-                const to = Math.max(lastIndex, index);
-                for (let i = from; i <= to; i++) {
-                  const currSelectedData = tableData[i];
-                  assert(currSelectedData);
-                  if (isRow(currSelectedData) && !isDisabledRow(currSelectedData[id]))
-                    onSelect(valueToApply, currSelectedData[id]);
-                }
-              }
-              set(lastSelectedIndex, index);
-              set(selectedData, get(internalSelectedData));
-            }
-          }, 1);
-        } else {
-          set(lastSelectedIndex, index);
-        }
-      }
-    }
-    const search = computed(() => props.search);
-    function deselectRemovedRows() {
-      get(selectedData)?.forEach((key) => {
-        if (isSelected(key) && !get(visibleIdentifiers).includes(key))
-          onSelect(false, key, true);
-      });
+    const {
+      isAllSelected,
+      indeterminate,
+      isSelected,
+      isDisabledRow,
+      onToggleAll,
+      onSelect,
+      onCheckboxClick,
+      deselectRemovedRows,
+      resetCheckboxShiftState
+    } = useTableSelection(
+      { rowAttr: __props.rowAttr, multiPageSelect: __props.multiPageSelect, disabledRows: () => __props.disabledRows },
+      { selectedData, filtered }
+    );
+    function onSort(payload) {
+      applySort(payload);
+      if (!__props.multiPageSelect)
+        onToggleAll(false);
+      resetCheckboxShiftState();
     }
     function onPaginate() {
-      emit("update:expanded", []);
-      if (!props.multiPageSelect)
+      set(expanded, []);
+      if (!__props.multiPageSelect)
         onToggleAll(false);
       resetCheckboxShiftState();
     }
-    function setInternalTotal(items) {
-      if (!props.paginationModifiers?.external)
-        set(itemsLength, items.filter(isRow).length);
-    }
-    function cellValue(row, key) {
-      return row[key];
-    }
-    watch(internalPaginationState, (pagination2) => {
-      if (pagination2?.limit && get(globalItemsPerPageSettings))
-        set(tableDefaults.itemsPerPage, pagination2.limit);
-    });
-    watch(tableDefaults.itemsPerPage, (itemsPerPage) => {
-      if (!get(globalItemsPerPageSettings))
-        return;
-      set(paginationData, {
-        ...get(paginationData),
-        limit: itemsPerPage
-      });
-    });
-    watch(search, () => {
-      set(paginationData, {
-        ...get(paginationData),
-        page: 1
-      });
+    watch(() => __props.search, () => {
+      resetPagination();
       onToggleAll(false);
       resetCheckboxShiftState();
     });
     watch(sorted, (items) => {
-      if (!props.multiPageSelect)
+      if (!__props.multiPageSelect)
         deselectRemovedRows();
       setInternalTotal(items);
     });
-    watch(paginationData, (pagination2) => {
-      const { total, limit, page } = pagination2;
-      const maxPages = Math.ceil(total / limit);
-      if (maxPages > 0 && page > maxPages) {
-        set(paginationData, {
-          ...pagination2,
-          page: maxPages
-        });
-      }
-    });
     onMounted(() => {
       setInternalTotal(get(sorted));
-      if (!get(globalItemsPerPageSettings))
-        return;
-      set(paginationData, {
-        ...get(paginationData),
-        limit: get(tableDefaults.itemsPerPage)
-      });
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          _ctx.$style.wrapper,
-          _ctx.$style[`rounded__${__props.rounded}`],
-          { [_ctx.$style.outlined]: __props.outlined }
-        ])
+        class: normalizeClass([_ctx.$style.wrapper, _ctx.$style[`rounded__${__props.rounded}`], { [_ctx.$style.outlined]: __props.outlined }]),
+        "data-id": "table-wrapper"
       }, [
         unref(paginationData) && !__props.hideDefaultHeader ? (openBlock(), createBlock(RuiTablePagination, {
           key: 0,
@@ -640,14 +223,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "tableScroller",
           ref: tableScroller,
-          class: normalizeClass(_ctx.$style.scroller)
+          class: normalizeClass(_ctx.$style.scroller),
+          "data-id": "table-scroller"
         }, [
           createElementVNode("table", {
             ref_key: "table",
             ref: table,
             class: normalizeClass([_ctx.$style.table, { [_ctx.$style.dense]: __props.dense }]),
-            "aria-busy": __props.loading,
-            "aria-label": ""
+            "aria-busy": __props.loading
           }, [
             createVNode(RuiTableHead, {
               loading: __props.loading,
@@ -660,13 +243,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "disable-check-all": !unref(filtered)?.length,
               "is-all-selected": unref(isAllSelected),
               "no-data": unref(noData),
-              selectable: !!unref(selectedData),
+              selectable: !!selectedData.value,
               "sort-data": unref(sortData),
               "sorted-map": unref(sortedMap),
               stick: unref(stick),
-              "sticky-header": unref(stickyHeader),
+              "sticky-header": __props.stickyHeader,
               onSort: _cache[2] || (_cache[2] = ($event) => onSort($event)),
-              "onSelect:all": _cache[3] || (_cache[3] = ($event) => onToggleAll($event))
+              "onSelect:all": _cache[3] || (_cache[3] = ($event) => unref(onToggleAll)($event))
             }, createSlots({ _: 2 }, [
               renderList(unref(headerSlots), (headerSlot) => {
                 return {
@@ -677,7 +260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 };
               })
             ]), 1032, ["loading", "indeterminate", "capitalize-headers", "colspan", "column-attr", "columns", "dense", "disable-check-all", "is-all-selected", "no-data", "selectable", "sort-data", "sorted-map", "stick", "sticky-header"]),
-            unref(stickyHeader) ? (openBlock(), createBlock(RuiTableHead, {
+            __props.stickyHeader ? (openBlock(), createBlock(RuiTableHead, {
               key: 0,
               loading: __props.loading,
               "capitalize-headers": !__props.cols,
@@ -686,7 +269,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               columns: unref(columns),
               dense: __props.dense,
               "no-data": unref(noData),
-              selectable: !!unref(selectedData),
+              selectable: !!selectedData.value,
               "sort-data": unref(sortData),
               "sorted-map": unref(sortedMap),
               "data-id": "head-clone",
@@ -710,15 +293,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filtered), (row, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
-                  !isRow(row) ? (openBlock(), createElementBlock("tr", {
+                  !unref(isRow)(row) ? (openBlock(), createElementBlock("tr", {
                     key: `row-${index}`,
-                    class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__group])
+                    class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__group]),
+                    "data-id": "row-group"
                   }, [
                     renderSlot(_ctx.$slots, "group.header", {
                       colspan: unref(colspan),
                       header: row,
-                      isOpen: isExpandedGroup(row.group),
-                      toggle: () => onToggleExpandGroup(row.group, row.identifier)
+                      isOpen: unref(isExpandedGroup)(row.group),
+                      toggle: () => unref(onToggleExpandGroup)(row.group, row.identifier)
                     }, () => [
                       createElementVNode("td", {
                         class: normalizeClass([[_ctx.$style.td], "!p-2"]),
@@ -727,8 +311,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         createElementVNode("div", _hoisted_3, [
                           __props.groupExpandButtonPosition === "start" ? (openBlock(), createBlock(RuiExpandButton, {
                             key: 0,
-                            expanded: isExpandedGroup(row.group),
-                            onClick: ($event) => onToggleExpandGroup(row.group, row.identifier)
+                            expanded: unref(isExpandedGroup)(row.group),
+                            onClick: ($event) => unref(onToggleExpandGroup)(row.group, row.identifier)
                           }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true),
                           renderSlot(_ctx.$slots, "group.header.content", {
                             groupKey: unref(groupKey),
@@ -740,7 +324,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               variant: "text",
                               icon: "",
                               "data-cy": "group-copy-button",
-                              onClick: ($event) => onCopyGroup({ key: unref(groupKey), value: row.group })
+                              onClick: ($event) => unref(onCopyGroup)({ key: unref(groupKey), value: row.group })
                             }, {
                               default: withCtx(() => [
                                 createVNode(RuiIcon, {
@@ -760,7 +344,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 size: "sm",
                                 variant: "text",
                                 icon: "",
-                                onClick: _cache[4] || (_cache[4] = ($event) => onUngroup())
+                                "data-cy": "group-ungroup-button",
+                                onClick: _cache[4] || (_cache[4] = ($event) => unref(onUngroup)())
                               }, {
                                 default: withCtx(() => [
                                   createVNode(RuiIcon, {
@@ -778,8 +363,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }),
                           __props.groupExpandButtonPosition === "end" ? (openBlock(), createBlock(RuiExpandButton, {
                             key: 1,
-                            expanded: isExpandedGroup(row.group),
-                            onClick: ($event) => onToggleExpandGroup(row.group, row.identifier)
+                            expanded: unref(isExpandedGroup)(row.group),
+                            onClick: ($event) => unref(onToggleExpandGroup)(row.group, row.identifier)
                           }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
                         ])
                       ], 10, _hoisted_2)
@@ -789,12 +374,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: `row-${index}`,
                       class: normalizeClass([
                         _ctx.$style.tr,
-                        { [_ctx.$style.tr__selected ?? ""]: isSelected(row[unref(rowIdentifier)]) },
+                        { [_ctx.$style.tr__selected ?? ""]: unref(isSelected)(row[__props.rowAttr]) },
                         typeof __props.itemClass === "string" ? __props.itemClass : __props.itemClass(row)
                       ]),
-                      "aria-selected": unref(selectedData) ? isSelected(row[unref(rowIdentifier)]) : void 0
+                      "aria-selected": selectedData.value ? unref(isSelected)(row[__props.rowAttr]) : void 0,
+                      "data-id": "row"
                     }, [
-                      unref(selectedData) ? (openBlock(), createElementBlock("td", {
+                      selectedData.value ? (openBlock(), createElementBlock("td", {
                         key: 0,
                         class: normalizeClass(_ctx.$style.checkbox),
                         colspan: "1",
@@ -802,14 +388,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, [
                         createVNode(RuiCheckbox, {
                           "data-cy": `table-toggle-check-${index}`,
-                          "model-value": isSelected(row[unref(rowIdentifier)]),
-                          disabled: isDisabledRow(row[unref(rowIdentifier)]),
+                          "model-value": unref(isSelected)(row[__props.rowAttr]),
+                          disabled: unref(isDisabledRow)(row[__props.rowAttr]),
                           size: __props.dense ? "sm" : void 0,
                           color: "primary",
                           class: "select-none",
                           "hide-details": "",
-                          "onUpdate:modelValue": ($event) => onSelect($event, row[unref(rowIdentifier)], true),
-                          onClick: ($event) => onCheckboxClick($event, row[unref(rowIdentifier)], index)
+                          "onUpdate:modelValue": ($event) => unref(onSelect)($event, row[__props.rowAttr], true),
+                          onClick: ($event) => unref(onCheckboxClick)($event, row[__props.rowAttr], index)
                         }, null, 8, ["data-cy", "model-value", "disabled", "size", "onUpdate:modelValue", "onClick"])
                       ], 2)) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns), (column, subIndex) => {
@@ -831,8 +417,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, () => [
                             !slots["item.expand"] ? (openBlock(), createBlock(RuiExpandButton, {
                               key: 0,
-                              expanded: isExpanded(row[unref(rowIdentifier)]),
-                              onClick: ($event) => onToggleExpand(row)
+                              expanded: unref(isExpanded)(row[__props.rowAttr]),
+                              onClick: ($event) => unref(onToggleExpand)(row)
                             }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
                           ]) : renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
                             key: 1,
@@ -840,14 +426,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             index,
                             row
                           }, () => [
-                            createTextVNode(toDisplayString(cellValue(row, column.key)), 1)
+                            createTextVNode(toDisplayString(unref(cellValue)(row, column.key)), 1)
                           ])
                         ], 10, _hoisted_5);
                       }), 128))
                     ], 10, _hoisted_4)),
-                    unref(expandable) && isExpanded(row[unref(rowIdentifier)]) ? (openBlock(), createElementBlock("tr", {
+                    unref(expandable) && unref(isExpanded)(row[__props.rowAttr]) ? (openBlock(), createElementBlock("tr", {
                       key: `row-expand-${index}`,
-                      class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__expandable])
+                      class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__expandable]),
+                      "data-id": "row-expanded"
                     }, [
                       createElementVNode("td", {
                         colspan: unref(colspan),
@@ -865,7 +452,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               __props.loading && unref(noData) ? (openBlock(), createElementBlock("tr", _hoisted_7, [
                 createElementVNode("td", {
                   class: normalizeClass(_ctx.$style.tbody__loader),
-                  colspan: unref(colspan)
+                  colspan: unref(colspan),
+                  "data-id": "tbody-loader"
                 }, [
                   createVNode(RuiProgress, {
                     color: "primary",
@@ -876,7 +464,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true),
               unref(noData) && __props.empty && !__props.loading ? (openBlock(), createElementBlock("tr", {
                 key: 2,
-                class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__empty])
+                class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__empty]),
+                "data-id": "row-empty"
               }, [
                 createVNode(Transition, {
                   appear: "",
@@ -903,12 +492,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, null, 8, _hoisted_10),
                           __props.empty.label ? (openBlock(), createElementBlock("p", {
                             key: 0,
-                            class: normalizeClass(_ctx.$style.empty__label)
+                            class: normalizeClass(_ctx.$style.empty__label),
+                            "data-id": "empty-label"
                           }, toDisplayString(__props.empty.label), 3)) : createCommentVNode("", true),
                           renderSlot(_ctx.$slots, "empty-description", {}, () => [
                             __props.empty.description ? (openBlock(), createElementBlock("p", {
                               key: 0,
-                              class: normalizeClass(_ctx.$style.empty__description)
+                              class: normalizeClass(_ctx.$style.empty__description),
+                              "data-id": "empty-description"
                             }, toDisplayString(__props.empty.description), 3)) : createCommentVNode("", true)
                           ])
                         ], 2)