@mantine-vue/table 3.0.0 → 3.1.0

package/cjs/index.cjs

@@ -149,6 +149,896 @@ var getDefaultColumnOrderIds = (tableOptions, reset = false) => {
 	];
 };
 //#endregion
+//#region src/server-grouping/serverGrouping.types.ts
+var MVT_SERVER_GROUPING_ROOT_PATH_ID = "__root__";
+//#endregion
+//#region src/utils/utils.ts
+var parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
+//#endregion
+//#region src/server-grouping/serverGroupingSelection.ts
+/** The server-grouping engine of a table, when server grouping is active. */
+var getServerGroupingManager = (table) => table._serverGrouping;
+/**
+* Record rows that the user may currently select: loaded records inside
+* expanded groups only (never group rows, never collapsed or unloaded
+* groups), filtered by `enableRowSelection`.
+*/
+var getServerGroupingSelectableRows = (table) => {
+	const manager = getServerGroupingManager(table);
+	if (!manager) return [];
+	const { enableRowSelection } = table.options;
+	return manager.getVisibleRecordRows().filter((row) => parseFromValuesOrFunc(enableRowSelection, row) !== false);
+};
+/** Whether one record row is selected, honoring exclude mode. */
+var isServerGroupingRecordSelected = (table, row) => {
+	const selectAll = getServerGroupingManager(table)?.getSelectAll();
+	if (selectAll?.active) return !selectAll.excludedRowIds.includes(row.id);
+	return !!table.getState().rowSelection?.[row.id];
+};
+/**
+* Header-checkbox state for a server-grouped table.
+*
+* In *include* mode `isAll` means "every selectable loaded record is
+* selected". In *exclude* mode ("all matching records") the selection is a
+* query, so the checkbox is checked, and turns indeterminate as soon as the
+* user unchecks individual rows.
+*/
+var getServerGroupingSelectionSummary = (table) => {
+	const rows = getServerGroupingSelectableRows(table);
+	const selectAll = getServerGroupingManager(table)?.getSelectAll() ?? {
+		active: false,
+		excludedRowIds: []
+	};
+	if (selectAll.active) {
+		const excludedVisible = rows.filter((row) => selectAll.excludedRowIds.includes(row.id)).length;
+		return {
+			excludedRowIds: selectAll.excludedRowIds,
+			isAll: selectAll.excludedRowIds.length === 0,
+			isSelectAllMatching: true,
+			isSome: selectAll.excludedRowIds.length > 0,
+			mode: "exclude",
+			selectableCount: rows.length,
+			selectedCount: rows.length - excludedVisible,
+			selectedRowIds: []
+		};
+	}
+	const rowSelection = table.getState().rowSelection ?? {};
+	const selectedCount = rows.filter((row) => rowSelection[row.id]).length;
+	const selectedRowIds = Object.keys(rowSelection).filter((rowId) => rowSelection[rowId]);
+	const isAll = rows.length > 0 && selectedCount === rows.length;
+	return {
+		excludedRowIds: [],
+		isAll,
+		isSelectAllMatching: false,
+		isSome: !isAll && selectedRowIds.length > 0,
+		mode: "include",
+		selectableCount: rows.length,
+		selectedCount,
+		selectedRowIds
+	};
+};
+/**
+* Everything a bulk action needs to send to the server.
+*
+* In exclude mode this is the query plus the user's deselections — no row ids
+* are transferred, so it scales to millions of matching records.
+*/
+var getServerGroupingSelectionPayload = (table) => {
+	const manager = getServerGroupingManager(table);
+	const summary = getServerGroupingSelectionSummary(table);
+	const tableState = table.getState();
+	return {
+		columnFilters: tableState.columnFilters ?? [],
+		excludedRowIds: summary.excludedRowIds,
+		globalFilter: tableState.globalFilter,
+		grouping: manager?.getGroupingFields() ?? [],
+		mode: summary.mode,
+		rowIds: summary.selectedRowIds,
+		sorting: tableState.sorting ?? []
+	};
+};
+/**
+* Header-checkbox toggle.
+*
+* - **Checking** selects every loaded record inside expanded groups. Records in
+*   collapsed or unloaded groups are never implicitly selected.
+* - **Unchecking** clears the *entire* selection — including records whose
+*   group was collapsed since, and everything added by "select all matching
+*   records". Removing only the on-screen ids would leave invisible records
+*   selected while the header checkbox reads unchecked.
+*/
+var toggleAllServerGroupingRecordsSelected = (table, value) => {
+	const manager = getServerGroupingManager(table);
+	const summary = getServerGroupingSelectionSummary(table);
+	if (!(value ?? !(summary.isAll || summary.isSelectAllMatching))) {
+		manager?.setSelectAll({
+			active: false,
+			excludedRowIds: []
+		});
+		table.setRowSelection({});
+		return;
+	}
+	if (summary.isSelectAllMatching) {
+		manager?.setSelectAll({
+			active: true,
+			excludedRowIds: []
+		});
+		return;
+	}
+	const rows = getServerGroupingSelectableRows(table);
+	table.setRowSelection((prev) => {
+		const selection = { ...prev };
+		rows.forEach((row) => {
+			selection[row.id] = true;
+		});
+		return selection;
+	});
+};
+/** Deselect the given record ids (used by `selection.clearOnCollapse`). */
+var deselectServerGroupingRecords = (table, rowIds) => {
+	if (!rowIds.length) return;
+	table.setRowSelection((prev) => {
+		const selection = { ...prev };
+		rowIds.forEach((rowId) => delete selection[rowId]);
+		return selection;
+	});
+};
+/**
+* Toggle a single server-grouping record.
+*
+* Provider rows live outside the table's row model (`data` is empty), so
+* `row.toggleSelected()` — which resolves the row through `table.getRow()` —
+* would throw. Selection state is mutated directly instead.
+*
+* Supports shift-click range selection across the loaded records currently on
+* screen, matching the behavior of a regular MVT table.
+*/
+var toggleServerGroupingRecordSelected = (table, row, value, options) => {
+	const manager = getServerGroupingManager(table);
+	const rows = getServerGroupingSelectableRows(table);
+	const targetIds = new Set([row.id]);
+	if (options?.batch && options.lastSelectedRowId) {
+		const lastIndex = rows.findIndex((candidate) => candidate.id === options.lastSelectedRowId);
+		const currentIndex = rows.findIndex((candidate) => candidate.id === row.id);
+		if (lastIndex !== -1 && currentIndex !== -1) {
+			const [start, end] = lastIndex < currentIndex ? [lastIndex, currentIndex] : [currentIndex, lastIndex];
+			for (let index = start; index <= end; index++) targetIds.add(rows[index].id);
+		}
+	}
+	const selectAll = manager?.getSelectAll();
+	if (selectAll?.active) {
+		const excluded = new Set(selectAll.excludedRowIds);
+		targetIds.forEach((rowId) => {
+			if (value) excluded.delete(rowId);
+			else excluded.add(rowId);
+		});
+		manager.setSelectAll({
+			active: true,
+			excludedRowIds: [...excluded]
+		});
+		return;
+	}
+	table.setRowSelection((prev) => {
+		const selection = { ...prev };
+		targetIds.forEach((rowId) => {
+			if (value) selection[rowId] = true;
+			else delete selection[rowId];
+		});
+		return selection;
+	});
+};
+/**
+* Opt-in "select all matching records" action: asks the consumer-provided
+* `serverGrouping.selection.loadAllMatchingRowIds` for every row id matching
+* the current filters (across all groups and pages) and selects them.
+*/
+var selectAllMatchingServerGroupingRecords = async (table) => {
+	const manager = getServerGroupingManager(table);
+	if (!manager) return;
+	const selectionOptions = manager.options.selection;
+	if ((selectionOptions?.selectAllMode ?? "query") === "query") {
+		table.setRowSelection({});
+		manager.setSelectAll({
+			active: true,
+			excludedRowIds: []
+		});
+		return;
+	}
+	const loadAllMatchingRowIds = selectionOptions?.loadAllMatchingRowIds;
+	if (!loadAllMatchingRowIds) return;
+	const tableState = table.getState();
+	const rowIds = await loadAllMatchingRowIds({
+		columnFilters: tableState.columnFilters ?? [],
+		globalFilter: tableState.globalFilter,
+		grouping: manager.getGroupingFields(),
+		sorting: tableState.sorting ?? [],
+		table
+	});
+	table.setRowSelection((prev) => {
+		const selection = { ...prev };
+		rowIds.forEach((rowId) => {
+			selection[rowId] = true;
+		});
+		return selection;
+	});
+};
+//#endregion
+//#region src/server-grouping/serverGrouping.utils.ts
+/**
+* Escape a path segment part so group ids may safely contain the reserved
+* characters `/` and `:` (and `%`, used for escaping).
+*/
+var escapeServerGroupPathPart = (part) => part.replace(/%/g, "%25").replace(/:/g, "%3A").replace(/\//g, "%2F");
+var unescapeServerGroupPathPart = (part) => part.replace(/%2F/g, "/").replace(/%3A/g, ":").replace(/%25/g, "%");
+/**
+* Build the stable path id of a group's content, e.g.
+* `createServerGroupPathId('__root__', 'country', 'BH')` → `'country:BH'` and
+* `createServerGroupPathId('country:BH', 'salesperson', '42')` →
+* `'country:BH/salesperson:42'`. Never derived from row indexes.
+*/
+var createServerGroupPathId = (parentPathId, field, groupId) => {
+	const segment = `${escapeServerGroupPathPart(field)}:${escapeServerGroupPathPart(groupId)}`;
+	return parentPathId === "__root__" ? segment : `${parentPathId}/${segment}`;
+};
+/** Parse a path id back into its `{ field, groupId }` segments. Root → `[]`. */
+var parseServerGroupPathId = (pathId) => {
+	if (pathId === "__root__") return [];
+	return pathId.split("/").map((segment) => {
+		const separatorIndex = segment.indexOf(":");
+		return {
+			field: unescapeServerGroupPathPart(segment.slice(0, separatorIndex)),
+			groupId: unescapeServerGroupPathPart(segment.slice(separatorIndex + 1))
+		};
+	});
+};
+/** Depth of the content addressed by a path id (root → 0). */
+var getServerGroupPathDepth = (pathId) => pathId === "__root__" ? 0 : pathId.split("/").length;
+/** Whether `pathId` equals `ancestorPathId` or is nested anywhere below it. */
+var isServerGroupPathOrDescendant = (pathId, ancestorPathId) => ancestorPathId === "__root__" || pathId === ancestorPathId || pathId.startsWith(`${ancestorPathId}/`);
+/** JSON replacer producing deterministic output for plain objects. */
+var stableReplacer = (_key, value) => {
+	if (value && typeof value === "object" && !Array.isArray(value)) return Object.keys(value).sort().reduce((acc, key) => {
+		acc[key] = value[key];
+		return acc;
+	}, {});
+	return value;
+};
+/**
+* Serialize cache key parts deterministically (object key order does not
+* affect the result).
+*/
+var serializeServerGroupingCacheKey = (parts) => JSON.stringify(parts, stableReplacer);
+/** Whether an error was caused by request cancellation (never shown as an error). */
+var isAbortError = (error) => error instanceof DOMException ? error.name === "AbortError" : error?.name === "AbortError";
+//#endregion
+//#region src/server-grouping/useMVT_ServerGrouping.ts
+var createMVT_ServerGroupingManager = (table, controlledExpandedReader, controlledSelectAllReader) => {
+	const serverGroupingOptions = table.options.serverGrouping;
+	if (!serverGroupingOptions?.provider || serverGroupingOptions.enabled === false) return;
+	const options = serverGroupingOptions;
+	const provider = options.provider;
+	const sortingMode = options.sortingMode ?? "independent";
+	const filteringMode = options.filteringMode ?? "shared";
+	const cacheOptions = {
+		enabled: options.cache?.enabled ?? false,
+		gcTime: options.cache?.gcTime ?? 3e5,
+		keepCollapsedGroups: options.cache?.keepCollapsedGroups ?? true,
+		staleTime: options.cache?.staleTime ?? 0
+	};
+	const configuredPageSize = options.pagination?.defaultPageSize ?? options.initialPageSize ?? 10;
+	let defaultPageSize = configuredPageSize;
+	if (!Number.isInteger(configuredPageSize) || configuredPageSize <= 0) {
+		console.warn(`[mantine-vue-table] serverGrouping page size ${JSON.stringify(configuredPageSize)} is invalid — expected a positive integer. Falling back to 10.`);
+		defaultPageSize = 10;
+	}
+	const pathStates = (0, vue.ref)({});
+	const internalExpanded = (0, vue.ref)(table.options.initialState?.serverGroupingExpanded ?? {});
+	const internalSelectAll = (0, vue.ref)(table.options.initialState?.serverGroupingSelectAll ?? {
+		active: false,
+		excludedRowIds: []
+	});
+	const nodeRegistry = /* @__PURE__ */ new Map();
+	const controllers = /* @__PURE__ */ new Map();
+	const versions = /* @__PURE__ */ new Map();
+	const cache = /* @__PURE__ */ new Map();
+	const rowCache = /* @__PURE__ */ new Map();
+	const readControlledExpanded = controlledExpandedReader ?? (() => table.options.state?.serverGroupingExpanded);
+	const isExpandedControlled = readControlledExpanded() !== void 0;
+	const getExpanded = () => readControlledExpanded() ?? internalExpanded.value;
+	const setExpanded = (updater) => {
+		const next = updater instanceof Function ? updater(getExpanded()) : updater;
+		const onChange = table.options.onServerGroupingExpandedChange;
+		if (onChange) onChange(next);
+		if (!isExpandedControlled) internalExpanded.value = next;
+	};
+	const isExpanded = (pathId) => getExpanded()[pathId] === true;
+	const readControlledSelectAll = controlledSelectAllReader ?? (() => table.options.state?.serverGroupingSelectAll);
+	const isSelectAllControlled = readControlledSelectAll() !== void 0;
+	const getSelectAll = () => readControlledSelectAll() ?? internalSelectAll.value;
+	const setSelectAll = (updater) => {
+		const next = updater instanceof Function ? updater(getSelectAll()) : updater;
+		table.options.onServerGroupingSelectAllChange?.(next);
+		if (!isSelectAllControlled) internalSelectAll.value = next;
+	};
+	/** The "all matching" selection is tied to the query it was made under. */
+	const resetSelectAll = () => {
+		if (getSelectAll().active || getSelectAll().excludedRowIds.length) setSelectAll({
+			active: false,
+			excludedRowIds: []
+		});
+	};
+	const getGroupingFields = () => options.grouping ?? table.getState().grouping ?? [];
+	const setPathState = (pathId, state) => {
+		pathStates.value = {
+			...pathStates.value,
+			[pathId]: state
+		};
+	};
+	const getPathState = (pathId) => pathStates.value[pathId];
+	/**
+	* Table rows for one loaded record page. Rows are created (and cached) here
+	* rather than in the renderer so row ids — and therefore selection state —
+	* have a single source of truth shared by the body, the header checkbox, and
+	* the public selection APIs.
+	*/
+	const getRecordRows = (pathId) => {
+		const state = getPathState(pathId);
+		if (!state || state.kind !== "records" || !state.rows) return [];
+		const cached = rowCache.get(pathId);
+		if (cached && cached.source === state.rows) return cached.rows;
+		const depth = getServerGroupPathDepth(pathId);
+		const rows = state.rows.map((original, index) => {
+			return (0, _tanstack_vue_table.createRow)(table, provider.getRowId?.(original) ?? table.options.getRowId?.(original, index, void 0) ?? `${pathId}::${index}`, original, index, depth);
+		});
+		rowCache.set(pathId, {
+			rows,
+			source: state.rows
+		});
+		return rows;
+	};
+	/**
+	* Every loaded record row that is currently visible — i.e. inside expanded
+	* groups on the current pages. Records in collapsed or never-loaded groups
+	* are deliberately excluded, so selection can never reach them.
+	*/
+	const getVisibleRecordRows = () => Object.keys(pathStates.value).filter((pathId) => pathStates.value[pathId]?.kind === "records" && isPathVisible(pathId)).flatMap((pathId) => getRecordRows(pathId));
+	const getNode = (pathId) => {
+		const item = nodeRegistry.get(pathId);
+		if (!item) return void 0;
+		return {
+			count: void 0,
+			id: item.id,
+			label: item.label,
+			meta: item.meta,
+			original: item.original,
+			value: item.value,
+			...item.__node
+		};
+	};
+	const getParentItems = (pathId) => {
+		if (pathId === "__root__") return [];
+		const segments = pathId.split("/");
+		const items = [];
+		for (let index = 0; index < segments.length; index++) {
+			const ancestorPathId = segments.slice(0, index + 1).join("/");
+			const item = nodeRegistry.get(ancestorPathId);
+			if (item) items.push(item);
+		}
+		return items;
+	};
+	const getEffectiveSorting = (pathId, kind) => {
+		const override = getPathState(pathId)?.sorting;
+		if (override) return override;
+		const tableSorting = table.getState().sorting ?? [];
+		if (sortingMode === "shared") return tableSorting;
+		if (sortingMode === "records-only") return kind === "records" ? tableSorting : [];
+		return pathId === "__root__" ? tableSorting : [];
+	};
+	const getEffectiveFilters = (pathId, kind) => {
+		const state = getPathState(pathId);
+		if (state?.columnFilters || state?.globalFilter !== void 0) return {
+			columnFilters: state.columnFilters ?? [],
+			globalFilter: state.globalFilter
+		};
+		if (filteringMode === "independent") return {
+			columnFilters: [],
+			globalFilter: void 0
+		};
+		if (filteringMode === "records-only" && kind !== "records") return {
+			columnFilters: [],
+			globalFilter: void 0
+		};
+		const tableState = table.getState();
+		return {
+			columnFilters: tableState.columnFilters ?? [],
+			globalFilter: tableState.globalFilter
+		};
+	};
+	const isRootPath = (pathId) => pathId === MVT_SERVER_GROUPING_ROOT_PATH_ID;
+	const getDefaultPagination = () => ({
+		pageIndex: 0,
+		pageSize: defaultPageSize
+	});
+	/**
+	* Effective pagination of a path. The root level is driven by the table's
+	* own `pagination` state, so the standard bottom toolbar (page navigation +
+	* rows-per-page) controls it exactly like an ungrouped server-side table.
+	* Nested levels keep their own independent, fixed-page-size state.
+	*/
+	const getEffectivePagination = (pathId) => {
+		if (isRootPath(pathId)) {
+			const { pageIndex, pageSize } = table.getState().pagination;
+			return {
+				...getPathState(pathId)?.pagination,
+				pageIndex,
+				pageSize
+			};
+		}
+		return getPathState(pathId)?.pagination ?? getDefaultPagination();
+	};
+	/** Reset a path to page 0. Returns `true` when it triggered a root reload. */
+	const resetPageIndex = (pathId) => {
+		if (isRootPath(pathId)) {
+			const { pageIndex } = table.getState().pagination;
+			if (pageIndex === 0) return false;
+			table.setPageIndex(0);
+			return true;
+		}
+		const state = getPathState(pathId);
+		if (state) setPathState(pathId, {
+			...state,
+			pagination: {
+				...state.pagination,
+				cursor: void 0,
+				pageIndex: 0
+			}
+		});
+		return false;
+	};
+	const buildRequest = (pathId, kind, signal) => {
+		const grouping = getGroupingFields();
+		const depth = getServerGroupPathDepth(pathId);
+		const parentGroups = getParentItems(pathId);
+		const { columnFilters, globalFilter } = getEffectiveFilters(pathId, kind);
+		const base = {
+			columnFilters,
+			depth,
+			globalFilter,
+			grouping,
+			pagination: getEffectivePagination(pathId),
+			parentGroup: parentGroups.at(-1),
+			parentGroups,
+			pathId,
+			signal,
+			sorting: getEffectiveSorting(pathId, kind),
+			table
+		};
+		return kind === "groups" ? {
+			...base,
+			groupingField: grouping[depth]
+		} : base;
+	};
+	const getCacheKey = (request) => serializeServerGroupingCacheKey([
+		request.pathId,
+		request.grouping,
+		request.depth,
+		request.pagination,
+		request.sorting,
+		request.columnFilters,
+		request.globalFilter ?? null,
+		...provider.getCacheKey?.(request) ?? []
+	]);
+	const gcCache = () => {
+		const now = Date.now();
+		cache.forEach((entry, key) => {
+			if (now - entry.updatedAt > cacheOptions.gcTime) cache.delete(key);
+		});
+	};
+	const load = (pathId) => {
+		const grouping = getGroupingFields();
+		const depth = getServerGroupPathDepth(pathId);
+		const kind = depth >= grouping.length ? "records" : "groups";
+		const previous = getPathState(pathId);
+		const hasData = previous?.groups !== void 0 || previous?.rows !== void 0;
+		controllers.get(pathId)?.abort();
+		const controller = new AbortController();
+		controllers.set(pathId, controller);
+		const version = (versions.get(pathId) ?? 0) + 1;
+		versions.set(pathId, version);
+		const request = buildRequest(pathId, kind, controller.signal);
+		const isCurrent = () => versions.get(pathId) === version && !controller.signal.aborted;
+		let servedFromCache = false;
+		let cacheKey;
+		if (cacheOptions.enabled) {
+			cacheKey = getCacheKey(request);
+			const entry = cache.get(cacheKey);
+			if (entry) {
+				servedFromCache = true;
+				const fresh = Date.now() - entry.updatedAt <= cacheOptions.staleTime;
+				setPathState(pathId, {
+					...entry.payload,
+					columnFilters: previous?.columnFilters,
+					depth,
+					error: null,
+					globalFilter: previous?.globalFilter,
+					isFetching: !fresh,
+					isLoading: false,
+					pagination: request.pagination,
+					pathId,
+					sorting: previous?.sorting,
+					updatedAt: entry.updatedAt
+				});
+				if (entry.payload.kind === "groups") registerGroups(pathId, entry.payload.groups ?? [], grouping[depth], depth);
+				if (fresh) return;
+			}
+		}
+		if (!servedFromCache) setPathState(pathId, {
+			...previous,
+			columnFilters: previous?.columnFilters,
+			depth,
+			error: null,
+			groups: kind === "groups" ? previous?.groups : void 0,
+			isFetching: true,
+			isLoading: !hasData,
+			kind,
+			pagination: request.pagination,
+			pathId,
+			rowCount: previous?.rowCount ?? 0,
+			rows: kind === "records" ? previous?.rows : void 0,
+			sorting: previous?.sorting
+		});
+		const eventPayload = {
+			path: request.parentGroups,
+			pathId
+		};
+		options.onGroupLoadStart?.({
+			...eventPayload,
+			request
+		});
+		const promise = kind === "groups" ? provider.loadGroups(request) : provider.loadRecords(request);
+		Promise.resolve(promise).then((response) => {
+			if (!isCurrent()) return;
+			const updatedAt = Date.now();
+			let payload;
+			if (kind === "groups") {
+				const context = {
+					depth,
+					field: grouping[depth],
+					request
+				};
+				const groups = (provider.getGroups(response) ?? []).map((group) => ({
+					count: provider.getGroupCount?.(group, context),
+					hasChildren: provider.hasGroupChildren?.(group, context) ?? true,
+					id: provider.getGroupId(group, context),
+					label: provider.getGroupLabel(group, context),
+					meta: provider.getGroupMeta?.(group, context) ?? {},
+					original: group,
+					value: provider.getGroupValue ? provider.getGroupValue(group, context) : group
+				}));
+				registerGroups(pathId, groups, grouping[depth], depth);
+				payload = {
+					groups,
+					kind,
+					rowCount: provider.getGroupRowCount(response)
+				};
+				options.onGroupLoadSuccess?.({
+					...eventPayload,
+					groups,
+					request,
+					response
+				});
+			} else {
+				const rows = provider.getRecords(response) ?? [];
+				payload = {
+					kind,
+					rowCount: provider.getRecordRowCount(response),
+					rows
+				};
+				options.onRecordLoadSuccess?.({
+					...eventPayload,
+					request,
+					response,
+					rows
+				});
+			}
+			setPathState(pathId, {
+				...getPathState(pathId),
+				...payload,
+				error: null,
+				isFetching: false,
+				isLoading: false,
+				updatedAt
+			});
+			if (cacheOptions.enabled && cacheKey) {
+				cache.set(cacheKey, {
+					pathId,
+					payload,
+					updatedAt
+				});
+				gcCache();
+			}
+		}).catch((error) => {
+			if (!isCurrent() || isAbortError(error)) return;
+			setPathState(pathId, {
+				...getPathState(pathId),
+				error,
+				isFetching: false,
+				isLoading: false
+			});
+			options.onError?.({
+				...eventPayload,
+				error,
+				request
+			});
+		});
+	};
+	const registerGroups = (parentPathId, groups, field, depth) => {
+		groups.forEach((node) => {
+			const childPathId = createServerGroupPathId(parentPathId, field, node.id);
+			const item = {
+				depth,
+				field,
+				id: node.id,
+				label: node.label,
+				meta: node.meta,
+				original: node.original,
+				value: node.value
+			};
+			item.__node = node;
+			nodeRegistry.set(childPathId, item);
+		});
+	};
+	const ensureLoaded = (pathId) => {
+		const state = getPathState(pathId);
+		if (!state || state.groups === void 0 && state.rows === void 0 && !state.isFetching) load(pathId);
+	};
+	const isPathVisible = (pathId) => {
+		if (pathId === "__root__") return true;
+		const segments = pathId.split("/");
+		for (let index = 0; index < segments.length; index++) if (!isExpanded(segments.slice(0, index + 1).join("/"))) return false;
+		return true;
+	};
+	const getLoadedVisiblePaths = () => Object.keys(pathStates.value).filter(isPathVisible);
+	const abortPathAndDescendants = (pathId) => {
+		controllers.forEach((controller, key) => {
+			if (!isServerGroupPathOrDescendant(key, pathId)) return;
+			controller.abort();
+			const state = getPathState(key);
+			if (state?.isFetching || state?.isLoading) setPathState(key, {
+				...state,
+				isFetching: false,
+				isLoading: false
+			});
+		});
+	};
+	const dropPathAndDescendants = (pathId) => {
+		const next = { ...pathStates.value };
+		Object.keys(next).forEach((key) => {
+			if (isServerGroupPathOrDescendant(key, pathId)) delete next[key];
+		});
+		pathStates.value = next;
+		cache.forEach((entry, key) => {
+			if (isServerGroupPathOrDescendant(entry.pathId, pathId)) cache.delete(key);
+		});
+		rowCache.forEach((_entry, key) => {
+			if (isServerGroupPathOrDescendant(key, pathId)) rowCache.delete(key);
+		});
+	};
+	const expand = (pathId) => {
+		if (isExpanded(pathId)) return;
+		setExpanded((prev) => ({
+			...prev,
+			[pathId]: true
+		}));
+	};
+	const collapse = (pathId) => {
+		if (!isExpanded(pathId)) return;
+		setExpanded((prev) => ({
+			...prev,
+			[pathId]: false
+		}));
+	};
+	const toggle = (pathId) => {
+		if (isExpanded(pathId)) collapse(pathId);
+		else expand(pathId);
+	};
+	const invalidate = (pathId) => {
+		if (pathId === void 0) cache.clear();
+		else cache.forEach((entry, key) => {
+			if (isServerGroupPathOrDescendant(entry.pathId, pathId)) cache.delete(key);
+		});
+	};
+	const reload = (pathId) => {
+		if (pathId !== void 0) {
+			invalidate(pathId);
+			if (getPathState(pathId)) load(pathId);
+			return;
+		}
+		invalidate();
+		getLoadedVisiblePaths().forEach((visiblePathId) => load(visiblePathId));
+	};
+	const retry = (pathId) => {
+		load(pathId);
+	};
+	const reset = () => {
+		controllers.forEach((controller) => controller.abort());
+		controllers.clear();
+		versions.clear();
+		nodeRegistry.clear();
+		cache.clear();
+		rowCache.clear();
+		pathStates.value = {};
+		if (options.resetExpansionOnGroupingChange !== false) setExpanded({});
+		load(MVT_SERVER_GROUPING_ROOT_PATH_ID);
+	};
+	const setPagination = (pathId, updater) => {
+		const previous = getEffectivePagination(pathId);
+		const next = updater instanceof Function ? updater(previous) : {
+			...previous,
+			...updater
+		};
+		if (isRootPath(pathId)) {
+			const state = getPathState(pathId);
+			if (state) setPathState(pathId, {
+				...state,
+				pagination: next
+			});
+			const current = table.getState().pagination;
+			if (current.pageIndex === next.pageIndex && current.pageSize === next.pageSize) load(pathId);
+			else table.setPagination({
+				pageIndex: next.pageIndex,
+				pageSize: next.pageSize
+			});
+			return;
+		}
+		const state = getPathState(pathId);
+		if (state) setPathState(pathId, {
+			...state,
+			pagination: next
+		});
+		else setPathState(pathId, {
+			depth: getServerGroupPathDepth(pathId),
+			error: null,
+			isFetching: false,
+			isLoading: false,
+			kind: getServerGroupPathDepth(pathId) >= getGroupingFields().length ? "records" : "groups",
+			pagination: next,
+			pathId,
+			rowCount: 0
+		});
+		load(pathId);
+	};
+	const setSorting = (pathId, updater) => {
+		const state = getPathState(pathId);
+		const previous = state?.sorting ?? [];
+		const next = updater instanceof Function ? updater(previous) : updater;
+		if (!state) return;
+		setPathState(pathId, {
+			...state,
+			sorting: next
+		});
+		if (!resetPageIndex(pathId)) load(pathId);
+	};
+	const setColumnFilters = (pathId, updater) => {
+		const state = getPathState(pathId);
+		if (!state) return;
+		const previous = state.columnFilters ?? [];
+		const next = updater instanceof Function ? updater(previous) : updater;
+		setPathState(pathId, {
+			...state,
+			columnFilters: next
+		});
+		if (!resetPageIndex(pathId)) load(pathId);
+	};
+	const setGlobalFilter = (pathId, value) => {
+		const state = getPathState(pathId);
+		if (!state) return;
+		setPathState(pathId, {
+			...state,
+			globalFilter: value
+		});
+		if (!resetPageIndex(pathId)) load(pathId);
+	};
+	const getState = () => ({
+		enabled: true,
+		expanded: getExpanded(),
+		grouping: getGroupingFields(),
+		paths: pathStates.value
+	});
+	(0, vue.watch)(() => ({ ...getExpanded() }), (next, prev) => {
+		Object.keys(next).forEach((pathId) => {
+			if (next[pathId] && !prev?.[pathId]) {
+				options.onGroupExpand?.({
+					group: getNode(pathId),
+					path: getParentItems(pathId),
+					pathId
+				});
+				ensureLoaded(pathId);
+			}
+		});
+		Object.keys(prev ?? {}).forEach((pathId) => {
+			if (prev?.[pathId] && !next[pathId]) {
+				options.onGroupCollapse?.({
+					group: getNode(pathId),
+					path: getParentItems(pathId),
+					pathId
+				});
+				abortPathAndDescendants(pathId);
+				if (options.selection?.clearOnCollapse) deselectServerGroupingRecords(table, Object.keys(pathStates.value).filter((key) => pathStates.value[key]?.kind === "records" && isServerGroupPathOrDescendant(key, pathId)).flatMap((key) => getRecordRows(key).map((row) => row.id)));
+				if (!cacheOptions.keepCollapsedGroups) dropPathAndDescendants(pathId);
+			}
+		});
+	});
+	(0, vue.watch)(() => JSON.stringify(getGroupingFields()), (next, prev) => {
+		if (next !== prev) {
+			resetSelectAll();
+			reset();
+		}
+	});
+	(0, vue.watch)(() => JSON.stringify([table.getState().columnFilters ?? [], table.getState().globalFilter ?? null]), (next, prev) => {
+		if (next === prev || filteringMode === "independent") return;
+		resetSelectAll();
+		invalidate();
+		getLoadedVisiblePaths().filter((pathId) => filteringMode === "shared" || getPathState(pathId)?.kind === "records").forEach((pathId) => {
+			setPathState(pathId, {
+				...getPathState(pathId),
+				groups: void 0,
+				rows: void 0
+			});
+			if (!resetPageIndex(pathId)) load(pathId);
+		});
+	});
+	(0, vue.watch)(() => JSON.stringify(table.getState().sorting ?? []), (next, prev) => {
+		if (next === prev) return;
+		getLoadedVisiblePaths().filter((pathId) => {
+			if (getPathState(pathId)?.sorting) return false;
+			if (sortingMode === "shared") return true;
+			if (sortingMode === "records-only") return getPathState(pathId)?.kind === "records";
+			return pathId === MVT_SERVER_GROUPING_ROOT_PATH_ID;
+		}).forEach((pathId) => {
+			if (!resetPageIndex(pathId)) load(pathId);
+		});
+	});
+	(0, vue.watch)(() => {
+		const { pageIndex, pageSize } = table.getState().pagination;
+		return `${pageIndex}:${pageSize}`;
+	}, (next, prev) => {
+		if (next !== prev) load(MVT_SERVER_GROUPING_ROOT_PATH_ID);
+	});
+	load(MVT_SERVER_GROUPING_ROOT_PATH_ID);
+	if ((0, vue.getCurrentScope)()) (0, vue.onScopeDispose)(() => {
+		controllers.forEach((controller) => controller.abort());
+		controllers.clear();
+	});
+	return {
+		collapse,
+		ensureLoaded,
+		expand,
+		getExpanded,
+		getGroupingFields,
+		getNode,
+		getParentItems,
+		getPathState,
+		getRecordRows,
+		getSelectAll,
+		getState,
+		getVisibleRecordRows,
+		invalidate,
+		isExpanded,
+		options,
+		reload,
+		reset,
+		retry,
+		setColumnFilters,
+		setExpanded,
+		setGlobalFilter,
+		setSelectAll,
+		setPagination,
+		setSorting,
+		toggle
+	};
+};
+//#endregion
 //#region src/utils/tanstack.helpers.ts
 /**
 * Vue equivalent of `@tanstack/react-table`'s `flexRender`.
@@ -178,9 +1068,6 @@ function createMVTColumnHelper() {
 }
 var createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => (0, _tanstack_vue_table.createRow)(table, "mvt-row-create", originalRow ?? Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({ [getColumnId(col)]: "" }))), rowIndex, depth, subRows, parentId);
 //#endregion
-//#region src/utils/utils.ts
-var parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
-//#endregion
 //#region src/components/MVT_TableSlots.ts
 var MVT_SLOTS_KEY = Symbol("MVT_Slots");
 /**
@@ -1002,6 +1889,7 @@ var getIsRankingRows = (table) => {
 };
 var getIsRowSelected = ({ row, table }) => {
 	const { options: { enableRowSelection } } = table;
+	if (getServerGroupingManager(table)) return isServerGroupingRecordSelected(table, row);
 	return row.getIsSelected() || parseFromValuesOrFunc(enableRowSelection, row) && row.getCanSelectSubRows() && row.getIsAllSubRowsSelected();
 };
 var getMVT_RowSelectionHandler = ({ renderedRowIndex = 0, row, table }) => (event, value) => {
@@ -1012,6 +1900,14 @@ var getMVT_RowSelectionHandler = ({ renderedRowIndex = 0, row, table }) => (even
 		row,
 		table
 	});
+	if (getServerGroupingManager(table)) {
+		toggleServerGroupingRecordSelected(table, row, value ?? !wasCurrentRowChecked, {
+			batch: !!enableBatchRowSelection && enableMultiRowSelection !== false && event.shiftKey,
+			lastSelectedRowId: lastSelectedRowId.value
+		});
+		lastSelectedRowId.value = row.id;
+		return;
+	}
 	row.toggleSelected(value ?? !wasCurrentRowChecked);
 	const changedRowIds = new Set([row.id]);
 	if (enableBatchRowSelection && enableMultiRowSelection && event.shiftKey && lastSelectedRowId.value !== null) {
@@ -1072,7 +1968,10 @@ var MVT_SelectCheckbox = (0, vue.defineComponent)({
 			const o = table.options;
 			const state = table.getState();
 			const selectAll = !row;
-			const checked = selectAll ? o.selectAllMode === "page" ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected() : getIsRowSelected({
+			const anyTable = table;
+			const serverGroupingSummary = selectAll && getServerGroupingManager(anyTable) ? getServerGroupingSelectionSummary(anyTable) : void 0;
+			const isServerGrouping = !!getServerGroupingManager(anyTable);
+			const checked = serverGroupingSummary ? serverGroupingSummary.isAll : selectAll ? o.selectAllMode === "page" ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected() : isServerGrouping && row ? isServerGroupingRecordSelected(anyTable, row) : getIsRowSelected({
 				row,
 				table
 			});
@@ -1088,11 +1987,11 @@ var MVT_SelectCheckbox = (0, vue.defineComponent)({
 				renderedRowIndex: props.renderedRowIndex,
 				row,
 				table
-			}) : getMVT_SelectAllHandler({ table });
+			}) : serverGroupingSummary ? (event) => toggleAllServerGroupingRecordsSelected(anyTable, event.target?.checked ?? !serverGroupingSummary.isAll) : getMVT_SelectAllHandler({ table });
 			const common = {
 				"aria-label": label,
 				checked,
-				disabled: state.isLoading || row && !row.getCanSelect() || row?.id === "mvt-row-create",
+				disabled: state.isLoading || row && !row.getCanSelect() || row?.id === "mvt-row-create" || serverGroupingSummary?.selectableCount === 0 && serverGroupingSummary.selectedRowIds.length === 0,
 				size: state.density === "xs" ? "sm" : "md",
 				...checkboxProps,
 				title: void 0,
@@ -1108,7 +2007,7 @@ var MVT_SelectCheckbox = (0, vue.defineComponent)({
 				}
 			};
 			const control = o.selectDisplayMode === "switch" ? (0, vue.h)(_mantine_vue_core.Switch, common) : o.selectDisplayMode === "radio" || o.enableMultiRowSelection === false ? (0, vue.h)(_mantine_vue_core.Radio, common) : (0, vue.h)(_mantine_vue_core.Checkbox, {
-				indeterminate: !checked && selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected() && row.getCanSelectSubRows(),
+				indeterminate: serverGroupingSummary ? serverGroupingSummary.isSome : !checked && selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected() && row.getCanSelectSubRows(),
 				...common
 			});
 			return (0, vue.h)(_mantine_vue_core.Tooltip, {
@@ -1238,12 +2137,14 @@ var MVT_Default_Icons = {
 //#region src/locales/en.ts
 var MVT_Localization_EN = {
 	actions: "Actions",
+	allMatchingRecordsSelected: "All records matching the current filters are selected",
 	and: "and",
 	cancel: "Cancel",
 	changeFilterMode: "Change filter mode",
 	changeSearchMode: "Change search mode",
 	clearFilter: "Clear filter",
 	clearSearch: "Clear search",
+	clearGrouping: "Clear grouping",
 	clearSelection: "Clear selection",
 	clearSort: "Clear sort",
 	clickToCopy: "Click to copy",
@@ -1254,6 +2155,7 @@ var MVT_Localization_EN = {
 	copiedToClipboard: "Copied to clipboard",
 	dropToGroupBy: "Drop to group by {column}",
 	edit: "Edit",
+	errorLoadingData: "Error loading data",
 	expand: "Expand",
 	expandAll: "Expand all",
 	filterArrIncludes: "Includes",
@@ -1286,13 +2188,18 @@ var MVT_Localization_EN = {
 	goToNextPage: "Go to next page",
 	goToPreviousPage: "Go to previous page",
 	grab: "Grab",
+	groupBy: "Group by",
 	groupByColumn: "Group by {column}",
 	groupedBy: "Grouped by ",
 	hideAll: "Hide all",
 	hideColumn: "Hide {column} column",
+	loading: "Loading…",
 	max: "Max",
 	min: "Min",
 	move: "Move",
+	moveDown: "Move down",
+	moveUp: "Move up",
+	noGroupableColumns: "No groupable columns",
 	noRecordsToDisplay: "No records to display",
 	noResultsFound: "No results found",
 	of: "of",
@@ -1302,6 +2209,7 @@ var MVT_Localization_EN = {
 	pinToRight: "Pin to right",
 	resetColumnSize: "Reset column size",
 	resetOrder: "Reset order",
+	retry: "Retry",
 	rowActions: "Row Actions",
 	rowNumber: "#",
 	rowNumbers: "Row Numbers",
@@ -1309,7 +2217,9 @@ var MVT_Localization_EN = {
 	save: "Save",
 	search: "Search",
 	selectedCountOfRowCountRowsSelected: "{selectedCount} of {rowCount} row(s) selected",
+	selectedCountRowsSelected: "{selectedCount} row(s) selected",
 	select: "Select",
+	selectAllMatching: "Select all matching records",
 	showAll: "Show all",
 	showAllColumns: "Show all columns",
 	showHideColumns: "Show/Hide columns",
@@ -1396,6 +2306,33 @@ var useMVT_TableOptions = (rawOptions) => {
 		manualPagination = true;
 		manualSorting = true;
 	}
+	if (rest.serverGrouping?.provider && rest.serverGrouping.enabled !== false) {
+		if (enableGrouping || rawOptions.manualGrouping) console.warn("[mantine-vue-table] `serverGrouping` cannot be combined with client-side `enableGrouping` or `manualGrouping`. Disable one of them — `serverGrouping` will take precedence for rendering.");
+		manualFiltering = true;
+		manualPagination = true;
+		manualSorting = true;
+		if (rawOptions.groupedColumnMode === void 0) rest.groupedColumnMode = false;
+		const configuredPageSize = rest.serverGrouping.pagination?.defaultPageSize ?? rest.serverGrouping.initialPageSize;
+		const seededPageSize = Number.isInteger(configuredPageSize) && configuredPageSize > 0 ? configuredPageSize : void 0;
+		if (seededPageSize && rawOptions.state?.pagination === void 0) rest.initialState = {
+			...rest.initialState,
+			pagination: {
+				pageIndex: rest.initialState?.pagination?.pageIndex ?? 0,
+				pageSize: rest.initialState?.pagination?.pageSize ?? seededPageSize
+			}
+		};
+		const { defaultGrouping } = rest.serverGrouping;
+		if (defaultGrouping?.length && !rest.serverGrouping.grouping && rawOptions.state?.grouping === void 0 && rest.initialState?.grouping === void 0) rest.initialState = {
+			...rest.initialState,
+			grouping: [...defaultGrouping]
+		};
+		const configuredFields = [...rest.serverGrouping.grouping ?? [], ...defaultGrouping ?? []];
+		if (configuredFields.length) {
+			const knownFields = new Set([...getAllLeafColumnDefs(rawOptions.columns).map((col) => getColumnId(col)), ...rest.serverGrouping.groupBy?.columns ?? []]);
+			const unknownFields = [...new Set(configuredFields)].filter((field) => !knownFields.has(field));
+			if (unknownFields.length) console.warn(`[mantine-vue-table] serverGrouping field(s) ${unknownFields.map((field) => `"${field}"`).join(", ")} do not match any column id. Custom backend descriptors are supported — declare them in \`serverGrouping.groupBy.columns\` to silence this warning and make them selectable in the group-by toolbar.`);
+		}
+	}
 	const definedOptions = {
 		aggregationFns,
 		autoResetExpanded,
@@ -1644,6 +2581,12 @@ var useMVT_TableInstance = (definedTableOptions) => {
 			get: getter
 		});
 	};
+	let serverGroupingManager;
+	defineState("serverGroupingExpanded", () => serverGroupingManager?.getExpanded() ?? {});
+	defineState("serverGroupingSelectAll", () => serverGroupingManager?.getSelectAll() ?? {
+		active: false,
+		excludedRowIds: []
+	});
 	defineState("columnFilterFns", () => columnFilterFns.value);
 	defineState("columnOrder", () => columnOrder.value);
 	defineState("columnSizingInfo", () => columnSizingInfo.value);
@@ -1746,6 +2689,58 @@ var useMVT_TableInstance = (definedTableOptions) => {
 	table.setShowColumnFilters = statefulTableOptions.onShowColumnFiltersChange ?? ((updater) => applyUpdater(showColumnFilters, updater));
 	table.setShowGlobalFilter = statefulTableOptions.onShowGlobalFilterChange ?? ((updater) => applyUpdater(showGlobalFilter, updater));
 	table.setShowToolbarDropZone = statefulTableOptions.onShowToolbarDropZoneChange ?? ((updater) => applyUpdater(showToolbarDropZone, updater));
+	serverGroupingManager = createMVT_ServerGroupingManager(table, () => userStateKeys.has("serverGroupingExpanded") ? readUserState().serverGroupingExpanded : void 0, () => userStateKeys.has("serverGroupingSelectAll") ? readUserState().serverGroupingSelectAll : void 0);
+	table._serverGrouping = serverGroupingManager;
+	if (serverGroupingManager) {
+		const readUserRowCount = Object.getOwnPropertyDescriptor(definedTableOptions, "rowCount")?.get;
+		Object.defineProperty(definedTableOptions, "rowCount", {
+			configurable: true,
+			enumerable: true,
+			get: () => readUserRowCount?.call(definedTableOptions) ?? serverGroupingManager?.getPathState("__root__")?.rowCount
+		});
+	}
+	table.getServerGroupingState = () => serverGroupingManager?.getState() ?? {
+		enabled: false,
+		expanded: {},
+		grouping: [],
+		paths: {}
+	};
+	table.getServerGroupingPathState = (pathId) => serverGroupingManager?.getPathState(pathId);
+	table.expandServerGroup = (pathId) => serverGroupingManager?.expand(pathId);
+	table.collapseServerGroup = (pathId) => serverGroupingManager?.collapse(pathId);
+	table.toggleServerGroup = (pathId) => serverGroupingManager?.toggle(pathId);
+	table.reloadServerGrouping = () => serverGroupingManager?.reload();
+	table.reloadServerGroupingPath = (pathId) => serverGroupingManager?.reload(pathId);
+	table.invalidateServerGrouping = () => serverGroupingManager?.invalidate();
+	table.invalidateServerGroupingPath = (pathId) => serverGroupingManager?.invalidate(pathId);
+	table.resetServerGroupingState = () => serverGroupingManager?.reset();
+	table.setServerGroupingExpanded = (updater) => serverGroupingManager?.setExpanded(updater);
+	table.setServerGroupingPagination = (pathId, pagination) => serverGroupingManager?.setPagination(pathId, pagination);
+	table.setServerGroupingSorting = (pathId, sorting) => serverGroupingManager?.setSorting(pathId, sorting);
+	table.setServerGroupingColumnFilters = (pathId, columnFilters) => serverGroupingManager?.setColumnFilters(pathId, columnFilters);
+	table.setServerGroupingGlobalFilter = (pathId, globalFilter) => serverGroupingManager?.setGlobalFilter(pathId, globalFilter);
+	table.getServerGroupingSelectionSummary = () => serverGroupingManager ? getServerGroupingSelectionSummary(table) : {
+		excludedRowIds: [],
+		isAll: false,
+		isSelectAllMatching: false,
+		isSome: false,
+		mode: "include",
+		selectableCount: 0,
+		selectedCount: 0,
+		selectedRowIds: []
+	};
+	table.toggleAllServerGroupingRecordsSelected = (value) => {
+		if (serverGroupingManager) toggleAllServerGroupingRecordsSelected(table, value);
+	};
+	table.selectAllMatchingServerGroupingRecords = async () => {
+		if (serverGroupingManager) await selectAllMatchingServerGroupingRecords(table);
+	};
+	table.getServerGroupingSelectAllState = () => serverGroupingManager?.getSelectAll() ?? {
+		active: false,
+		excludedRowIds: []
+	};
+	table.setServerGroupingSelectAllState = (updater) => serverGroupingManager?.setSelectAll(updater);
+	table.getServerGroupingSelectionPayload = () => getServerGroupingSelectionPayload(table);
 	table._mvtSlots = mvtSlots;
 	table.setMVTSlots = (slots) => {
 		mvtSlots.value = slots;
@@ -1848,10 +2843,10 @@ var MVT_TablePagination = (0, vue.defineComponent)({
 			const { rowsPerPageOptions = defaultRowsPerPage, showRowsPerPage = true, withEdges = showEdges, ...rest } = paginationProps;
 			const controls = o.paginationDisplayMode === "pages" ? (0, vue.h)(_mantine_vue_core.Pagination, {
 				total: numberOfPages,
-				value: pageIndex + 1,
+				modelValue: pageIndex + 1,
 				withEdges,
 				...rest,
-				onChange: (page) => table.setPageIndex(page - 1)
+				"onUpdate:modelValue": (page) => table.setPageIndex(page - 1)
 			}) : o.paginationDisplayMode === "default" ? [(0, vue.h)(_mantine_vue_core.Text, null, () => `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${o.localization.of} ${totalRowCount.toLocaleString()}`), (0, vue.h)(_mantine_vue_core.Group, { gap: 6 }, () => [
 				withEdges && (0, vue.h)(_mantine_vue_core.ActionIcon, {
 					"aria-label": o.localization.goToFirstPage,
@@ -1887,8 +2882,8 @@ var MVT_TablePagination = (0, vue.defineComponent)({
 				"aria-labelledby": "rpp-label",
 				class: MVT_TablePagination_module_default.pagesize,
 				data: rowsPerPageOptions,
-				value: pageSize.toString(),
-				onChange: (value) => value && table.setPageSize(+value)
+				modelValue: pageSize.toString(),
+				"onUpdate:modelValue": (value) => value && table.setPageSize(+value)
 			})]), controls]);
 		};
 	}
@@ -1928,26 +2923,50 @@ var MVT_ToolbarAlertBanner = (0, vue.defineComponent)({
 			const badgeProps = parseFromValuesOrFunc(o.mantineToolbarAlertBannerBadgeProps, { table });
 			const total = o.rowCount ?? table.getPrePaginationRowModel().flatRows.length;
 			const selectedCount = o.manualPagination ? Object.values(state.rowSelection).filter(Boolean).length : table.getFilteredSelectedRowModel().rows.length;
-			const selectedAlert = selectedCount ? (0, vue.h)(_mantine_vue_core.Flex, {
+			const serverGroupingSelection = o.serverGrouping?.selection;
+			const serverGroupingSummary = table._serverGrouping ? table.getServerGroupingSelectionSummary() : void 0;
+			const showSelectAllMatching = !!serverGroupingSelection?.enableSelectAllMatching && ((serverGroupingSelection.selectAllMode ?? "query") === "query" || !!serverGroupingSelection.loadAllMatchingRowIds) && !!serverGroupingSummary?.isAll && !serverGroupingSummary.isSelectAllMatching;
+			const serverGroupingListsRecords = !serverGroupingSummary || table.getServerGroupingPathState("__root__")?.kind === "records";
+			const selectedText = serverGroupingSummary?.isSelectAllMatching ? (o.localization.allMatchingRecordsSelected ?? "All records matching the current filters are selected") + (serverGroupingSummary.excludedRowIds.length ? ` (${serverGroupingSummary.excludedRowIds.length} excluded)` : "") : serverGroupingListsRecords ? o.localization.selectedCountOfRowCountRowsSelected.replace("{selectedCount}", String(selectedCount)).replace("{rowCount}", String(total)) : (o.localization.selectedCountRowsSelected ?? "{selectedCount} row(s) selected").replace("{selectedCount}", String(selectedCount));
+			const selectedAlert = selectedCount || serverGroupingSummary?.isSelectAllMatching ? (0, vue.h)(_mantine_vue_core.Flex, {
 				align: "center",
 				gap: "sm"
-			}, () => [o.localization.selectedCountOfRowCountRowsSelected.replace("{selectedCount}", String(selectedCount)).replace("{rowCount}", String(total)), (0, vue.h)(_mantine_vue_core.Button, {
-				size: "compact-xs",
-				variant: "subtle",
-				onClick: (event) => getMVT_SelectAllHandler({ table })(event, false, true)
-			}, () => o.localization.clearSelection)]) : null;
-			const groupedAlert = state.grouping.length ? (0, vue.h)(_mantine_vue_core.Flex, null, () => [`${o.localization.groupedBy} `, ...state.grouping.flatMap((columnId, index) => [index > 0 ? o.localization.thenBy : null, (0, vue.h)(_mantine_vue_core.Badge, {
-				key: columnId,
-				class: MVT_ToolbarAlertBanner_module_default["alert-badge"],
-				variant: "filled",
-				...badgeProps,
-				rightSection: (0, vue.h)(_mantine_vue_core.ActionIcon, {
-					color: "white",
-					size: "xs",
+			}, () => [
+				selectedText,
+				showSelectAllMatching && (0, vue.h)(_mantine_vue_core.Button, {
+					size: "compact-xs",
+					variant: "subtle",
+					onClick: () => void table.selectAllMatchingServerGroupingRecords()
+				}, () => o.localization.selectAllMatching ?? "Select all matching records"),
+				(0, vue.h)(_mantine_vue_core.Button, {
+					size: "compact-xs",
 					variant: "subtle",
-					onClick: () => table.getColumn(columnId).toggleGrouping()
-				}, () => (0, vue.h)(o.icons.IconX, { style: { transform: "scale(0.8)" } }))
-			}, () => `${table.getColumn(columnId).columnDef.header} `)])]) : null;
+					onClick: (event) => {
+						if (serverGroupingSummary) {
+							table.toggleAllServerGroupingRecordsSelected(false);
+							return;
+						}
+						getMVT_SelectAllHandler({ table })(event, false, true);
+					}
+				}, () => o.localization.clearSelection)
+			]) : null;
+			const groupedAlert = state.grouping.length ? (0, vue.h)(_mantine_vue_core.Flex, null, () => [`${o.localization.groupedBy} `, ...state.grouping.flatMap((columnId, index) => {
+				const column = table.getAllLeafColumns().find((col) => col.id === columnId);
+				const header = column?.columnDef.header;
+				const label = typeof header === "string" && header.length ? header : columnId;
+				return [index > 0 ? o.localization.thenBy : null, (0, vue.h)(_mantine_vue_core.Badge, {
+					key: columnId,
+					class: MVT_ToolbarAlertBanner_module_default["alert-badge"],
+					variant: "filled",
+					...badgeProps,
+					rightSection: (0, vue.h)(_mantine_vue_core.ActionIcon, {
+						color: "white",
+						size: "xs",
+						variant: "subtle",
+						onClick: () => column ? column.toggleGrouping() : table.setGrouping((prev) => prev.filter((field) => field !== columnId))
+					}, () => (0, vue.h)(o.icons.IconX, { style: { transform: "scale(0.8)" } }))
+				}, () => `${label} `)];
+			})]) : null;
 			const custom = slots.default?.({
 				groupedAlert,
 				selectedAlert,
@@ -2069,6 +3088,207 @@ var MVT_BottomToolbar = (0, vue.defineComponent)({
 		};
 	}
 });
+var MVT_ServerGrouping_module_default = {
+	"group-row": "_group-row_u9zpp_1",
+	"row-grid": "_row-grid_u9zpp_7",
+	"group-cell": "_group-cell_u9zpp_11",
+	"aggregate-cell": "_aggregate-cell_u9zpp_15",
+	"expand-spacer": "_expand-spacer_u9zpp_19",
+	"aux-row": "_aux-row_u9zpp_24",
+	"aux-cell": "_aux-cell_u9zpp_28",
+	pagination: "_pagination_u9zpp_32",
+	pagesize: "_pagesize_u9zpp_36",
+	"groupby-control": "_groupby-control_u9zpp_40",
+	"groupby-active-row": "_groupby-active-row_u9zpp_45",
+	"groupby-active-label": "_groupby-active-label_u9zpp_52"
+};
+//#endregion
+//#region src/server-grouping/MVT_ServerGroupingGroupBy.ts
+/**
+* Resolve the columns/fields offered by the group-by toolbar control.
+*
+* With `serverGrouping.groupBy.columns` set, exactly that whitelist is used
+* (entries may be custom descriptors like `'createdAt:month'`). Otherwise
+* every leaf `data` column whose `enableGrouping` is not `false` is offered —
+* display columns and columns with `enableGrouping: false` never appear.
+*/
+var getServerGroupableColumns = (table) => {
+	const groupByOptions = table.options.serverGrouping?.groupBy;
+	const getFieldLabel = groupByOptions?.getFieldLabel;
+	const labelFor = (field) => {
+		if (getFieldLabel) return getFieldLabel(field, table);
+		const header = table.getAllLeafColumns().find((leafColumn) => leafColumn.id === field)?.columnDef.header;
+		return typeof header === "string" && header.length ? header : field;
+	};
+	if (groupByOptions?.columns) return groupByOptions.columns.map((field) => ({
+		id: field,
+		label: labelFor(field)
+	}));
+	return table.getAllLeafColumns().filter((column) => column.columnDef.columnDefType === "data" && column.columnDef.enableGrouping !== false).map((column) => ({
+		id: column.id,
+		label: labelFor(column.id)
+	}));
+};
+/** Build the scoped context handed to the group-by slot / render callback. */
+var getServerGroupingGroupByContext = (table, manager) => {
+	const grouping = manager.getGroupingFields();
+	const setGrouping = (next) => table.setGrouping(next);
+	return {
+		addGroup: (field) => {
+			if (!grouping.includes(field)) setGrouping([...grouping, field]);
+		},
+		clearGrouping: () => setGrouping([]),
+		groupableColumns: getServerGroupableColumns(table),
+		grouping,
+		moveGroup: (field, direction) => {
+			const index = grouping.indexOf(field);
+			const target = index + direction;
+			if (index === -1 || target < 0 || target >= grouping.length) return;
+			const next = [...grouping];
+			[next[index], next[target]] = [next[target], next[index]];
+			setGrouping(next);
+		},
+		removeGroup: (field) => setGrouping(grouping.filter((activeField) => activeField !== field)),
+		table
+	};
+};
+/**
+* Grouping actions for one column's action menu, or `undefined` when the
+* column cannot be grouped by.
+*
+* Uses exactly the same rules as the toolbar "Group by" control: server
+* grouping must be active and driven by the table's `grouping` state, the
+* control must not be disabled, and the column must be offered by
+* {@link getServerGroupableColumns}.
+*/
+var getServerGroupingColumnActions = (table, columnId) => {
+	const manager = table._serverGrouping;
+	if (!manager) return void 0;
+	const groupByOptions = manager.options.groupBy ?? {};
+	if (groupByOptions.enabled === false || groupByOptions.showInColumnActions === false) return;
+	if (manager.options.grouping && groupByOptions.enabled !== true) return void 0;
+	const context = getServerGroupingGroupByContext(table, manager);
+	return context.groupableColumns.some((column) => column.id === columnId) ? context : void 0;
+};
+/**
+* Built-in group-by toolbar control for server-side grouping. Renders a
+* "Group by" menu (add / reorder / remove / clear levels) plus the active
+* levels as removable pills. Hidden when server grouping is inactive, when
+* `groupBy.enabled` is `false`, or when grouping is a static
+* `serverGrouping.grouping` array (which the control could not change).
+*/
+var MVT_ServerGroupingGroupBy = (0, vue.defineComponent)({
+	name: "MVTServerGroupingGroupBy",
+	inheritAttrs: false,
+	props: { table: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const mvtSlots = useMVT_Slots();
+		return () => {
+			const table = props.table;
+			const manager = table._serverGrouping;
+			if (!manager) return null;
+			const sgOptions = manager.options;
+			const groupByOptions = sgOptions.groupBy ?? {};
+			if (groupByOptions.enabled === false) return null;
+			if (sgOptions.grouping && groupByOptions.enabled !== true) return null;
+			const localization = table.options.localization;
+			const icons = table.options.icons;
+			const allowReorder = groupByOptions.allowReorder ?? true;
+			const allowClearAll = groupByOptions.allowClearAll ?? true;
+			const context = getServerGroupingGroupByContext(table, manager);
+			const { addGroup, clearGrouping, groupableColumns, grouping, moveGroup, removeGroup } = context;
+			const custom = mvtSlots.serverGroupByControl?.(context) ?? parseFromValuesOrFunc(groupByOptions.renderControl, context);
+			if (custom !== void 0 && custom !== null) return custom;
+			const labelFor = (field) => groupableColumns.find((column) => column.id === field)?.label ?? field;
+			const activeRows = grouping.map((field, index) => (0, vue.h)(_mantine_vue_core.Box, {
+				class: MVT_ServerGrouping_module_default["groupby-active-row"],
+				key: field
+			}, () => [
+				allowReorder && (0, vue.h)(_mantine_vue_core.ActionIcon, {
+					"aria-label": `${localization.moveUp ?? "Move up"} ${labelFor(field)}`,
+					color: "gray",
+					disabled: index === 0,
+					onClick: () => moveGroup(field, -1),
+					size: "xs",
+					variant: "subtle"
+				}, () => (0, vue.h)(icons.IconChevronDown, { style: { transform: "rotate(180deg)" } })),
+				allowReorder && (0, vue.h)(_mantine_vue_core.ActionIcon, {
+					"aria-label": `${localization.moveDown ?? "Move down"} ${labelFor(field)}`,
+					color: "gray",
+					disabled: index === grouping.length - 1,
+					onClick: () => moveGroup(field, 1),
+					size: "xs",
+					variant: "subtle"
+				}, () => (0, vue.h)(icons.IconChevronDown)),
+				(0, vue.h)(_mantine_vue_core.Text, {
+					class: MVT_ServerGrouping_module_default["groupby-active-label"],
+					size: "sm"
+				}, () => `${index + 1}. ${labelFor(field)}`),
+				(0, vue.h)(_mantine_vue_core.ActionIcon, {
+					"aria-label": (localization.ungroupByColumn ?? "Ungroup by {column}").replace("{column}", labelFor(field)),
+					color: "gray",
+					onClick: () => removeGroup(field),
+					size: "xs",
+					variant: "subtle"
+				}, () => (0, vue.h)(icons.IconX))
+			]));
+			const menu = (0, vue.h)(_mantine_vue_core.Menu, {
+				closeOnItemClick: false,
+				position: "bottom-start",
+				shadow: "md",
+				width: 260,
+				...groupByOptions.mantineMenuProps
+			}, () => [(0, vue.h)(_mantine_vue_core.Menu.Target, null, () => (0, vue.h)(_mantine_vue_core.Button, {
+				size: "xs",
+				variant: "default",
+				...groupByOptions.mantineButtonProps,
+				leftSection: groupByOptions.mantineButtonProps?.leftSection ?? (0, vue.h)(icons.IconColumns)
+			}, () => localization.groupBy ?? "Group by")), (0, vue.h)(_mantine_vue_core.Menu.Dropdown, null, () => [
+				groupableColumns.length ? groupableColumns.map((column) => (0, vue.h)(_mantine_vue_core.Menu.Item, {
+					disabled: grouping.includes(column.id),
+					key: column.id,
+					onClick: () => addGroup(column.id)
+				}, () => column.label)) : (0, vue.h)(_mantine_vue_core.Menu.Label, null, () => localization.noGroupableColumns ?? "No groupable columns"),
+				grouping.length > 0 && [
+					(0, vue.h)(_mantine_vue_core.Menu.Divider),
+					(0, vue.h)(_mantine_vue_core.Menu.Label, null, () => (localization.groupedBy ?? "Grouped by ").trim()),
+					...activeRows
+				],
+				allowClearAll && grouping.length > 0 && [(0, vue.h)(_mantine_vue_core.Menu.Divider), (0, vue.h)(_mantine_vue_core.Menu.Item, {
+					color: "red",
+					onClick: () => clearGrouping()
+				}, () => localization.clearGrouping ?? "Clear grouping")]
+			])]);
+			const pills = grouping.length > 0 && (0, vue.h)(_mantine_vue_core.PillGroup, { gap: 4 }, () => grouping.map((field, index) => {
+				const pillProps = parseFromValuesOrFunc(groupByOptions.mantinePillProps, {
+					field,
+					index
+				}) ?? {};
+				return (0, vue.h)(_mantine_vue_core.Pill, {
+					size: "sm",
+					withRemoveButton: true,
+					...pillProps,
+					key: field,
+					onRemove: () => removeGroup(field),
+					removeButtonProps: {
+						"aria-label": (localization.ungroupByColumn ?? "Ungroup by {column}").replace("{column}", labelFor(field)),
+						...pillProps?.removeButtonProps
+					}
+				}, () => `${index + 1}. ${labelFor(field)}`);
+			}));
+			return (0, vue.h)(_mantine_vue_core.Box, {
+				class: (0, clsx.default)("mvt-server-groupby-control", MVT_ServerGrouping_module_default["groupby-control"]),
+				style: {
+					display: "flex",
+					gap: "8px"
+				}
+			}, () => [menu, pills]);
+		};
+	}
+});
 var MVT_FilterOptionMenu_module_default = { symbol: "_symbol_1b3vj_1" };
 //#endregion
 //#region src/components/menus/MVT_FilterOptionMenu.ts
@@ -2457,7 +3677,7 @@ var MVT_ShowHideColumnsMenuItems = (0, vue.defineComponent)({
 					openDelay: 1e3,
 					withinPortal: true
 				}, () => (0, vue.h)(_mantine_vue_core.Switch, {
-					checked,
+					modelValue: checked,
 					class: MVT_ShowHideColumnsMenuItems_module_default.switch,
 					disabled: !column.getCanHide(),
 					label: def.header,
@@ -2776,6 +3996,7 @@ var MVT_TopToolbar = (0, vue.defineComponent)({
 				["both", "top"].includes(positionToolbarDropZone ?? "") && (0, vue.h)(MVT_ToolbarDropZone, { table }),
 				(0, vue.h)(_mantine_vue_core.Flex, { class: [MVT_TopToolbar_module_default["actions-container"], stackAlertBanner ? MVT_TopToolbar_module_default["actions-container-stack-alert"] : void 0] }, () => [
 					enableGlobalFilter && positionGlobalFilter === "left" && (0, vue.h)(MVT_GlobalFilterTextInput, globalFilterProps),
+					table._serverGrouping && (0, vue.h)(MVT_ServerGroupingGroupBy, { table }),
 					parseFromValuesOrFunc(renderTopToolbarCustomActions, { table }) ?? (0, vue.h)("span"),
 					enableToolbarInternalActions ? (0, vue.h)(_mantine_vue_core.Flex, {
 						justify: "end",
@@ -2952,6 +4173,21 @@ var useMVT_ColumnVirtualizer = (table) => {
 //#endregion
 //#region src/utils/style.utils.ts
 var parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
+/**
+* Width/flex styles that bind a cell to its column's live size variables, so
+* custom cells (server-grouping group rows, …) stay aligned with the root
+* table while columns are resized or reordered.
+*/
+var getMVT_ColumnWidthStyles = ({ columnId, grow, layoutMode, minSize }) => {
+	const cssVar = `--col-${parseCSSVarId(columnId)}-size`;
+	const styles = {
+		minWidth: `max(calc(var(${cssVar}) * 1px), ${minSize ?? 30}px)`,
+		width: `calc(var(${cssVar}) * 1px)`
+	};
+	if (layoutMode === "grid") styles.flex = `${[0, false].includes(grow) ? 0 : `var(${cssVar})`} 0 auto`;
+	else if (layoutMode === "grid-no-grow") styles.flex = `${+(grow || 0)} 0 auto`;
+	return styles;
+};
 var getPrimaryShade = (theme) => typeof theme.primaryShade === "number" ? theme.primaryShade : theme.primaryShade?.dark ?? 7;
 var getPrimaryColor = (theme, shade) => theme.colors[theme.primaryColor][shade ?? getPrimaryShade(theme)];
 function dataVariable(name, value) {
@@ -3279,8 +4515,9 @@ var MVT_TableBodyCell = (0, vue.defineComponent)({
 				if (!columnDef.enableCellHoverReveal) return;
 				isCellContentOverflowing.value = false;
 			};
+			const isServerGrouping = !!table._serverGrouping;
 			const renderCellContent = () => {
-				if (cell.getIsPlaceholder()) return columnDef.PlaceholderCell?.({
+				if (!isServerGrouping && cell.getIsPlaceholder()) return columnDef.PlaceholderCell?.({
 					cell,
 					column,
 					row,
@@ -3606,6 +4843,271 @@ var MVT_TableBodyRow = (0, vue.defineComponent)({
 	}
 });
 var Memo_MVT_TableBodyRow = MVT_TableBodyRow;
+//#endregion
+//#region src/server-grouping/MVT_ServerGroupingBody.ts
+var INDENT_PX = 24;
+/** Renders the server-grouping hierarchy as rows of the root table body. */
+var MVT_ServerGroupingBody = (0, vue.defineComponent)({
+	name: "MVTServerGroupingBody",
+	inheritAttrs: false,
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		tableProps: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const mvtSlots = useMVT_Slots();
+		return () => {
+			const { tableProps } = props;
+			const table = props.table;
+			const manager = table._serverGrouping;
+			if (!manager) return null;
+			const { options: sgOptions } = manager;
+			const tableOptions = table.options;
+			const localization = tableOptions.localization;
+			const icons = tableOptions.icons;
+			const visibleColumns = table.getVisibleLeafColumns();
+			const colSpan = visibleColumns.length || 1;
+			const layoutMode = tableOptions.layoutMode;
+			const paginationOptions = {
+				enabled: sgOptions.pagination?.enabled ?? true,
+				mantineActionIconProps: sgOptions.pagination?.mantineActionIconProps ?? {},
+				showAtRoot: sgOptions.pagination?.showAtRoot ?? (tableOptions.enablePagination === false || tableOptions.positionPagination === "none"),
+				showForGroups: sgOptions.pagination?.showForGroups ?? true,
+				showForRecords: sgOptions.pagination?.showForRecords ?? true
+			};
+			const indentStyle = (depth) => ({ paddingInlineStart: `${8 + depth * INDENT_PX}px` });
+			const columnStyle = (column, extra) => ({
+				...getMVT_ColumnWidthStyles({
+					columnId: column.id,
+					grow: column.columnDef.grow,
+					layoutMode,
+					minSize: column.columnDef.minSize
+				}),
+				...extra
+			});
+			const auxRow = (key, depth, children) => (0, vue.h)(_mantine_vue_core.TableTr, {
+				class: (0, clsx.default)(MVT_ServerGrouping_module_default["aux-row"], layoutMode?.startsWith("grid") && MVT_ServerGrouping_module_default["row-grid"]),
+				key
+			}, () => (0, vue.h)(_mantine_vue_core.TableTd, {
+				class: MVT_ServerGrouping_module_default["aux-cell"],
+				colspan: colSpan,
+				style: {
+					...indentStyle(depth),
+					...layoutMode?.startsWith("grid") ? {
+						flex: "1 0 auto",
+						width: "100%"
+					} : {}
+				}
+			}, () => children));
+			const loadingContent = (pathId, depth) => mvtSlots.serverGroupLoading?.({
+				depth,
+				pathId,
+				table
+			}) ?? parseFromValuesOrFunc(sgOptions.renderGroupLoading, {
+				depth,
+				pathId,
+				table
+			}) ?? (0, vue.h)(_mantine_vue_core.Group, { gap: "xs" }, () => [(0, vue.h)(_mantine_vue_core.Loader, { size: "xs" }), (0, vue.h)(_mantine_vue_core.Text, {
+				c: "dimmed",
+				size: "sm"
+			}, () => localization.loading ?? "Loading…")]);
+			const errorContent = (pathId, error, retry) => mvtSlots.serverGroupError?.({
+				error,
+				pathId,
+				retry,
+				table
+			}) ?? parseFromValuesOrFunc(sgOptions.renderGroupError, {
+				error,
+				pathId,
+				retry,
+				table
+			}) ?? (0, vue.h)(_mantine_vue_core.Alert, {
+				color: "red",
+				role: "alert",
+				variant: "light"
+			}, () => (0, vue.h)(_mantine_vue_core.Group, { gap: "sm" }, () => [(0, vue.h)(_mantine_vue_core.Text, { size: "sm" }, () => localization.errorLoadingData ?? (error instanceof Error && error.message) ?? "Error loading data"), (0, vue.h)(_mantine_vue_core.Button, {
+				color: "red",
+				onClick: retry,
+				size: "compact-xs",
+				variant: "outline"
+			}, () => localization.retry ?? "Retry")]));
+			const emptyContent = (pathId, field) => {
+				const parentGroup = manager.getParentItems(pathId).at(-1);
+				return mvtSlots.serverGroupEmpty?.({
+					field,
+					parentGroup,
+					pathId,
+					table
+				}) ?? parseFromValuesOrFunc(sgOptions.renderGroupEmpty, {
+					field,
+					parentGroup,
+					pathId,
+					table
+				}) ?? (0, vue.h)(_mantine_vue_core.Text, {
+					c: "dimmed",
+					size: "sm"
+				}, () => localization.noRecordsToDisplay ?? "No records to display");
+			};
+			const paginationRow = (pathId, depth, state) => {
+				const isRoot = pathId === MVT_SERVER_GROUPING_ROOT_PATH_ID;
+				const { pageIndex, pageSize } = state.pagination;
+				const totalRowCount = state.rowCount;
+				if (!(paginationOptions.enabled && (state.kind === "groups" ? paginationOptions.showForGroups : paginationOptions.showForRecords) && (!isRoot || paginationOptions.showAtRoot) && (totalRowCount > pageSize || pageIndex > 0))) return null;
+				const firstRowIndex = pageIndex * pageSize;
+				const lastRowIndex = Math.min(firstRowIndex + pageSize, totalRowCount);
+				const setPageIndex = (nextPageIndex) => manager.setPagination(pathId, { pageIndex: nextPageIndex });
+				return auxRow(`${pathId}:pagination`, depth, (0, vue.h)(_mantine_vue_core.Group, {
+					class: MVT_ServerGrouping_module_default.pagination,
+					gap: "xs",
+					wrap: "nowrap"
+				}, () => [
+					(0, vue.h)(_mantine_vue_core.Text, {
+						c: "dimmed",
+						size: "sm"
+					}, () => `${totalRowCount === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}`),
+					(0, vue.h)(_mantine_vue_core.ActionIcon, {
+						color: "gray",
+						size: "sm",
+						variant: "subtle",
+						...paginationOptions.mantineActionIconProps,
+						"aria-label": localization.goToPreviousPage,
+						disabled: pageIndex <= 0 || state.isFetching,
+						onClick: () => setPageIndex(pageIndex - 1)
+					}, () => (0, vue.h)(icons.IconChevronLeft)),
+					(0, vue.h)(_mantine_vue_core.ActionIcon, {
+						color: "gray",
+						size: "sm",
+						variant: "subtle",
+						...paginationOptions.mantineActionIconProps,
+						"aria-label": localization.goToNextPage,
+						disabled: lastRowIndex >= totalRowCount || state.isFetching,
+						onClick: () => setPageIndex(pageIndex + 1)
+					}, () => (0, vue.h)(icons.IconChevronRight))
+				]));
+			};
+			const groupRow = (node, parentPathId, field, depth) => {
+				const pathId = createServerGroupPathId(parentPathId, field, node.id);
+				const expanded = manager.isExpanded(pathId);
+				const childState = manager.getPathState(pathId);
+				const context = {
+					depth,
+					field,
+					group: node,
+					isExpanded: expanded,
+					parentGroups: manager.getParentItems(pathId).slice(0, -1),
+					pathId,
+					table
+				};
+				const hasChildren = node.hasChildren !== false;
+				const rowProps = parseFromValuesOrFunc(sgOptions.mantineGroupRowProps, context) ?? {};
+				const label = mvtSlots.serverGroupLabel?.(context) ?? parseFromValuesOrFunc(sgOptions.renderGroupLabel, context) ?? node.label;
+				const count = mvtSlots.serverGroupCount?.(context) ?? parseFromValuesOrFunc(sgOptions.renderGroupCount, context) ?? (node.count !== void 0 ? `(${node.count.toLocaleString()})` : null);
+				const labelColumn = visibleColumns.find((column) => column.columnDef.columnDefType !== "display");
+				const labelCell = (column) => (0, vue.h)(_mantine_vue_core.TableTd, {
+					class: MVT_ServerGrouping_module_default["group-cell"],
+					key: column?.id ?? "mvt-server-group-label",
+					style: column ? columnStyle(column, indentStyle(depth)) : indentStyle(depth)
+				}, () => (0, vue.h)(_mantine_vue_core.Group, {
+					gap: "xs",
+					wrap: "nowrap"
+				}, () => [
+					hasChildren ? (0, vue.h)(_mantine_vue_core.ActionIcon, {
+						"aria-expanded": String(expanded),
+						"aria-label": `${expanded ? localization.collapse : localization.expand} ${node.label}`,
+						color: "gray",
+						onClick: () => manager.toggle(pathId),
+						size: "sm",
+						variant: "subtle"
+					}, () => (0, vue.h)(expanded ? icons.IconChevronDown : icons.IconChevronRight)) : (0, vue.h)("span", { class: MVT_ServerGrouping_module_default["expand-spacer"] }),
+					(0, vue.h)(_mantine_vue_core.Text, {
+						fw: 600,
+						size: "sm"
+					}, () => [label]),
+					count !== null && (0, vue.h)(_mantine_vue_core.Text, {
+						c: "dimmed",
+						size: "sm"
+					}, () => [count]),
+					expanded && childState?.isFetching && !childState.isLoading && (0, vue.h)(_mantine_vue_core.Loader, { size: "xs" })
+				]));
+				const aggregateCell = (column) => {
+					const columnServerGrouping = column.columnDef.serverGrouping;
+					let content = null;
+					if (columnServerGrouping?.visible !== false && columnServerGrouping?.getValue) {
+						const value = columnServerGrouping.getValue({
+							...context,
+							column
+						});
+						const cellContext = {
+							...context,
+							column,
+							value
+						};
+						content = mvtSlots.serverGroupCell?.(cellContext) ?? (columnServerGrouping.Cell ? flexRender(columnServerGrouping.Cell, cellContext) : value ?? null);
+					} else if (mvtSlots.serverGroupCell) content = mvtSlots.serverGroupCell({
+						...context,
+						column,
+						value: void 0
+					});
+					return (0, vue.h)(_mantine_vue_core.TableTd, {
+						class: MVT_ServerGrouping_module_default["aggregate-cell"],
+						key: column.id,
+						style: columnStyle(column)
+					}, () => [content]);
+				};
+				const spacerCell = (column) => (0, vue.h)(_mantine_vue_core.TableTd, {
+					key: column.id,
+					style: columnStyle(column)
+				}, () => null);
+				const cells = visibleColumns.length ? visibleColumns.map((column) => column.id === labelColumn?.id ? labelCell(column) : column.columnDef.columnDefType === "display" ? spacerCell(column) : aggregateCell(column)) : [labelCell()];
+				const rows = [(0, vue.h)(_mantine_vue_core.TableTr, {
+					"aria-expanded": hasChildren ? String(expanded) : void 0,
+					"aria-level": depth + 1,
+					"data-depth": depth,
+					"data-expanded": expanded || void 0,
+					key: pathId,
+					...rowProps,
+					class: (0, clsx.default)(MVT_ServerGrouping_module_default["group-row"], layoutMode?.startsWith("grid") && MVT_ServerGrouping_module_default["row-grid"], rowProps?.class)
+				}, () => cells)];
+				if (expanded) rows.push(...levelRows(pathId, depth + 1));
+				return rows;
+			};
+			const recordRows = (pathId) => {
+				const rows = manager.getRecordRows(pathId);
+				return rows.map((row, index) => (0, vue.h)(MVT_TableBodyRow, {
+					key: row.id,
+					numRows: rows.length,
+					renderedRowIndex: index,
+					row,
+					table,
+					tableProps
+				}));
+			};
+			const levelRows = (pathId, depth) => {
+				const state = manager.getPathState(pathId);
+				const field = manager.getGroupingFields()[getServerGroupPathDepth(pathId)];
+				if (!state || state.isLoading) return [auxRow(`${pathId}:loading`, depth, loadingContent(pathId, depth))];
+				if (state.error != null) return [auxRow(`${pathId}:error`, depth, errorContent(pathId, state.error, () => manager.retry(pathId)))];
+				const out = [];
+				if (state.kind === "groups") {
+					const groups = state.groups ?? [];
+					if (!groups.length) out.push(auxRow(`${pathId}:empty`, depth, emptyContent(pathId, field)));
+					else groups.forEach((node) => out.push(...groupRow(node, pathId, field, depth)));
+				} else if (!(state.rows ?? []).length) out.push(auxRow(`${pathId}:empty`, depth, emptyContent(pathId, field)));
+				else out.push(...recordRows(pathId));
+				const pagination = paginationRow(pathId, depth, state);
+				if (pagination) out.push(pagination);
+				return out;
+			};
+			return (0, vue.h)(vue.Fragment, null, levelRows(MVT_SERVER_GROUPING_ROOT_PATH_ID, 0));
+		};
+	}
+});
 var MVT_TableBody_module_default = {
 	root: "_root_17rwk_1",
 	"root-grid": "_root-grid_17rwk_6",
@@ -3735,7 +5237,10 @@ var MVT_TableBody = (0, vue.defineComponent)({
 						...tableBodyProps?.style
 					},
 					class: (0, clsx.default)(MVT_TableBody_module_default.root, layoutMode?.startsWith("grid") && MVT_TableBody_module_default["root-grid"], !currentRows.length && MVT_TableBody_module_default["root-no-rows"], rowVirtualizer && MVT_TableBody_module_default["root-virtualized"], tableBodyProps?.class)
-				}, () => tableBodyProps?.children ?? (!currentRows.length ? (0, vue.h)(MVT_TableBodyEmptyRow, commonRowProps) : (virtualRows ?? currentRows).map((rowOrVirtualRow, renderedRowIndex) => {
+				}, () => tableBodyProps?.children ?? (table._serverGrouping ? (0, vue.h)(MVT_ServerGroupingBody, {
+					table,
+					tableProps
+				}) : null) ?? (!currentRows.length ? (0, vue.h)(MVT_TableBodyEmptyRow, commonRowProps) : (virtualRows ?? currentRows).map((rowOrVirtualRow, renderedRowIndex) => {
 					let index = renderedRowIndex;
 					if (rowVirtualizer) if (renderDetailPanel) {
 						if (rowOrVirtualRow.index % 2 === 1) return null;
@@ -4003,6 +5508,7 @@ var MVT_ColumnActionMenu = (0, vue.defineComponent)({
 				leftSection: (0, vue.h)(icon, { class: iconClass }),
 				onClick
 			}, () => label);
+			const serverGroupBy = getServerGroupingColumnActions(table, column.id);
 			const internal = [];
 			if (o.enableSorting && column.getCanSort()) {
 				if (o.enableSortingRemoval !== false) internal.push(item(l.clearSort, icons.IconClearAll, () => column.clearSorting(), !column.getIsSorted()));
@@ -4024,6 +5530,11 @@ var MVT_ColumnActionMenu = (0, vue.defineComponent)({
 					table.setColumnOrder((old) => ["mvt-row-expand", ...old]);
 				}));
 				if (o.enableColumnPinning) internal.push((0, vue.h)(_mantine_vue_core.Menu.Divider));
+			} else if (serverGroupBy) {
+				const { addGroup, grouping, removeGroup } = serverGroupBy;
+				const isGrouped = grouping.includes(column.id);
+				internal.push(isGrouped ? item(l.clearGrouping ?? "Clear grouping", icons.IconClearAll, () => removeGroup(column.id)) : item(l.groupByColumn.replace("{column}", String(def.header)), icons.IconBoxMultiple, () => addGroup(column.id)));
+				if (o.enableColumnPinning) internal.push((0, vue.h)(_mantine_vue_core.Menu.Divider));
 			}
 			if (o.enableColumnPinning && column.getCanPin()) {
 				internal.push(item(l.pinToLeft, icons.IconPinned, () => column.pin("left"), column.getIsPinned() === "left", MVT_ColumnActionMenu_module_default.left));
@@ -4054,7 +5565,7 @@ var MVT_ColumnActionMenu = (0, vue.defineComponent)({
 				withinPortal: true,
 				...attrs,
 				opened: props.opened,
-				onChange: props.onChange
+				"onUpdate:opened": props.onChange
 			}, () => [(0, vue.h)(_mantine_vue_core.Tooltip, {
 				label: actionProps.title ?? l.columnActions,
 				openDelay: 1e3,
@@ -4426,7 +5937,7 @@ var MVT_FilterRangeSlider = (0, vue.defineComponent)({
 				class: (0, clsx.default)("mvt-filter-range-slider", MVT_FilterRangeSlider_module_default.root, rangeProps.class),
 				min,
 				max,
-				value: values.value,
+				modelValue: values.value,
 				...rangeProps,
 				onChange: (value) => {
 					values.value = value;
@@ -5248,6 +6759,44 @@ var MantineVueTable = (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/server-grouping/createServerGroupingProvider.ts
+var asString = (value) => value === null || value === void 0 ? "" : String(value);
+/**
+* Build a {@link MVT_ServerGroupingProvider} with sensible defaults for common
+* response formats:
+*
+* - `groups`/`records` default to the response itself when it is an array.
+* - `groupRowCount`/`recordRowCount` default to the mapped array length.
+* - `groupId`/`groupLabel` default to stringifying `groupValue` (or the group
+*   itself when it is a primitive).
+* - `groupValue` defaults to the group object itself.
+* - `groupMeta` defaults to `{}`; `groupCount` and aggregates stay optional.
+* - `hasChildren` defaults to `true` (every level up to and including the last
+*   grouping level is expandable).
+* - `rowId` falls back to the table's existing `getRowId` logic.
+*/
+var createServerGroupingProvider = (options) => {
+	const getGroups = options.getGroups ?? options.groups ?? ((response) => Array.isArray(response) ? response : []);
+	const getRecords = options.getRecords ?? options.records ?? ((response) => Array.isArray(response) ? response : []);
+	const getGroupValue = options.getGroupValue ?? options.groupValue ?? ((group) => group);
+	return {
+		getGroupId: options.getGroupId ?? options.groupId ?? ((group, context) => asString(getGroupValue(group, context))),
+		getGroupLabel: options.getGroupLabel ?? options.groupLabel ?? ((group, context) => asString(getGroupValue(group, context))),
+		getGroupValue,
+		getGroupCount: options.getGroupCount ?? options.groupCount,
+		getGroupMeta: options.getGroupMeta ?? options.groupMeta ?? (() => ({})),
+		hasGroupChildren: options.hasGroupChildren ?? options.hasChildren,
+		loadGroups: options.loadGroups,
+		getGroups,
+		getGroupRowCount: options.getGroupRowCount ?? options.groupRowCount ?? ((response) => getGroups(response).length),
+		loadRecords: options.loadRecords,
+		getRecords,
+		getRecordRowCount: options.getRecordRowCount ?? options.recordRowCount ?? ((response) => getRecords(response).length),
+		getRowId: options.getRowId ?? options.rowId,
+		getCacheKey: options.getCacheKey ?? options.cacheKey
+	};
+};
+//#endregion
 exports.MVT_AggregationFns = MVT_AggregationFns;
 exports.MVT_BottomToolbar = MVT_BottomToolbar;
 exports.MVT_ColumnActionMenu = MVT_ColumnActionMenu;
@@ -5272,7 +6821,10 @@ exports.MVT_GrabHandleButton = MVT_GrabHandleButton;
 exports.MVT_ProgressBar = MVT_ProgressBar;
 exports.MVT_RowActionMenu = MVT_RowActionMenu;
 exports.MVT_RowPinButton = MVT_RowPinButton;
+exports.MVT_SERVER_GROUPING_ROOT_PATH_ID = MVT_SERVER_GROUPING_ROOT_PATH_ID;
 exports.MVT_SelectCheckbox = MVT_SelectCheckbox;
+exports.MVT_ServerGroupingBody = MVT_ServerGroupingBody;
+exports.MVT_ServerGroupingGroupBy = MVT_ServerGroupingGroupBy;
 exports.MVT_ShowHideColumnsButton = MVT_ShowHideColumnsButton;
 exports.MVT_ShowHideColumnsMenu = MVT_ShowHideColumnsMenu;
 exports.MVT_ShowHideColumnsMenuItems = MVT_ShowHideColumnsMenuItems;
@@ -5314,9 +6866,14 @@ exports.Memo_MVT_TableBody = Memo_MVT_TableBody;
 exports.Memo_MVT_TableBodyCell = Memo_MVT_TableBodyCell;
 exports.Memo_MVT_TableBodyRow = Memo_MVT_TableBodyRow;
 exports.createMVTColumnHelper = createMVTColumnHelper;
+exports.createMVT_ServerGroupingManager = createMVT_ServerGroupingManager;
 exports.createRow = createRow;
+exports.createServerGroupPathId = createServerGroupPathId;
+exports.createServerGroupingProvider = createServerGroupingProvider;
 exports.dataVariable = dataVariable;
 exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
+exports.deselectServerGroupingRecords = deselectServerGroupingRecords;
+exports.escapeServerGroupPathPart = escapeServerGroupPathPart;
 exports.flexRender = flexRender;
 exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
 exports.getCanRankRows = getCanRankRows;
@@ -5326,21 +6883,36 @@ exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
 exports.getIsRankingRows = getIsRankingRows;
 exports.getIsRowSelected = getIsRowSelected;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
+exports.getMVT_ColumnWidthStyles = getMVT_ColumnWidthStyles;
 exports.getMVT_RowSelectionHandler = getMVT_RowSelectionHandler;
 exports.getMVT_Rows = getMVT_Rows;
 exports.getMVT_SelectAllHandler = getMVT_SelectAllHandler;
 exports.getPrimaryColor = getPrimaryColor;
 exports.getPrimaryShade = getPrimaryShade;
+exports.getServerGroupPathDepth = getServerGroupPathDepth;
+exports.getServerGroupableColumns = getServerGroupableColumns;
+exports.getServerGroupingColumnActions = getServerGroupingColumnActions;
+exports.getServerGroupingGroupByContext = getServerGroupingGroupByContext;
+exports.getServerGroupingManager = getServerGroupingManager;
+exports.getServerGroupingSelectableRows = getServerGroupingSelectableRows;
+exports.getServerGroupingSelectionPayload = getServerGroupingSelectionPayload;
+exports.getServerGroupingSelectionSummary = getServerGroupingSelectionSummary;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
+exports.isAbortError = isAbortError;
+exports.isServerGroupPathOrDescendant = isServerGroupPathOrDescendant;
+exports.isServerGroupingRecordSelected = isServerGroupingRecordSelected;
 exports.localizedFilterOption = localizedFilterOption;
 exports.mrtFilterOptions = mrtFilterOptions;
 exports.parseCSSVarId = parseCSSVarId;
 exports.parseFromValuesOrFunc = parseFromValuesOrFunc;
+exports.parseServerGroupPathId = parseServerGroupPathId;
 exports.prepareColumns = prepareColumns;
 exports.provideMVT_Slots = provideMVT_Slots;
 exports.rankGlobalFuzzy = rankGlobalFuzzy;
 exports.renderMVT_Renderable = renderMVT_Renderable;
 exports.reorderColumn = reorderColumn;
+exports.selectAllMatchingServerGroupingRecords = selectAllMatchingServerGroupingRecords;
+exports.serializeServerGroupingCacheKey = serializeServerGroupingCacheKey;
 exports.showRowActionsColumn = showRowActionsColumn;
 exports.showRowDragColumn = showRowDragColumn;
 exports.showRowExpandColumn = showRowExpandColumn;
@@ -5348,6 +6920,9 @@ exports.showRowNumbersColumn = showRowNumbersColumn;
 exports.showRowPinningColumn = showRowPinningColumn;
 exports.showRowSelectionColumn = showRowSelectionColumn;
 exports.showRowSpacerColumn = showRowSpacerColumn;
+exports.toggleAllServerGroupingRecordsSelected = toggleAllServerGroupingRecordsSelected;
+exports.toggleServerGroupingRecordSelected = toggleServerGroupingRecordSelected;
+exports.unescapeServerGroupPathPart = unescapeServerGroupPathPart;
 exports.useMVT_ColumnVirtualizer = useMVT_ColumnVirtualizer;
 exports.useMVT_Effects = useMVT_Effects;
 exports.useMVT_RowVirtualizer = useMVT_RowVirtualizer;