@rotki/ui-library 2.21.0 → 2.22.0

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

@@ -1,39 +1,33 @@
 import { useTable } from "../../composables/defaults/table.js";
-import RuiIcon_default from "../icons/RuiIcon.js";
-import RuiProgress_default from "../progress/RuiProgress.js";
-import RuiButton_default from "../buttons/button/RuiButton.js";
-import RuiTooltip_default from "../overlays/tooltip/RuiTooltip.js";
-import RuiCheckbox_default from "../forms/checkbox/RuiCheckbox.js";
-import { getAlignClass } from "./table-props.js";
 import { dataTableStyles } from "./data-table-styles.js";
-import RuiExpandButton_default from "./RuiExpandButton.js";
-import RuiTableEmptyState_default from "./RuiTableEmptyState.js";
+import { provideDataTableContext, provideDataTableNested, useDataTableNested } from "./data-table/context.js";
+import { GroupExpandButtonPosition } from "./table-props.js";
+import RuiDataTableBody_default from "./data-table/RuiDataTableBody.js";
+import RuiDataTableMobileSort_default from "./data-table/RuiDataTableMobileSort.js";
 import RuiTableHead_default from "./RuiTableHead.js";
 import RuiTablePagination_default from "./RuiTablePagination.js";
 import { useStickyTableHeader } from "../../composables/sticky-header.js";
-import { isRow } from "../../composables/tables/data-table/types.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 { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, normalizeClass, normalizeProps, onMounted, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
-import { get, set } from "@vueuse/shared";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, renderList, renderSlot, unref, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { useElementSize, useWindowSize } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/tables/RuiDataTable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-busy"];
-var _hoisted_2 = ["colspan"];
-var _hoisted_3 = { class: "flex items-center gap-2" };
-var _hoisted_4 = ["aria-selected"];
-var _hoisted_5 = ["colspan", "rowspan"];
-var _hoisted_6 = ["colspan"];
-var _hoisted_7 = { key: 1 };
-var _hoisted_8 = ["colspan"];
-var _hoisted_9 = ["colspan"];
-var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1 = {
+	key: 1,
+	class: "flex justify-end p-2",
+	"data-id": "table-mobile-toolbar"
+};
+var _hoisted_2 = ["aria-busy"];
+var ITEM_SLOT_PREFIX = "item.";
+var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiDataTable",
 	__name: "RuiDataTable",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		rows: {},
 		rowAttr: {},
 		search: { default: "" },
@@ -84,7 +78,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			type: Boolean,
 			default: () => void 0
 		},
-		groupExpandButtonPosition: { default: "start" },
+		groupExpandButtonPosition: { default: () => GroupExpandButtonPosition.start },
 		disabledRows: {},
 		multiPageSelect: {
 			type: Boolean,
@@ -93,7 +87,10 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		itemClass: {
 			type: [Function, String],
 			default: ""
-		}
+		},
+		mobileBreakpoint: {},
+		mobileBreakpointBasis: {},
+		mobile: { type: Boolean }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -108,7 +105,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		"collapsed": {},
 		"collapsedModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["update:options", "copy:group"], [
+	emits: /*@__PURE__*/ mergeModels(["update:options", "copy:group"], [
 		"update:modelValue",
 		"update:expanded",
 		"update:pagination",
@@ -126,7 +123,29 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const emit = __emit;
 		const slots = useSlots();
 		const tableDefaults = useTable();
-		const stickyHeaderOffset = computed(() => __props.stickyOffset !== void 0 ? __props.stickyOffset : get(tableDefaults.stickyOffset));
+		const tableWrapper = useTemplateRef("tableWrapper");
+		const { width: windowWidth } = useWindowSize();
+		const { width: containerWidth } = useElementSize(tableWrapper);
+		const resolvedMobileBreakpoint = computed(() => {
+			if (__props.mobileBreakpoint !== void 0) return __props.mobileBreakpoint;
+			const globalBreakpoint = tableDefaults.mobileBreakpoint;
+			return globalBreakpoint === void 0 ? void 0 : get$1(globalBreakpoint);
+		});
+		const resolvedMobileBasis = computed(() => {
+			if (__props.mobileBreakpointBasis !== void 0) return __props.mobileBreakpointBasis;
+			const globalBasis = tableDefaults.mobileBreakpointBasis;
+			return globalBasis === void 0 ? "viewport" : get$1(globalBasis);
+		});
+		const isMobile = computed(() => {
+			const breakpoint = get$1(resolvedMobileBreakpoint);
+			if (breakpoint === void 0) return __props.mobile;
+			if (__props.mobile) return true;
+			return (get$1(resolvedMobileBasis) === "container" ? get$1(containerWidth) || get$1(windowWidth) : get$1(windowWidth)) < breakpoint;
+		});
+		const stickyHeaderOffset = computed(() => __props.stickyOffset !== void 0 ? __props.stickyOffset : get$1(tableDefaults.stickyOffset));
+		const isNestedTable = useDataTableNested();
+		provideDataTableNested();
+		const stickyMobileToolbar = computed(() => __props.stickyHeader && get$1(isMobile) && !isNestedTable);
 		const table = useTemplateRef("table");
 		const tableScroller = useTemplateRef("tableScroller");
 		const { stick } = useStickyTableHeader(() => __props.stickyHeader, stickyHeaderOffset, {
@@ -149,11 +168,10 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			pagination,
 			emitUpdateOptions
 		});
-		const { groupKeys, groupKey, grouped, isExpandedGroup, isHiddenRow, onToggleExpandGroup, onUngroup, onCopyGroup } = useTableGrouping({ rowAttr: __props.rowAttr }, {
+		const { groupKeys, groupKey, grouped, isExpandedGroup, isHiddenRow, onToggleExpandGroup, onUngroup } = useTableGrouping({ rowAttr: __props.rowAttr }, {
 			group,
 			collapsed,
-			sorted,
-			emitCopyGroup: (value) => emit("copy:group", value)
+			sorted
 		});
 		const { paginationData, filtered, setInternalTotal, resetPagination } = useTablePagination({
 			itemsPerPage: __props.itemsPerPage,
@@ -167,7 +185,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			emitUpdateOptions,
 			tableDefaults
 		});
-		const noData = computed(() => get(filtered).length === 0);
+		const noData = computed(() => get$1(filtered).length === 0);
 		const { columns, colspan, headerSlots, cellValue } = useTableColumns({
 			cols: () => __props.cols,
 			columnAttr: __props.columnAttr,
@@ -175,8 +193,12 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			expandable,
 			groupKeys,
 			selectedData,
-			slots
+			slots,
+			isMobile,
+			tdResolver: (options) => get$1(ui).td(options)
 		});
+		const showMobileSort = computed(() => get$1(isMobile) && !!get$1(sortData) && get$1(columns).some((column) => column.sortable));
+		const itemSlotKeys = new Set(Object.keys(slots).filter((key) => key.startsWith(ITEM_SLOT_PREFIX)).map((key) => key.slice(5)));
 		const { isAllSelected, indeterminate, isSelected, isDisabledRow, onToggleAll, onSelect, onCheckboxClick, deselectRemovedRows, resetCheckboxShiftState } = useTableSelection({
 			rowAttr: __props.rowAttr,
 			multiPageSelect: __props.multiPageSelect,
@@ -191,7 +213,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			resetCheckboxShiftState();
 		}
 		function onPaginate() {
-			if (get(expanded)) set(expanded, []);
+			if ((get$1(expanded)?.length ?? 0) > 0) set$1(expanded, []);
 			if (!__props.multiPageSelect) onToggleAll(false);
 			resetCheckboxShiftState();
 		}
@@ -205,25 +227,76 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			setInternalTotal(items);
 		});
 		onMounted(() => {
-			setInternalTotal(get(sorted));
+			setInternalTotal(get$1(sorted));
 		});
 		const ui = computed(() => dataTableStyles({
 			outlined: __props.outlined,
 			rounded: __props.rounded,
 			dense: __props.dense,
-			striped: __props.striped
+			striped: __props.striped,
+			mobile: get$1(isMobile)
 		}));
+		provideDataTableContext({
+			classes: computed(() => {
+				const s = get$1(ui);
+				return {
+					td: s.td(),
+					tr: s.tr(),
+					trSelected: s.tr({ rowVariant: "selected" }),
+					trExpandable: s.tr({ rowVariant: "expandable" }),
+					trGroup: s.tr({ rowVariant: "group" }),
+					trEmpty: s.tr({ rowVariant: "empty" }),
+					checkbox: s.checkbox(),
+					tbody: s.tbody(),
+					tbodyLoader: s.tbodyLoader(),
+					tbodyLoaderContent: s.tbodyLoaderContent()
+				};
+			}),
+			columns,
+			colspan,
+			expandable,
+			groupKey,
+			isMobile,
+			selectedData,
+			cellValue,
+			columnAttr: __props.columnAttr,
+			dense: __props.dense,
+			getRowId: (row) => row[__props.rowAttr],
+			itemSlotKeys,
+			groupExpandButtonPosition: __props.groupExpandButtonPosition,
+			isDisabledRow,
+			isExpanded,
+			isExpandedGroup,
+			isSelected,
+			itemClass: __props.itemClass,
+			onCheckboxClick,
+			onCopyGroup: (header) => emit("copy:group", {
+				key: get$1(groupKey) ?? "",
+				value: header.group
+			}),
+			onSelect,
+			onToggleExpand,
+			onToggleExpandGroup,
+			onUngroup
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref_key: "tableWrapper",
+				ref: tableWrapper,
 				class: normalizeClass(unref(ui).wrapper()),
 				"data-id": "table-wrapper"
 			}, [
-				unref(paginationData) && !__props.hideDefaultHeader ? (openBlock(), createBlock(RuiTablePagination_default, {
+				createElementVNode("div", {
+					class: normalizeClass(unref(stickyMobileToolbar) ? "sticky z-10 bg-white dark:bg-[#121212] pt-2" : "contents"),
+					style: normalizeStyle(unref(stickyMobileToolbar) ? { top: `${unref(stickyHeaderOffset) ?? 0}px` } : void 0),
+					"data-id": "table-mobile-toolbar-sticky"
+				}, [unref(paginationData) && !__props.hideDefaultHeader ? (openBlock(), createBlock(RuiTablePagination_default, {
 					key: 0,
 					modelValue: unref(paginationData),
 					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => isRef(paginationData) ? paginationData.value = $event : null), _cache[1] || (_cache[1] = ($event) => onPaginate())],
 					dense: __props.dense,
 					loading: __props.loading,
+					mobile: unref(isMobile),
 					"disable-per-page": __props.disablePerPage,
 					"ranges-threshold": __props.rangesThreshold,
 					"data-id": "table-pagination"
@@ -231,13 +304,25 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					"modelValue",
 					"dense",
 					"loading",
+					"mobile",
 					"disable-per-page",
 					"ranges-threshold"
-				])) : createCommentVNode("", true),
+				])) : createCommentVNode("", true), unref(showMobileSort) ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(RuiDataTableMobileSort_default, {
+					columns: unref(columns),
+					"column-attr": __props.columnAttr,
+					"sorted-map": unref(sortedMap),
+					dense: __props.dense,
+					onSort: _cache[2] || (_cache[2] = ($event) => onSort($event))
+				}, null, 8, [
+					"columns",
+					"column-attr",
+					"sorted-map",
+					"dense"
+				])])) : createCommentVNode("", true)], 6),
 				createElementVNode("div", {
 					ref_key: "tableScroller",
 					ref: tableScroller,
-					class: normalizeClass(unref(ui).scroller()),
+					class: normalizeClass([unref(ui).scroller(), unref(isMobile) && !unref(showMobileSort) ? "pt-2" : ""]),
 					"data-id": "table-scroller"
 				}, [createElementVNode("table", {
 					ref_key: "table",
@@ -245,7 +330,8 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					class: normalizeClass(unref(ui).table()),
 					"aria-busy": __props.loading
 				}, [
-					createVNode(RuiTableHead_default, {
+					!unref(isMobile) ? (openBlock(), createBlock(RuiTableHead_default, {
+						key: 0,
 						loading: __props.loading,
 						indeterminate: unref(indeterminate),
 						"capitalize-headers": !__props.cols,
@@ -255,14 +341,13 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 						dense: __props.dense,
 						"disable-check-all": !unref(filtered)?.length,
 						"is-all-selected": unref(isAllSelected),
-						"no-data": unref(noData),
 						selectable: !!selectedData.value,
 						"sort-data": unref(sortData),
 						"sorted-map": unref(sortedMap),
 						stick: unref(stick),
 						"sticky-header": __props.stickyHeader,
-						onSort: _cache[2] || (_cache[2] = ($event) => onSort($event)),
-						"onSelect:all": _cache[3] || (_cache[3] = ($event) => unref(onToggleAll)($event))
+						onSort: _cache[3] || (_cache[3] = ($event) => onSort($event)),
+						"onSelect:all": _cache[4] || (_cache[4] = ($event) => unref(onToggleAll)($event))
 					}, createSlots({ _: 2 }, [renderList(unref(headerSlots), (headerSlot) => {
 						return {
 							name: headerSlot,
@@ -278,22 +363,20 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 						"dense",
 						"disable-check-all",
 						"is-all-selected",
-						"no-data",
 						"selectable",
 						"sort-data",
 						"sorted-map",
 						"stick",
 						"sticky-header"
-					]),
-					__props.stickyHeader ? (openBlock(), createBlock(RuiTableHead_default, {
-						key: 0,
+					])) : createCommentVNode("", true),
+					__props.stickyHeader && !unref(isMobile) ? (openBlock(), createBlock(RuiTableHead_default, {
+						key: 1,
 						loading: __props.loading,
 						"capitalize-headers": !__props.cols,
 						colspan: unref(colspan),
 						"column-attr": __props.columnAttr,
 						columns: unref(columns),
 						dense: __props.dense,
-						"no-data": unref(noData),
 						selectable: !!selectedData.value,
 						"sort-data": unref(sortData),
 						"sorted-map": unref(sortedMap),
@@ -311,187 +394,72 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 						"column-attr",
 						"columns",
 						"dense",
-						"no-data",
 						"selectable",
 						"sort-data",
 						"sorted-map"
 					])) : createCommentVNode("", true),
-					createElementVNode("tbody", { class: normalizeClass(unref(ui).tbody()) }, [
-						slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", {
-							key: 0,
-							colspan: unref(colspan)
-						}) : createCommentVNode("", true),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filtered), (row, index) => {
-							return openBlock(), createElementBlock(Fragment, null, [!unref(isRow)(row) ? (openBlock(), createElementBlock("tr", {
-								key: `row-${index}`,
-								class: normalizeClass([unref(ui).tr({ rowVariant: "group" })]),
-								"data-id": "row-group"
-							}, [renderSlot(_ctx.$slots, "group.header", {
-								colspan: unref(colspan),
-								header: row,
-								isOpen: unref(isExpandedGroup)(row.group),
-								toggle: () => unref(onToggleExpandGroup)(row.group, row.identifier)
-							}, () => [createElementVNode("td", {
-								class: normalizeClass([[unref(ui).td()], "!p-2"]),
-								colspan: unref(colspan)
-							}, [createElementVNode("div", _hoisted_3, [
-								__props.groupExpandButtonPosition === "start" ? (openBlock(), createBlock(RuiExpandButton_default, {
-									key: 0,
-									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),
-									header: row
-								}, () => [createElementVNode("span", null, toDisplayString(unref(groupKey)) + ": " + toDisplayString(row.identifier), 1), createVNode(RuiButton_default, {
-									size: "sm",
-									variant: "text",
-									icon: "",
-									"data-id": "group-copy-button",
-									onClick: ($event) => unref(onCopyGroup)({
-										key: unref(groupKey),
-										value: row.group
-									})
-								}, {
-									default: withCtx(() => [createVNode(RuiIcon_default, {
-										name: "lu-copy",
-										size: "16"
-									})]),
-									_: 1
-								}, 8, ["onClick"])]),
-								createVNode(RuiTooltip_default, {
-									options: { placement: "top" },
-									class: "ml-auto mr-2"
-								}, {
-									activator: withCtx(() => [createVNode(RuiButton_default, {
-										size: "sm",
-										variant: "text",
-										icon: "",
-										"data-id": "group-ungroup-button",
-										onClick: _cache[4] || (_cache[4] = ($event) => unref(onUngroup)())
-									}, {
-										default: withCtx(() => [createVNode(RuiIcon_default, {
-											name: "lu-trash-2",
-											size: "14"
-										})]),
-										_: 1
-									})]),
-									default: withCtx(() => [_cache[7] || (_cache[7] = createTextVNode(" Ungroup ", -1))]),
-									_: 1
-								}),
-								__props.groupExpandButtonPosition === "end" ? (openBlock(), createBlock(RuiExpandButton_default, {
-									key: 1,
-									expanded: unref(isExpandedGroup)(row.group),
-									onClick: ($event) => unref(onToggleExpandGroup)(row.group, row.identifier)
-								}, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
-							])], 10, _hoisted_2)])], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [(openBlock(), createElementBlock("tr", {
-								key: `row-${index}`,
-								class: normalizeClass([unref(ui).tr({ rowVariant: unref(isSelected)(row[__props.rowAttr]) ? "selected" : void 0 }), typeof __props.itemClass === "string" ? __props.itemClass : __props.itemClass(row)]),
-								"aria-selected": selectedData.value ? unref(isSelected)(row[__props.rowAttr]) : void 0,
-								"data-id": "row"
-							}, [selectedData.value ? (openBlock(), createElementBlock("td", {
-								key: 0,
-								class: normalizeClass(unref(ui).checkbox()),
-								colspan: "1",
-								rowspan: "1"
-							}, [createVNode(RuiCheckbox_default, {
-								"data-id": `table-toggle-check-${index}`,
-								"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) => unref(onSelect)($event, row[__props.rowAttr], true),
-								onClick: ($event) => unref(onCheckboxClick)($event, row[__props.rowAttr], index)
-							}, null, 8, [
-								"data-id",
-								"model-value",
-								"disabled",
-								"size",
-								"onUpdate:modelValue",
-								"onClick"
-							])], 2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns), (column, subIndex) => {
-								return openBlock(), createElementBlock("td", {
-									key: subIndex,
-									class: normalizeClass([unref(ui).td({ class: unref(getAlignClass)(column.align) }), column.cellClass]),
-									colspan: column.colspan ?? 1,
-									rowspan: column.rowspan ?? 1
-								}, [column.key === "expand" ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
-									key: 0,
-									column,
-									row,
-									index
-								}, () => [!slots["item.expand"] ? (openBlock(), createBlock(RuiExpandButton_default, {
-									key: 0,
-									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,
-									column,
-									index,
-									row
-								}, () => [createTextVNode(toDisplayString(unref(cellValue)(row, column.key)), 1)])], 10, _hoisted_5);
-							}), 128))], 10, _hoisted_4)), unref(expandable) && !!_ctx.$slots["expanded-item"] && unref(isExpanded)(row[__props.rowAttr]) ? (openBlock(), createElementBlock("tr", {
-								key: `row-expand-${index}`,
-								class: normalizeClass(unref(ui).tr({ rowVariant: "expandable" })),
-								"data-id": "row-expanded"
-							}, [createElementVNode("td", {
-								colspan: unref(colspan),
-								class: normalizeClass([unref(ui).td()])
-							}, [renderSlot(_ctx.$slots, "expanded-item", {
-								row,
-								index
-							})], 10, _hoisted_6)], 2)) : createCommentVNode("", true)], 64))], 64);
-						}), 256)),
-						__props.loading && unref(noData) ? (openBlock(), createElementBlock("tr", _hoisted_7, [createElementVNode("td", {
-							class: normalizeClass(unref(ui).tbodyLoader()),
-							colspan: unref(colspan),
-							"data-id": "tbody-loader"
-						}, [createElementVNode("div", { class: normalizeClass(unref(ui).tbodyLoaderContent()) }, [createVNode(RuiProgress_default, {
-							color: "primary",
-							variant: "indeterminate",
-							circular: ""
-						})], 2)], 10, _hoisted_8)])) : createCommentVNode("", true),
-						unref(noData) && __props.empty && !__props.loading ? (openBlock(), createElementBlock("tr", {
-							key: 2,
-							class: normalizeClass(unref(ui).tr({ rowVariant: "empty" })),
-							"data-id": "row-empty"
-						}, [createVNode(Transition, {
-							appear: "",
-							"enter-active-class": "transition ease-out duration-200 delay-200",
-							"enter-from-class": "opacity-0 translate-y-1",
-							"enter-to-class": "opacity-100 translate-y-0",
-							"leave-active-class": "transition ease-in duration-150",
-							"leave-from-class": "opacity-100 translate-y-0",
-							"leave-to-class": "opacity-0 translate-y-1"
-						}, {
-							default: withCtx(() => [createElementVNode("td", {
-								class: normalizeClass(unref(ui).td()),
-								colspan: unref(colspan)
-							}, [renderSlot(_ctx.$slots, "no-data", {}, () => [createVNode(RuiTableEmptyState_default, {
-								label: __props.empty.label,
-								description: __props.empty.description
-							}, createSlots({ _: 2 }, [slots["empty-description"] ? {
-								name: "description",
-								fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
-								key: "0"
-							} : void 0]), 1032, ["label", "description"])])], 10, _hoisted_9)]),
-							_: 3
-						})], 2)) : createCommentVNode("", true),
-						slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", {
-							key: 3,
-							colspan: unref(colspan)
-						}) : createCommentVNode("", true)
-					], 2),
+					createVNode(RuiDataTableBody_default, {
+						filtered: unref(filtered),
+						loading: __props.loading,
+						"no-data": unref(noData),
+						empty: __props.empty
+					}, createSlots({ _: 2 }, [
+						slots["body.prepend"] ? {
+							name: "body.prepend",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "body.prepend", normalizeProps(guardReactiveProps(slotData)))]),
+							key: "0"
+						} : void 0,
+						slots["group.header"] ? {
+							name: "group.header",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header", normalizeProps(guardReactiveProps(slotData)))]),
+							key: "1"
+						} : void 0,
+						slots["group.header.content"] ? {
+							name: "group.header.content",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header.content", normalizeProps(guardReactiveProps(slotData)))]),
+							key: "2"
+						} : void 0,
+						renderList(unref(itemSlotKeys), (key) => {
+							return {
+								name: `item.${key}`,
+								fn: withCtx((slotData) => [renderSlot(_ctx.$slots, `item.${key}`, normalizeProps(guardReactiveProps(slotData)))])
+							};
+						}),
+						slots["expanded-item"] ? {
+							name: "expanded-item",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", normalizeProps(guardReactiveProps(slotData)))]),
+							key: "3"
+						} : void 0,
+						slots["no-data"] ? {
+							name: "no-data",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "no-data")]),
+							key: "4"
+						} : void 0,
+						slots["empty-description"] ? {
+							name: "empty-description",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
+							key: "5"
+						} : void 0,
+						slots["body.append"] ? {
+							name: "body.append",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "body.append", normalizeProps(guardReactiveProps(slotData)))]),
+							key: "6"
+						} : void 0
+					]), 1032, [
+						"filtered",
+						"loading",
+						"no-data",
+						"empty"
+					]),
 					createElementVNode("tfoot", null, [renderSlot(_ctx.$slots, "tfoot")])
-				], 10, _hoisted_1)], 2),
+				], 10, _hoisted_2)], 2),
 				unref(paginationData) && !__props.hideDefaultFooter ? (openBlock(), createBlock(RuiTablePagination_default, {
-					key: 1,
+					key: 0,
 					modelValue: unref(paginationData),
 					"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => isRef(paginationData) ? paginationData.value = $event : null), _cache[6] || (_cache[6] = ($event) => onPaginate())],
 					dense: __props.dense,
 					loading: __props.loading,
+					mobile: unref(isMobile),
 					"disable-per-page": __props.disablePerPage,
 					"ranges-threshold": __props.rangesThreshold,
 					"data-id": "table-pagination"
@@ -499,6 +467,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					"modelValue",
 					"dense",
 					"loading",
+					"mobile",
 					"disable-per-page",
 					"ranges-threshold"
 				])) : createCommentVNode("", true)