@questpie/admin 3.0.2 → 3.0.4

package/dist/client/views/collection/table-view.mjs

@@ -5,39 +5,53 @@ import { useSafeContentLocales } from "../../runtime/content-locales-provider.mj
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
 import { Button } from "../../components/ui/button.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../../components/ui/sheet.mjs";
+import { sanitizeFilename } from "../../components/fields/field-utils.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
 import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { flattenOptions } from "../../components/primitives/types.mjs";
 import { createActionRegistryProxy } from "../../builder/types/action-registry.mjs";
+import { ActionButton } from "../../components/actions/action-button.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
 import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
+import { ScrollFade } from "../../components/ui/scroll-fade.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
-import { useCollectionDelete, useCollectionList, useCollectionRestore } from "../../hooks/use-collection.mjs";
+import { useCollectionDelete, useCollectionList, useCollectionRestore, useCollectionUpdateBatch } from "../../hooks/use-collection.mjs";
 import { useSessionState } from "../../hooks/use-current-user.mjs";
 import { getLockUser, useLocks } from "../../hooks/use-locks.mjs";
 import { mergeServerActions, useServerActions } from "../../hooks/use-server-actions.mjs";
+import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table.mjs";
 import { TableViewSkeleton } from "./view-skeletons.mjs";
+import { ResourceSheet } from "../../components/sheets/resource-sheet.mjs";
+import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
+import { useUpload } from "../../hooks/use-upload.mjs";
+import { AssetPreview } from "../../components/primitives/asset-preview.mjs";
+import { Dropzone } from "../../components/primitives/dropzone.mjs";
 import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
+import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
+import { buildColumns } from "./columns/build-columns.mjs";
 import { HeaderActions } from "../../components/actions/header-actions.mjs";
 import { FilterBuilderSheet } from "../../components/filter-builder/filter-builder-sheet.mjs";
-import { EmptyState } from "../../components/ui/empty-state.mjs";
 import { SearchInput } from "../../components/ui/search-input.mjs";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table.mjs";
-import { Toolbar, ToolbarSection, ToolbarSeparator } from "../../components/ui/toolbar.mjs";
 import { useActions } from "../../hooks/use-action.mjs";
 import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
 import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
 import { useViewState } from "../../hooks/use-view-state.mjs";
-import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
 import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
-import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
-import { buildColumns } from "./columns/build-columns.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Suspense, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { toast } from "sonner";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 
 //#region src/client/views/collection/table-view.tsx
@@ -48,8 +62,198 @@ import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@
 * This is the default list view registered in the admin view registry.
 */
 const actionRegistry = createActionRegistryProxy();
+const STICKY_TABLE_COLUMN_COUNT = 2;
+const REORDER_DROP_DURATION = 160;
+const REORDER_MOVE_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+const REORDER_DROP_ANIMATION = {
+	duration: REORDER_DROP_DURATION,
+	easing: REORDER_MOVE_EASING
+};
+function UploadCollectionButton(t0) {
+	const $ = c(13);
+	const { collection, onUploaded } = t0;
+	const { t } = useTranslation();
+	const [open, setOpen] = React.useState(false);
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setOpen(true);
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:cloud-arrow-up",
+			className: "size-3.5"
+		});
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== t) {
+		t3 = t("common.upload");
+		$[2] = t;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Button, {
+			variant: "default",
+			size: "sm",
+			className: "gap-2",
+			onClick: t1,
+			children: [t2, t3]
+		});
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== collection || $[7] !== onUploaded || $[8] !== open) {
+		t5 = /* @__PURE__ */ jsx(UploadCollectionSheet, {
+			open,
+			onOpenChange: setOpen,
+			collection,
+			onUploaded
+		});
+		$[6] = collection;
+		$[7] = onUploaded;
+		$[8] = open;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function UploadCollectionSheet({ open, onOpenChange, collection, onUploaded }) {
+	const { t } = useTranslation();
+	const { uploadMany, isUploading, progress } = useUpload();
+	const [uploadedAssets, setUploadedAssets] = React.useState([]);
+	const [editAssetId, setEditAssetId] = React.useState(null);
+	React.useEffect(() => {
+		if (!open) {
+			setUploadedAssets([]);
+			setEditAssetId(null);
+		}
+	}, [open]);
+	const handleValidationError = React.useCallback((errors) => {
+		for (const validationError of errors) toast.error(validationError.message);
+	}, []);
+	const handleDrop = React.useCallback(async (files) => {
+		if (files.length === 0 || isUploading) return;
+		const sanitizedFiles = files.map((file) => new File([file], sanitizeFilename(file.name), {
+			type: file.type,
+			lastModified: file.lastModified
+		}));
+		try {
+			const uploaded = await uploadMany(sanitizedFiles, { to: collection });
+			setUploadedAssets((current) => [...uploaded, ...current]);
+			toast.success(t("upload.bulkSuccess", { count: uploaded.length }));
+			await onUploaded?.();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : t("upload.error"));
+		}
+	}, [
+		collection,
+		isUploading,
+		onUploaded,
+		t,
+		uploadMany
+	]);
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		modal: false,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			showOverlay: false,
+			className: "qa-upload-sheet w-full p-0 data-[side=right]:sm:max-w-xl",
+			children: [
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "border-b px-6 py-5",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: t("upload.bulkTitle") }), /* @__PURE__ */ jsx(SheetDescription, { children: t("upload.bulkDescription") })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-5 overflow-y-auto px-6 py-5",
+					children: [/* @__PURE__ */ jsx(Dropzone, {
+						onDrop: handleDrop,
+						multiple: true,
+						loading: isUploading,
+						progress: isUploading ? progress : void 0,
+						label: t("upload.dropzone"),
+						hint: t("upload.bulkHint"),
+						onValidationError: handleValidationError
+					}), uploadedAssets.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground font-chrome chrome-meta text-xs font-medium",
+							children: t("upload.uploadedCount", { count: uploadedAssets.length })
+						}), /* @__PURE__ */ jsx("div", {
+							className: "grid gap-2",
+							children: uploadedAssets.map((asset) => /* @__PURE__ */ jsx(AssetPreview, {
+								asset,
+								variant: "compact",
+								onEdit: () => setEditAssetId(asset.id)
+							}, asset.id))
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(SheetFooter, {
+					className: "border-t px-6 py-4",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onOpenChange(false),
+						disabled: isUploading,
+						children: t("common.close")
+					})
+				}),
+				editAssetId && /* @__PURE__ */ jsx(ResourceSheet, {
+					type: "collection",
+					collection,
+					itemId: editAssetId,
+					open: !!editAssetId,
+					onOpenChange: (nextOpen) => {
+						if (!nextOpen) setEditAssetId(null);
+					},
+					onSave: () => {
+						onUploaded?.();
+					}
+				})
+			]
+		})
+	});
+}
+function getColumnSizeStyle(width) {
+	return {
+		width,
+		minWidth: width,
+		maxWidth: width
+	};
+}
+function getColumnSize(column, fallback = 120) {
+	return typeof column?.getSize === "function" ? column.getSize() : fallback;
+}
+function getStickyLeftOffset(columns, index) {
+	return columns.slice(0, index).reduce((left, column, columnIndex) => {
+		return left + getColumnSize(column, columnIndex === 0 ? 40 : 360);
+	}, 0);
+}
+function getActionReferenceType(reference) {
+	if (typeof reference === "string") return reference;
+	if (typeof reference === "function") {
+		const actionType = reference.type;
+		if (typeof actionType === "string") return actionType;
+		const resolved = reference();
+		return typeof resolved === "string" ? resolved : void 0;
+	}
+	return typeof reference?.type === "string" ? reference.type : void 0;
+}
 function resolveBuiltinListAction(reference) {
-	const type = typeof reference === "string" ? reference : typeof reference?.type === "string" ? reference.type : void 0;
+	if (typeof reference === "object" && reference !== null && "id" in reference && "handler" in reference) return reference;
+	const type = getActionReferenceType(reference);
 	const config = typeof reference === "object" && reference !== null ? reference.config : void 0;
 	if (!type) return null;
 	switch (type) {
@@ -64,29 +268,302 @@ function mapActionReferencesToDefinitions(references) {
 	if (!Array.isArray(references)) return [];
 	return references.map((reference) => resolveBuiltinListAction(reference)).filter((action) => action !== null);
 }
+function mapListActionsToDefinitions(actions) {
+	if (!actions || typeof actions !== "object") return void 0;
+	const listActions = actions;
+	const header = listActions.header ? {
+		primary: mapActionReferencesToDefinitions(listActions.header.primary),
+		secondary: mapActionReferencesToDefinitions(listActions.header.secondary)
+	} : void 0;
+	const row = mapActionReferencesToDefinitions(listActions.row);
+	const bulk = mapActionReferencesToDefinitions(listActions.bulk);
+	if (!header && row.length === 0 && bulk.length === 0) return void 0;
+	return {
+		...header ? { header } : {},
+		...row.length > 0 ? { row } : {},
+		...bulk.length > 0 ? { bulk } : {}
+	};
+}
 function mapListSchemaToConfig(list) {
 	if (!list) return void 0;
 	const config = {};
 	if (list.columns?.length) config.columns = list.columns;
 	if (list.defaultSort) config.defaultSort = list.defaultSort;
+	if (list.orderable) config.orderable = list.orderable;
 	if (list.searchable?.length) {
 		config.searchFields = list.searchable;
 		config.searchable = true;
 	}
-	if (list.actions && typeof list.actions === "object") {
-		const listActions = list.actions;
-		const header = listActions.header ? {
-			primary: mapActionReferencesToDefinitions(listActions.header.primary),
-			secondary: mapActionReferencesToDefinitions(listActions.header.secondary)
-		} : void 0;
-		const bulk = mapActionReferencesToDefinitions(listActions.bulk);
-		if (header || bulk.length > 0) config.actions = {
-			...header ? { header } : {},
-			...bulk.length > 0 ? { bulk } : {}
-		};
-	}
+	if (list.grouping?.fields?.length) config.grouping = list.grouping;
+	config.actions = mapListActionsToDefinitions(list.actions);
 	return config;
 }
+function stringifyGroupValue(value, field, resolveText) {
+	if (value === null || value === void 0 || value === "") return "No value";
+	if (Array.isArray(value)) return value.length > 0 ? value.map((item) => stringifyGroupValue(item, field, resolveText)).join(", ") : "No value";
+	const options = field?.options?.options;
+	if (options) {
+		const option = flattenOptions(options).find((item) => String(item.value) === String(value));
+		if (option) return resolveText?.(option.label, String(option.value)) ?? String(option.label);
+	}
+	if (typeof value === "object") {
+		const record = value;
+		const displayValue = record.title ?? record.name ?? record.label ?? record.id;
+		return resolveText?.(displayValue, "Object") ?? String(displayValue ?? "Object");
+	}
+	return String(value);
+}
+function getGroupSortIndex(value, field) {
+	const options = field?.options?.options;
+	if (!options) return Number.MAX_SAFE_INTEGER;
+	const compareValue = Array.isArray(value) ? value[0] : value;
+	const index = flattenOptions(options).findIndex((option) => String(option.value) === String(compareValue));
+	return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+}
+const ReorderRowContext = React.createContext(null);
+function ReorderHandle() {
+	const $ = c(9);
+	const sortable = React.useContext(ReorderRowContext);
+	const t0 = sortable?.setActivatorNodeRef;
+	let t1;
+	if ($[0] !== sortable?.attributes) {
+		t1 = sortable?.attributes ?? {};
+		$[0] = sortable?.attributes;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== sortable?.listeners) {
+		t2 = sortable?.listeners ?? {};
+		$[2] = sortable?.listeners;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:dots-six-vertical",
+			className: "size-3.5"
+		});
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t0 || $[6] !== t1 || $[7] !== t2) {
+		t4 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			ref: t0,
+			className: "text-muted-foreground/50 hover:text-muted-foreground focus-visible:ring-ring/40 flex h-8 w-full cursor-grab touch-none items-center justify-center rounded-md transition-colors select-none focus-visible:ring-2 focus-visible:outline-none active:cursor-grabbing",
+			"aria-label": "Drag to reorder",
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+function ReorderDragOverlay(t0) {
+	const $ = c(24);
+	const { row, columns, rect } = t0;
+	if (!row) return null;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== columns || $[1] !== rect?.height || $[2] !== rect?.width || $[3] !== row) {
+		const cells = row.getVisibleCells?.() ?? [];
+		t4 = "bg-background text-foreground ring-border-strong pointer-events-none overflow-hidden rounded-md shadow-xl ring-1";
+		const t6$1 = rect?.width;
+		const t7$1 = rect?.height;
+		if ($[9] !== t6$1 || $[10] !== t7$1) {
+			t5 = {
+				width: t6$1,
+				height: t7$1
+			};
+			$[9] = t6$1;
+			$[10] = t7$1;
+			$[11] = t5;
+		} else t5 = $[11];
+		t1 = "grid h-full items-center";
+		let t8;
+		if ($[12] !== columns) {
+			t8 = columns.map(_temp3).join(" ");
+			$[12] = columns;
+			$[13] = t8;
+		} else t8 = $[13];
+		if ($[14] !== t8) {
+			t2 = { gridTemplateColumns: t8 };
+			$[14] = t8;
+			$[15] = t2;
+		} else t2 = $[15];
+		t3 = cells.map(_temp4);
+		$[0] = columns;
+		$[1] = rect?.height;
+		$[2] = rect?.width;
+		$[3] = row;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[16] !== t1 || $[17] !== t2 || $[18] !== t3) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style: t2,
+			children: t3
+		});
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: t4,
+			style: t5,
+			children: t6
+		});
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+}
+function _temp4(cell, index) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-w-0 truncate px-3 py-1.5 text-sm whitespace-nowrap tabular-nums", index === 0 && "px-1.5 text-center"),
+		children: index === 0 ? /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:dots-six-vertical",
+			className: "text-muted-foreground mx-auto size-3.5"
+		}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+	}, cell.id);
+}
+function _temp3(column) {
+	return `${getColumnSize(column, 120)}px`;
+}
+function SortableTableRow(t0) {
+	const $ = c(33);
+	let children;
+	let className;
+	let id;
+	let props;
+	if ($[0] !== t0) {
+		({id, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = id;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		id = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			duration: REORDER_DROP_DURATION,
+			easing: REORDER_MOVE_EASING
+		};
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== id) {
+		t2 = {
+			id,
+			transition: t1
+		};
+		$[6] = id;
+		$[7] = t2;
+	} else t2 = $[7];
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable(t2);
+	const t3 = isDragging && "bg-muted/[0.18] opacity-35";
+	let t4;
+	if ($[8] !== className || $[9] !== t3) {
+		t4 = cn("select-none", t3, className);
+		$[8] = className;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== isDragging || $[12] !== transform) {
+		t5 = isDragging ? void 0 : CSS.Transform.toString(transform);
+		$[11] = isDragging;
+		$[12] = transform;
+		$[13] = t5;
+	} else t5 = $[13];
+	const t6 = isDragging ? void 0 : transition;
+	let t7;
+	if ($[14] !== props.style) {
+		t7 = props.style ?? {};
+		$[14] = props.style;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+		t8 = {
+			transform: t5,
+			transition: t6,
+			...t7
+		};
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== attributes || $[21] !== listeners || $[22] !== setActivatorNodeRef) {
+		t9 = {
+			attributes,
+			listeners,
+			setActivatorNodeRef
+		};
+		$[20] = attributes;
+		$[21] = listeners;
+		$[22] = setActivatorNodeRef;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== children || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsx(ReorderRowContext.Provider, {
+			value: t9,
+			children
+		});
+		$[24] = children;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== props || $[28] !== setNodeRef || $[29] !== t10 || $[30] !== t4 || $[31] !== t8) {
+		t11 = /* @__PURE__ */ jsx(TableRow, {
+			ref: setNodeRef,
+			className: t4,
+			style: t8,
+			...props,
+			children: t10
+		});
+		$[27] = props;
+		$[28] = setNodeRef;
+		$[29] = t10;
+		$[30] = t4;
+		$[31] = t8;
+		$[32] = t11;
+	} else t11 = $[32];
+	return t11;
+}
 /**
 * TableView - Default table-based list view for collections
 *
@@ -139,10 +616,12 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	"use no memo";
 	const globalRealtimeConfig = useAdminStore(selectRealtime);
 	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const { collections: uploadCollections } = useUploadCollection();
 	const schemaListConfig = mapListSchemaToConfig(schema?.admin?.list);
 	const resolvedListConfig = viewConfig ?? (config?.list)?.["~config"] ?? config?.list ?? schemaListConfig;
 	const resolvedRealtime = realtime ?? resolvedListConfig?.realtime ?? globalRealtimeConfig.enabled;
-	const resolvedActionsConfig = actionsConfig ?? resolvedListConfig?.actions;
+	const rawActionsConfig = actionsConfig ?? resolvedListConfig?.actions;
+	const resolvedActionsConfig = React.useMemo(() => mapListActionsToDefinitions(rawActionsConfig), [rawActionsConfig]);
 	const { serverActions } = useServerActions({ collection });
 	const mergedActionsConfig = React.useMemo(() => mergeServerActions(resolvedActionsConfig ?? {}, serverActions), [resolvedActionsConfig, serverActions]);
 	const { user } = useSessionState();
@@ -155,6 +634,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		collection,
 		actionsConfig: mergedActionsConfig
 	});
+	const canUploadToCollection = uploadCollections.includes(collection) && schema?.access?.operations?.create?.allowed === true;
 	const columns = useMemo(() => buildColumns({
 		config: {
 			fields: resolvedFields,
@@ -179,6 +659,32 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	]);
 	const [isSheetOpen, setIsSheetOpen] = useSidebarSearchParam("view-options", { legacyKey: "viewOptions" });
 	const [searchTerm, setSearchTerm] = useState("");
+	const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
+	const [isReorderMode, setIsReorderMode] = useState(false);
+	const [activeReorderId, setActiveReorderId] = useState(null);
+	const [activeReorderRect, setActiveReorderRect] = useState(null);
+	const [optimisticOrderIds, setOptimisticOrderIds] = useState(null);
+	const reorderStartOrderIdsRef = React.useRef(null);
+	const reorderOverlayCleanupRef = React.useRef(null);
+	const clearReorderOverlay = React.useCallback((delay = 0) => {
+		if (reorderOverlayCleanupRef.current !== null) {
+			window.clearTimeout(reorderOverlayCleanupRef.current);
+			reorderOverlayCleanupRef.current = null;
+		}
+		const clear = () => {
+			setActiveReorderId(null);
+			setActiveReorderRect(null);
+			reorderOverlayCleanupRef.current = null;
+		};
+		if (delay > 0) {
+			reorderOverlayCleanupRef.current = window.setTimeout(clear, delay);
+			return;
+		}
+		clear();
+	}, []);
+	React.useEffect(() => () => {
+		if (reorderOverlayCleanupRef.current !== null) window.clearTimeout(reorderOverlayCleanupRef.current);
+	}, []);
 	const defaultColumns = useMemo(() => computeDefaultColumns(resolvedFields, {
 		meta: collectionMeta,
 		configuredColumns: resolvedListConfig?.columns
@@ -187,11 +693,41 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		resolvedListConfig?.columns,
 		collectionMeta
 	]);
-	const viewState = useViewState(defaultColumns, { realtime: resolvedRealtime }, collection, user?.id);
+	const groupingConfig = resolvedListConfig?.grouping;
+	const defaultGroupBy = groupingConfig?.defaultField ?? null;
+	const orderableConfig = resolvedListConfig?.orderable;
+	const isOrderableEnabled = !!orderableConfig;
+	const orderField = "order";
+	const orderDirection = typeof orderableConfig === "object" ? orderableConfig.direction ?? "asc" : "asc";
+	const orderStep = typeof orderableConfig === "object" ? orderableConfig.step ?? 10 : 10;
+	const viewState = useViewState(defaultColumns, {
+		realtime: resolvedRealtime,
+		groupBy: defaultGroupBy
+	}, collection, user?.id);
 	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
+	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
+	const hasOrderField = isKnownSortField(orderField);
+	const canUseOrderableSort = isOrderableEnabled && hasOrderField;
+	const effectiveSort = useMemo(() => {
+		if (isKnownSortField(viewState.config.sortConfig?.field)) return viewState.config.sortConfig;
+		if (isKnownSortField(resolvedListConfig?.defaultSort?.field)) return resolvedListConfig.defaultSort;
+		if (canUseOrderableSort) return {
+			field: orderField,
+			direction: orderDirection
+		};
+		return null;
+	}, [
+		viewState.config.sortConfig,
+		resolvedListConfig?.defaultSort,
+		canUseOrderableSort,
+		orderField,
+		orderDirection,
+		isKnownSortField
+	]);
 	const queryOptions = useMemo(() => {
 		const options = {};
 		if (collectionMeta?.softDelete) options.includeDeleted = !!viewState.config.includeDeleted;
+		if (viewState.config.groupBy) options.groupBy = { field: viewState.config.groupBy };
 		if (hasFieldsToExpand(expandedFields)) options.with = expandedFields;
 		if (viewState.config.filters.length > 0) {
 			const whereConditions = { ...options.where };
@@ -248,12 +784,12 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				}
 			};
 			for (const filter of viewState.config.filters) {
-				const { field, operator: operator_0, value } = filter;
-				if (!field || field === "_title") continue;
-				const fieldDef_0 = resolvedFields?.[field];
+				const { field: field_0, operator: operator_0, value } = filter;
+				if (!field_0 || field_0 === "_title") continue;
+				const fieldDef_0 = resolvedFields?.[field_0];
 				const fieldType_0 = fieldDef_0?.name ?? "text";
 				const fieldOptions_1 = fieldDef_0?.["~options"] ?? {};
-				const relationName = fieldType_0 === "relation" ? fieldOptions_1.relationName ?? field : void 0;
+				const relationName = fieldType_0 === "relation" ? fieldOptions_1.relationName ?? field_0 : void 0;
 				const hasRelation = relationName && (relationNames.length === 0 || relationNames.includes(relationName));
 				const isRelationField = fieldType_0 === "relation" && !!hasRelation;
 				if (operator_0 !== "is_empty" && operator_0 !== "is_not_empty" && isEmptyValue(value)) continue;
@@ -265,55 +801,56 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				}
 				switch (operator_0) {
 					case "equals":
-						whereConditions[field] = normalizedValue;
+						whereConditions[field_0] = normalizedValue;
 						break;
 					case "not_equals":
-						whereConditions[field] = { ne: normalizedValue };
+						whereConditions[field_0] = { ne: normalizedValue };
 						break;
 					case "contains":
-						whereConditions[field] = { contains: normalizedValue };
+						whereConditions[field_0] = { contains: normalizedValue };
 						break;
 					case "not_contains":
-						whereConditions[field] = { notIlike: `%${normalizedValue}%` };
+						whereConditions[field_0] = { notIlike: `%${normalizedValue}%` };
 						break;
 					case "starts_with":
-						whereConditions[field] = { startsWith: normalizedValue };
+						whereConditions[field_0] = { startsWith: normalizedValue };
 						break;
 					case "ends_with":
-						whereConditions[field] = { endsWith: normalizedValue };
+						whereConditions[field_0] = { endsWith: normalizedValue };
 						break;
 					case "greater_than":
-						whereConditions[field] = { gt: normalizedValue };
+						whereConditions[field_0] = { gt: normalizedValue };
 						break;
 					case "less_than":
-						whereConditions[field] = { lt: normalizedValue };
+						whereConditions[field_0] = { lt: normalizedValue };
 						break;
 					case "greater_than_or_equal":
-						whereConditions[field] = { gte: normalizedValue };
+						whereConditions[field_0] = { gte: normalizedValue };
 						break;
 					case "less_than_or_equal":
-						whereConditions[field] = { lte: normalizedValue };
+						whereConditions[field_0] = { lte: normalizedValue };
 						break;
 					case "in":
-						whereConditions[field] = { in: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+						whereConditions[field_0] = { in: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
 						break;
 					case "not_in":
-						whereConditions[field] = { notIn: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+						whereConditions[field_0] = { notIn: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
 						break;
 					case "is_empty":
-						whereConditions[field] = { isNull: true };
+						whereConditions[field_0] = { isNull: true };
 						break;
 					case "is_not_empty":
-						whereConditions[field] = { isNotNull: true };
+						whereConditions[field_0] = { isNotNull: true };
 						break;
 				}
 			}
 			options.where = whereConditions;
 		}
-		if (viewState.config.sortConfig) {
-			const { field: field_0, direction } = viewState.config.sortConfig;
-			options.orderBy = { [field_0]: direction };
-		}
+		const groupBy = viewState.config.groupBy;
+		const sortConfig = effectiveSort;
+		if (groupBy && sortConfig?.field && sortConfig.field !== groupBy) options.orderBy = [{ [groupBy]: "asc" }, { [sortConfig.field]: sortConfig.direction }];
+		else if (groupBy) options.orderBy = { [groupBy]: sortConfig?.direction ?? "asc" };
+		else if (sortConfig) options.orderBy = { [sortConfig.field]: sortConfig.direction };
 		const pageSize = viewState.config.pagination?.pageSize ?? 25;
 		const page = viewState.config.pagination?.page ?? 1;
 		options.limit = pageSize;
@@ -323,7 +860,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		expandedFields,
 		viewState.config.filters,
 		viewState.config.includeDeleted,
-		viewState.config.sortConfig,
+		viewState.config.groupBy,
+		effectiveSort,
 		viewState.config.pagination?.page,
 		viewState.config.pagination?.pageSize,
 		resolvedFields,
@@ -341,18 +879,34 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collection, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
 	const isLoading = isSearching ? searchLoading : listLoading;
 	const isSearchActive = isSearching && searchFetching;
-	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection);
-	const saveViewMutation = useSaveView(collection);
-	const deleteViewMutation = useDeleteSavedView(collection);
+	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection, user?.id);
+	const saveViewMutation = useSaveView(collection, user?.id);
+	const deleteViewMutation = useDeleteSavedView(collection, user?.id);
 	const deleteMutation = useCollectionDelete(collection);
 	const restoreMutation = useCollectionRestore(collection);
+	const updateBatchMutation = useCollectionUpdateBatch(collection);
 	const availableFields = useMemo(() => {
 		return getAllAvailableFields(resolvedFields, { meta: collectionMeta });
 	}, [resolvedFields, collectionMeta]);
+	const groupableFields = useMemo(() => {
+		const groupableNames = groupingConfig?.fields ?? [];
+		if (groupableNames.length === 0) return [];
+		const groupableSet = new Set(groupableNames);
+		return availableFields.filter((field_1) => groupableSet.has(field_1.name));
+	}, [availableFields, groupingConfig?.fields]);
 	const visibleColumnDefs = useMemo(() => {
 		const selectCol = {
 			id: "_select",
 			header: ({ table: t_0 }) => {
+				if (isReorderMode) return /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground/60 flex h-8 items-center justify-center",
+					title: "Order",
+					"aria-label": "Order",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:dots-six-vertical",
+						className: "size-3.5"
+					})
+				});
 				const isAllSelected = t_0.getIsAllPageRowsSelected();
 				const isSomeSelected = t_0.getIsSomePageRowsSelected();
 				return /* @__PURE__ */ jsx("div", {
@@ -368,6 +922,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				});
 			},
 			cell: ({ row }) => {
+				if (isReorderMode) return /* @__PURE__ */ jsx(ReorderHandle, {});
 				return /* @__PURE__ */ jsx("div", {
 					role: "presentation",
 					onClick: (e_1) => e_1.stopPropagation(),
@@ -400,15 +955,46 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 			const col = columnMap.get(colName);
 			if (col) orderedColumns.push(col);
 		}
+		if (actions.row.length > 0) orderedColumns.push({
+			id: "_actions",
+			header: () => /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("common.actions")
+			}),
+			cell: ({ row: row_0 }) => /* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				className: "flex justify-end gap-1",
+				onClick: (event) => event.stopPropagation(),
+				onKeyDown: (event_0) => event_0.stopPropagation(),
+				children: actions.row.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+					action,
+					collection,
+					item: row_0.original,
+					helpers: actionHelpers,
+					size: "icon-sm",
+					iconOnly: true,
+					onOpenDialog: (dialogAction_0) => openDialog(dialogAction_0, row_0.original)
+				}, action.id))
+			}),
+			size: 72,
+			enableSorting: false,
+			enableHiding: false
+		});
 		return orderedColumns;
 	}, [
 		columns,
 		viewState.config.visibleColumns,
 		defaultColumns,
-		collectionMeta
+		collectionMeta,
+		isReorderMode,
+		actions.row,
+		collection,
+		actionHelpers,
+		openDialog,
+		t
 	]);
 	const [sorting, setSorting] = React.useState(() => {
-		const sortSource = viewState.config.sortConfig ?? resolvedListConfig?.defaultSort;
+		const sortSource = effectiveSort;
 		if (sortSource?.field) return [{
 			id: sortSource.field,
 			desc: sortSource.direction === "desc"
@@ -439,7 +1025,78 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		resource: collection,
 		realtime: effectiveRealtime
 	});
-	const filteredItems = items;
+	React.useEffect(() => {
+		if (!isReorderMode) {
+			setOptimisticOrderIds(null);
+			return;
+		}
+		setOptimisticOrderIds((current) => {
+			const itemIds = items.map((item_0) => String(item_0.id));
+			if (!current) return itemIds;
+			const knownIds = new Set(itemIds);
+			const next = current.filter((id) => knownIds.has(id));
+			for (const id_0 of itemIds) if (!next.includes(id_0)) next.push(id_0);
+			return next;
+		});
+	}, [isReorderMode, items]);
+	const filteredItems = useMemo(() => {
+		if (!isReorderMode || !optimisticOrderIds) return items;
+		const itemsById = new Map(items.map((item_1) => [String(item_1.id), item_1]));
+		const seen = /* @__PURE__ */ new Set();
+		const ordered = optimisticOrderIds.map((id_1) => {
+			const item_2 = itemsById.get(id_1);
+			if (item_2) seen.add(id_1);
+			return item_2;
+		}).filter(Boolean);
+		for (const item_3 of items) {
+			const id_2 = String(item_3.id);
+			if (!seen.has(id_2)) ordered.push(item_3);
+		}
+		return ordered;
+	}, [
+		isReorderMode,
+		items,
+		optimisticOrderIds
+	]);
+	const hasActiveFilters = viewState.config.filters.length > 0;
+	const isOrderSortActive = canUseOrderableSort && effectiveSort?.field === orderField && (effectiveSort.direction ?? "asc") === orderDirection;
+	const hasMultiplePages = !isSearching && (listData?.totalPages ?? 1) > 1;
+	const reorderHardBlocker = !isOrderableEnabled ? "Enable orderable before reordering" : !hasOrderField ? "Add a numeric order field before reordering" : isSearching ? "Clear search to reorder" : viewState.config.groupBy ? "Remove grouping to reorder" : hasActiveFilters ? "Clear filters to reorder" : hasMultiplePages ? "Show one page of items to reorder" : null;
+	const reorderTooltip = reorderHardBlocker ?? (isOrderSortActive ? isReorderMode ? "Exit reorder mode" : "Reorder items" : `Switch to ${orderField} sort and reorder`);
+	const reorderAriaLabel = reorderHardBlocker ? `Reorder unavailable: ${reorderHardBlocker}` : isReorderMode ? "Exit reorder mode" : "Enter reorder mode";
+	const canReorder = isOrderableEnabled && !reorderHardBlocker;
+	const handleReorderToggle = React.useCallback(() => {
+		if (!canReorder) return;
+		if (!isOrderSortActive) {
+			const nextSort = {
+				field: orderField,
+				direction: orderDirection
+			};
+			setSorting([{
+				id: nextSort.field,
+				desc: nextSort.direction === "desc"
+			}]);
+			viewState.setSort(nextSort);
+			setIsReorderMode(true);
+			return;
+		}
+		setIsReorderMode((active) => !active);
+	}, [
+		canReorder,
+		isOrderSortActive,
+		orderDirection,
+		viewState
+	]);
+	const hasViewOptionsState = hasActiveFilters || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
+	const clearFilters = () => {
+		viewState.setConfig({
+			...viewState.config,
+			filters: []
+		});
+	};
+	React.useEffect(() => {
+		if (isReorderMode && !canReorder) setIsReorderMode(false);
+	}, [isReorderMode, canReorder]);
 	const table = useReactTable({
 		data: filteredItems,
 		columns: visibleColumnDefs,
@@ -448,12 +1105,152 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		onSortingChange: handleSortingChange,
 		enableRowSelection: true,
 		onRowSelectionChange: setRowSelection,
-		getRowId: (row_0) => row_0.id,
+		getRowId: (row_1) => row_1.id,
 		state: {
 			sorting,
 			rowSelection
 		}
 	});
+	const tableRows = table.getRowModel().rows;
+	const visibleLeafColumns = table.getVisibleLeafColumns();
+	const selectColumnWidth = getColumnSize(visibleLeafColumns[0], 40);
+	const titleColumnWidth = getColumnSize(visibleLeafColumns[1], 360);
+	const sortableRowIds = useMemo(() => tableRows.map((row_2) => String(row_2.id)), [tableRows]);
+	const activeReorderRow = useMemo(() => activeReorderId ? tableRows.find((row_3) => String(row_3.id) === activeReorderId) : null, [activeReorderId, tableRows]);
+	const reorderSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleReorderDragStart = React.useCallback((event_1) => {
+		const initialRect = event_1.active.rect.current.initial;
+		clearReorderOverlay();
+		reorderStartOrderIdsRef.current = sortableRowIds;
+		setActiveReorderId(String(event_1.active.id));
+		setActiveReorderRect(initialRect ? {
+			width: initialRect.width,
+			height: initialRect.height
+		} : null);
+		setOptimisticOrderIds((current_0) => current_0 ?? sortableRowIds);
+	}, [clearReorderOverlay, sortableRowIds]);
+	const handleReorderDragCancel = React.useCallback(() => {
+		setOptimisticOrderIds(reorderStartOrderIdsRef.current);
+		clearReorderOverlay();
+		reorderStartOrderIdsRef.current = null;
+	}, [clearReorderOverlay]);
+	const handleReorderDragEnd = React.useCallback(async (event_2) => {
+		if (updateBatchMutation.isPending) {
+			clearReorderOverlay();
+			return;
+		}
+		const { active: active_0, over } = event_2;
+		const previousOrderIds = reorderStartOrderIdsRef.current ?? sortableRowIds;
+		reorderStartOrderIdsRef.current = null;
+		if (!over) {
+			setOptimisticOrderIds(previousOrderIds);
+			clearReorderOverlay();
+			return;
+		}
+		let nextOrderIds = previousOrderIds;
+		if (active_0.id !== over.id) {
+			const oldIndex = previousOrderIds.indexOf(String(active_0.id));
+			const newIndex = previousOrderIds.indexOf(String(over.id));
+			if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) {
+				clearReorderOverlay(REORDER_DROP_DURATION);
+				return;
+			}
+			nextOrderIds = arrayMove(previousOrderIds, oldIndex, newIndex);
+		}
+		if (nextOrderIds.join("\0") === previousOrderIds.join("\0")) {
+			clearReorderOverlay(REORDER_DROP_DURATION);
+			return;
+		}
+		setOptimisticOrderIds(nextOrderIds);
+		clearReorderOverlay(REORDER_DROP_DURATION);
+		const rowsById = new Map(tableRows.map((row_4) => [String(row_4.id), row_4]));
+		const reorderedRows = nextOrderIds.map((id_3) => rowsById.get(id_3)).filter((row_5) => !!row_5);
+		try {
+			await updateBatchMutation.mutateAsync({ updates: reorderedRows.map((row_6, index) => ({
+				id: String(row_6.id),
+				data: { [orderField]: (index + 1) * orderStep }
+			})) });
+			actionHelpers.toast.success("Order saved");
+		} catch (error) {
+			clearReorderOverlay();
+			setOptimisticOrderIds(previousOrderIds);
+			actionHelpers.toast.error(error instanceof Error ? error.message : "Could not save order");
+		}
+	}, [
+		sortableRowIds,
+		tableRows,
+		updateBatchMutation,
+		orderField,
+		orderStep,
+		actionHelpers.toast,
+		clearReorderOverlay
+	]);
+	const groupedRowModel = useMemo(() => {
+		const rows = tableRows;
+		const groupBy_0 = viewState.config.groupBy;
+		if (!groupBy_0) return rows.map((row_7) => ({
+			type: "row",
+			row: row_7
+		}));
+		const groupField = groupableFields.find((field_2) => field_2.name === groupBy_0);
+		const collapsedGroups = new Set(viewState.config.collapsedGroups ?? []);
+		const serverGroups = !isSearching ? listData?.groups : void 0;
+		if (serverGroups?.length) {
+			const rowsById_0 = new Map(rows.map((row_8) => [row_8.id, row_8]));
+			return serverGroups.flatMap((group) => {
+				const label = stringifyGroupValue(group.value, groupField, resolveText);
+				const groupKey = `${groupBy_0}:${label}`;
+				const collapsed = collapsedGroups.has(groupKey);
+				const groupRows = (group.docs ?? []).map((doc) => rowsById_0.get(String(doc.id))).filter(Boolean);
+				return [{
+					type: "group",
+					key: groupKey,
+					label,
+					count: group.count,
+					collapsed
+				}, ...collapsed ? [] : groupRows.map((row_9) => ({
+					type: "row",
+					row: row_9
+				}))];
+			});
+		}
+		const groups = /* @__PURE__ */ new Map();
+		for (const row_10 of rows) {
+			const valueLabel = stringifyGroupValue(row_10.original?.[groupBy_0], groupField, resolveText);
+			const groupKey_0 = `${groupBy_0}:${valueLabel}`;
+			const group_0 = groups.get(groupKey_0);
+			if (group_0) {
+				group_0.rows.push(row_10);
+				continue;
+			}
+			groups.set(groupKey_0, {
+				label: valueLabel,
+				rows: [row_10],
+				sortIndex: getGroupSortIndex(row_10.original?.[groupBy_0], groupField)
+			});
+		}
+		return Array.from(groups.entries()).sort(([, a], [, b]) => a.sortIndex - b.sortIndex).flatMap(([key_0, group_1]) => {
+			const collapsed_0 = collapsedGroups.has(key_0);
+			return [{
+				type: "group",
+				key: key_0,
+				label: group_1.label,
+				count: group_1.rows.length,
+				collapsed: collapsed_0
+			}, ...collapsed_0 ? [] : group_1.rows.map((row_11) => ({
+				type: "row",
+				row: row_11
+			}))];
+		});
+	}, [
+		tableRows,
+		viewState.config.groupBy,
+		viewState.config.collapsedGroups,
+		groupableFields,
+		isSearching,
+		listData?.groups,
+		resolveText
+	]);
 	const handleSaveView = (name, config_0) => {
 		saveViewMutation.mutate({
 			name,
@@ -463,11 +1260,11 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	const handleDeleteView = (viewId) => {
 		deleteViewMutation.mutate(viewId);
 	};
-	const handleRowClick = (item_0) => {
-		navigate(`${basePath}/collections/${collection}/${item_0.id}`);
+	const handleRowClick = (item_4) => {
+		navigate(`${basePath}/collections/${collection}/${item_4.id}`);
 	};
 	const handleBulkDelete = React.useCallback(async (ids_0) => {
-		const results = await Promise.allSettled(ids_0.map((id) => deleteMutation.mutateAsync({ id })));
+		const results = await Promise.allSettled(ids_0.map((id_4) => deleteMutation.mutateAsync({ id: id_4 })));
 		const successCount = results.filter((r) => r.status === "fulfilled").length;
 		const failCount = results.filter((r_0) => r_0.status === "rejected").length;
 		if (failCount === 0) actionHelpers.toast.success(t("collection.bulkDeleteSuccess", { count: successCount }));
@@ -482,7 +1279,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		t
 	]);
 	const handleBulkRestore = React.useCallback(async (ids_1) => {
-		const results_0 = await Promise.allSettled(ids_1.map((id_0) => restoreMutation.mutateAsync({ id: id_0 })));
+		const results_0 = await Promise.allSettled(ids_1.map((id_5) => restoreMutation.mutateAsync({ id: id_5 })));
 		const successCount_0 = results_0.filter((r_1) => r_1.status === "fulfilled").length;
 		const failCount_0 = results_0.filter((r_2) => r_2.status === "rejected").length;
 		if (failCount_0 === 0) actionHelpers.toast.success(t("collection.bulkRestoreSuccess", { count: successCount_0 }));
@@ -496,100 +1293,160 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		actionHelpers,
 		t
 	]);
-	if (listError && !isSearching) return /* @__PURE__ */ jsx("div", {
-		className: "container",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground flex h-64 flex-col items-center justify-center gap-3",
-			children: [
-				/* @__PURE__ */ jsx(Icon, {
-					icon: "ph:warning-circle",
-					className: "text-destructive size-8"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: listError instanceof Error ? listError.message : t("errors.failedToLoad")
-				}),
-				/* @__PURE__ */ jsx(Button, {
+	if (listError && !isSearching) {
+		const errorMessage = listError instanceof Error ? listError.message : void 0;
+		return /* @__PURE__ */ jsx("div", {
+			className: "container",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				variant: "error",
+				iconName: "ph:warning-circle",
+				title: t("error.failedToLoad"),
+				description: errorMessage,
+				height: "h-64",
+				action: /* @__PURE__ */ jsxs(Button, {
 					variant: "outline",
 					size: "sm",
+					className: "gap-2",
 					onClick: () => window.location.reload(),
-					children: t("common.retry")
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrow-clockwise",
+						className: "size-3.5"
+					}), t("common.retry")]
 				})
-			]
-		})
-	});
-	if (isLoading) return /* @__PURE__ */ jsx("div", {
-		className: "container",
-		"aria-busy": "true",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground flex h-64 items-center justify-center",
-			role: "status",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: "ph:spinner-gap",
-				className: "size-6 animate-spin",
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Loading collection data..."
-			})]
-		})
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "qa-table-view min-w-0",
+			})
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ jsx(TableViewSkeleton, {});
+	const emptyStateTitle = isSearching || hasActiveFilters ? t("collectionSearch.noResults") : t("table.noItemsInCollection");
+	const emptyStateDescription = isSearching ? t("collectionSearch.noResultsDescription") : hasActiveFilters ? t("viewOptions.noResultsDescription") : t("table.emptyDescription");
+	const emptyStateAction = isSearching || hasActiveFilters ? /* @__PURE__ */ jsxs(Fragment, { children: [isSearching && /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "sm",
+		className: "gap-2",
+		onClick: () => setSearchTerm(""),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:x",
+			className: "size-3.5"
+		}), t("common.clear")]
+	}), hasActiveFilters && /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "sm",
+		className: "gap-2",
+		onClick: clearFilters,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:funnel-x",
+			className: "size-3.5"
+		}), t("viewOptions.clearFilters")]
+	})] }) : void 0;
+	return /* @__PURE__ */ jsx(AdminViewLayout, {
+		header: /* @__PURE__ */ jsx(AdminViewHeader, {
+			title: resolveText(config?.label ?? schema?.admin?.config?.label, collection),
+			titleAccessory: localeOptions.length > 0 ? /* @__PURE__ */ jsx(LocaleSwitcher, {
+				locales: localeOptions,
+				value: contentLocale,
+				onChange: setContentLocale
+			}) : void 0,
+			description: resolveText(config?.description ?? schema?.admin?.config?.description),
+			actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+				isOrderableEnabled && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					className: cn("relative aria-disabled:opacity-50", isReorderMode && "border-foreground bg-foreground text-background hover:bg-foreground/90 hover:text-background"),
+					onClick: handleReorderToggle,
+					"aria-label": reorderAriaLabel,
+					"aria-disabled": !canReorder || void 0,
+					"aria-pressed": isReorderMode,
+					children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrows-down-up" })
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					align: "end",
+					children: reorderTooltip
+				})] }),
+				showSearch && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					className: "relative",
+					onClick: () => setIsSearchPanelOpen((open) => !open),
+					"aria-label": t("common.search"),
+					children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" }), searchTerm && /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute top-1 right-1 size-1.5 rounded-full" })]
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					align: "end",
+					children: t("common.search")
+				})] }),
+				showFilters && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					className: "relative",
+					onClick: () => setIsSheetOpen(true),
+					"aria-label": t("viewOptions.title"),
+					children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:sliders-horizontal" }), hasViewOptionsState && /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute top-1 right-1 size-1.5 rounded-full" })]
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					align: "end",
+					children: t("viewOptions.title")
+				})] }),
+				canUploadToCollection && /* @__PURE__ */ jsx(UploadCollectionButton, {
+					collection,
+					onUploaded: () => actionHelpers.invalidateCollection(collection)
+				}),
+				headerActions,
+				((actions.header.primary?.length ?? 0) > 0 || (actions.header.secondary?.length ?? 0) > 0) && /* @__PURE__ */ jsx(HeaderActions, {
+					actions: actions.header,
+					collection,
+					helpers: actionHelpers,
+					onOpenDialog: (action_0) => openDialog(action_0)
+				})
+			] })
+		}),
+		contentClassName: "overflow-y-auto pb-3",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "qa-table-view__inner min-w-0 space-y-4",
+			className: "qa-table-view min-w-0 space-y-4",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "qa-table-view__header flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+				showToolbar && showSearch && (isSearchPanelOpen || searchTerm) && /* @__PURE__ */ jsx("div", {
+					className: "max-w-xl",
+					children: /* @__PURE__ */ jsx(SearchInput, {
+						value: searchTerm,
+						onChange: (e_3) => setSearchTerm(e_3.target.value),
+						onClear: () => setSearchTerm(""),
+						placeholder: t("common.search"),
+						containerClassName: "h-10"
+					})
+				}),
+				isReorderMode && canUseOrderableSort && /* @__PURE__ */ jsxs("div", {
+					className: "border-border/70 bg-muted/30 text-muted-foreground flex min-h-10 items-center justify-between gap-3 border-y px-3 py-2 font-mono text-xs",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ jsx("h1", {
-								className: "qa-table-view__title truncate text-2xl font-extrabold tracking-tight md:text-3xl",
-								children: resolveText(config?.label ?? schema?.admin?.config?.label, collection)
-							}), localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
-								locales: localeOptions,
-								value: contentLocale,
-								onChange: setContentLocale
-							})]
-						}), config?.description ?? schema?.admin?.config?.description ? /* @__PURE__ */ jsx("p", {
-							className: "qa-table-view__description text-muted-foreground mt-1 line-clamp-2 text-sm",
-							children: resolveText(config?.description ?? schema?.admin?.config?.description)
-						}) : null]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex shrink-0 items-center gap-2",
-						children: [headerActions, ((actions.header.primary?.length ?? 0) > 0 || (actions.header.secondary?.length ?? 0) > 0) && /* @__PURE__ */ jsx(HeaderActions, {
-							actions: actions.header,
-							collection,
-							helpers: actionHelpers,
-							onOpenDialog: (action) => openDialog(action)
-						})]
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "bg-foreground text-background inline-flex size-5 items-center justify-center rounded-full",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:arrows-down-up",
+									className: "size-3"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-foreground font-medium",
+								children: "Reorder mode"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "hidden sm:inline",
+								children: [
+									"Sorted by ",
+									orderField,
+									" ",
+									orderDirection,
+									"."
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => setIsReorderMode(false),
+						children: "Done"
 					})]
 				}),
-				showToolbar && /* @__PURE__ */ jsx("div", {
-					className: "space-y-2",
-					children: /* @__PURE__ */ jsxs(Toolbar, { children: [showSearch && /* @__PURE__ */ jsx(ToolbarSection, {
-						className: "flex-1",
-						children: /* @__PURE__ */ jsx(SearchInput, {
-							value: searchTerm,
-							onChange: (e_3) => setSearchTerm(e_3.target.value),
-							onClear: () => setSearchTerm(""),
-							placeholder: t("common.search"),
-							containerClassName: "border-none bg-transparent dark:bg-transparent"
-						})
-					}), showFilters && /* @__PURE__ */ jsxs(Fragment, { children: [showSearch && /* @__PURE__ */ jsx(ToolbarSeparator, {}), /* @__PURE__ */ jsx(ToolbarSection, { children: /* @__PURE__ */ jsxs(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => setIsSheetOpen(true),
-						className: "gap-2",
-						children: [/* @__PURE__ */ jsx(Icon, {
-							icon: "ph:sliders-horizontal",
-							width: 16,
-							height: 16
-						}), t("viewOptions.title")]
-					}) })] })] })
-				}),
 				/* @__PURE__ */ jsx(BulkActionToolbar, {
 					table,
 					actions: actions.bulk,
@@ -597,104 +1454,178 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					helpers: actionHelpers,
 					totalCount: isSearching ? searchData?.total : listData?.totalDocs,
 					pageCount: filteredItems.length,
-					onOpenDialog: (action_0, items_0) => openDialog(action_0, items_0),
+					onOpenDialog: (action_1, items_0) => openDialog(action_1, items_0),
 					onBulkDelete: handleBulkDelete,
 					onBulkRestore: handleBulkRestore,
 					filterCount: viewState.config.filters.length,
 					onOpenFilters: () => setIsSheetOpen(true),
-					onClearFilters: () => viewState.setConfig({
-						...viewState.config,
-						filters: []
-					})
+					onClearFilters: clearFilters
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "qa-table-view__table-wrapper bg-card border-border min-w-0 overflow-x-auto border",
-					children: [/* @__PURE__ */ jsxs(Table, {
-						"aria-label": resolveText(config?.label ?? schema?.admin?.config?.label, collection),
-						children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
-							className: "hover:bg-transparent",
-							children: headerGroup.headers.map((header, headerIndex) => {
-								const stickyLeft = headerIndex === 0 ? 0 : headerIndex === 1 ? 36 : void 0;
-								const showStickyBorder = headerIndex === 1;
-								const isCheckboxCol = headerIndex === 0;
-								const sortDirection = header.column.getIsSorted();
-								const ariaSort = header.column.getCanSort() ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
-								return /* @__PURE__ */ jsx(TableHead, {
-									stickyLeft,
-									showStickyBorder,
-									className: isCheckboxCol ? "w-9 min-w-9 px-1.5" : void 0,
-									"aria-sort": ariaSort,
-									children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("button", {
-										type: "button",
-										className: header.column.getCanSort() ? "hover:text-foreground flex cursor-pointer items-center gap-2 transition-colors select-none" : "",
-										onClick: header.column.getToggleSortingHandler(),
-										"aria-label": header.column.getCanSort() ? `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id}` : void 0,
-										children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ jsx("span", {
-											"aria-hidden": "true",
-											children: header.column.getIsSorted() === "asc" ? "↑" : "↓"
-										})]
-									})
-								}, header.id);
-							})
-						}, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row_1) => {
-							const isRowDeleted = !!row_1.original?.deletedAt;
-							return /* @__PURE__ */ jsx(TableRow, {
-								"data-state": row_1.getIsSelected() && "selected",
-								className: cn("group", isHighlighted(row_1.id) && "animate-realtime-pulse", isRowDeleted && "opacity-50"),
-								children: row_1.getVisibleCells().map((cell, cellIndex) => {
-									return /* @__PURE__ */ jsx(TableCell, {
-										stickyLeft: cellIndex === 0 ? 0 : cellIndex === 1 ? 36 : void 0,
-										showStickyBorder: cellIndex === 1,
-										className: cellIndex === 0 ? "w-9 min-w-9 px-1.5" : void 0,
-										children: cellIndex === 1 ? /* @__PURE__ */ jsxs("div", {
-											className: "flex items-center gap-2",
-											children: [
-												/* @__PURE__ */ jsx("button", {
+					className: "qa-table-view__table-wrapper min-w-0",
+					children: [/* @__PURE__ */ jsx(ScrollFade, {
+						leftInset: selectColumnWidth + titleColumnWidth,
+						children: /* @__PURE__ */ jsxs(DndContext, {
+							sensors: reorderSensors,
+							collisionDetection: closestCenter,
+							onDragStart: handleReorderDragStart,
+							onDragCancel: handleReorderDragCancel,
+							onDragEnd: handleReorderDragEnd,
+							children: [/* @__PURE__ */ jsxs(Table, {
+								className: "table-fixed",
+								style: { width: table.getTotalSize() },
+								"aria-label": resolveText(config?.label ?? schema?.admin?.config?.label, collection),
+								children: [
+									/* @__PURE__ */ jsx("colgroup", { children: visibleLeafColumns.map((column) => /* @__PURE__ */ jsx("col", { style: { width: column.getSize() } }, column.id)) }),
+									/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+										className: "hover:bg-transparent",
+										children: headerGroup.headers.map((header, headerIndex) => {
+											const isCheckboxCol = headerIndex === 0;
+											const columnWidth = getColumnSize(header.column, isCheckboxCol ? 40 : 120);
+											const stickyLeft = headerIndex < STICKY_TABLE_COLUMN_COUNT ? getStickyLeftOffset(visibleLeafColumns, headerIndex) : void 0;
+											const sortDirection = header.column.getIsSorted();
+											const ariaSort = header.column.getCanSort() ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+											return /* @__PURE__ */ jsx(TableHead, {
+												stickyLeft,
+												showStickyBorder: headerIndex === STICKY_TABLE_COLUMN_COUNT - 1,
+												className: isCheckboxCol ? "w-9 min-w-9 px-1.5" : void 0,
+												style: getColumnSizeStyle(columnWidth),
+												"aria-sort": ariaSort,
+												children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("button", {
 													type: "button",
-													onClick: () => handleRowClick(row_1.original),
-													className: "decoration-muted-foreground/50 hover:decoration-foreground cursor-pointer text-left underline underline-offset-2 transition-colors",
-													children: flexRender(cell.column.columnDef.cell, cell.getContext())
-												}),
-												isRowDeleted && /* @__PURE__ */ jsxs("span", {
-													className: "text-destructive bg-destructive/10 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
-													children: [/* @__PURE__ */ jsx(Icon, {
-														icon: "ph:trash",
-														className: "size-3"
-													}), t("common.deleted")]
-												}),
-												isDocLocked(row_1.id) && (() => {
-													const lock = getLock(row_1.id);
-													const user_0 = lock ? getLockUser(lock) : null;
-													return /* @__PURE__ */ jsxs("span", {
-														className: "text-muted-foreground bg-muted inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
-														title: user_0?.name ?? user_0?.email ?? "Someone is editing",
-														children: [user_0?.image ? /* @__PURE__ */ jsx("img", {
-															src: user_0.image,
-															alt: "",
-															className: "size-4 rounded-full"
-														}) : /* @__PURE__ */ jsx(Icon, {
-															icon: "ph:pencil-simple",
-															className: "size-3"
-														}), /* @__PURE__ */ jsx("span", {
-															className: "max-w-20 truncate",
-															children: user_0?.name?.split(" ")[0] ?? t("table.editing")
-														})]
-													});
-												})()
-											]
-										}) : flexRender(cell.column.columnDef.cell, cell.getContext())
-									}, cell.id);
+													className: header.column.getCanSort() ? "hover:text-foreground focus-visible:ring-ring/40 -mx-1.5 flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-1.5 transition-colors select-none focus-visible:ring-2 focus-visible:outline-none" : "",
+													onClick: header.column.getToggleSortingHandler(),
+													"aria-label": header.column.getCanSort() ? `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id}` : void 0,
+													children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ jsx("span", {
+														"aria-hidden": "true",
+														children: header.column.getIsSorted() === "asc" ? "↑" : "↓"
+													})]
+												})
+											}, header.id);
+										})
+									}, headerGroup.id)) }),
+									/* @__PURE__ */ jsx(SortableContext, {
+										items: sortableRowIds,
+										strategy: verticalListSortingStrategy,
+										children: /* @__PURE__ */ jsx(TableBody, { children: groupedRowModel.map((entry) => {
+											if (entry.type === "group") return /* @__PURE__ */ jsxs(TableRow, {
+												className: "hover:bg-transparent",
+												children: [
+													/* @__PURE__ */ jsx(TableCell, {
+														stickyLeft: 0,
+														className: "w-9 min-w-9 border-b-0 px-1.5 group-hover/row:bg-transparent",
+														style: getColumnSizeStyle(selectColumnWidth)
+													}),
+													/* @__PURE__ */ jsx(TableCell, {
+														stickyLeft: selectColumnWidth,
+														showStickyBorder: true,
+														className: "bg-background top-8 z-20 border-b-0 group-hover/row:bg-transparent",
+														style: getColumnSizeStyle(titleColumnWidth),
+														children: /* @__PURE__ */ jsxs("button", {
+															type: "button",
+															"aria-expanded": !entry.collapsed,
+															className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 -ml-1 inline-flex min-h-8 items-center gap-2 rounded-md px-1 font-mono text-[11px] font-semibold tracking-[0.12em] uppercase transition-colors focus-visible:ring-2 focus-visible:outline-none",
+															onClick: () => viewState.toggleCollapsedGroup(entry.key),
+															children: [
+																/* @__PURE__ */ jsx(Icon, {
+																	icon: entry.collapsed ? "ph:caret-right" : "ph:caret-down",
+																	className: "size-3.5 shrink-0"
+																}),
+																/* @__PURE__ */ jsx("span", { children: entry.label }),
+																groupingConfig?.showCounts !== false && /* @__PURE__ */ jsx("span", {
+																	className: "bg-muted text-muted-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] tracking-normal tabular-nums",
+																	children: entry.count
+																})
+															]
+														})
+													}),
+													visibleLeafColumns.length > STICKY_TABLE_COLUMN_COUNT && /* @__PURE__ */ jsx(TableCell, {
+														colSpan: visibleLeafColumns.length - STICKY_TABLE_COLUMN_COUNT,
+														className: "border-b-0"
+													})
+												]
+											}, entry.key);
+											const row_12 = entry.row;
+											const isRowDeleted = !!row_12.original?.deletedAt;
+											return /* @__PURE__ */ jsx(isReorderMode ? SortableTableRow : TableRow, {
+												id: String(row_12.id),
+												"data-state": row_12.getIsSelected() && "selected",
+												className: cn("group", isReorderMode && "bg-muted/[0.18]", isHighlighted(row_12.id) && "animate-realtime-pulse", isRowDeleted && "opacity-50"),
+												children: row_12.getVisibleCells().map((cell, cellIndex) => {
+													const isCheckboxCol_0 = cellIndex === 0;
+													const columnWidth_0 = getColumnSize(cell.column, isCheckboxCol_0 ? 40 : 120);
+													const stickyLeft_0 = cellIndex < STICKY_TABLE_COLUMN_COUNT ? getStickyLeftOffset(visibleLeafColumns, cellIndex) : void 0;
+													const isTitleCol = cellIndex === 1;
+													return /* @__PURE__ */ jsx(TableCell, {
+														stickyLeft: stickyLeft_0,
+														showStickyBorder: cellIndex === STICKY_TABLE_COLUMN_COUNT - 1,
+														className: isCheckboxCol_0 ? "w-9 min-w-9 px-1.5" : void 0,
+														style: getColumnSizeStyle(columnWidth_0),
+														children: isTitleCol ? /* @__PURE__ */ jsxs("div", {
+															className: "flex min-w-0 items-center gap-2",
+															children: [
+																/* @__PURE__ */ jsx("button", {
+																	type: "button",
+																	onClick: () => handleRowClick(row_12.original),
+																	disabled: isReorderMode,
+																	className: cn("decoration-muted-foreground/50 hover:decoration-foreground max-w-full min-w-0 text-left underline underline-offset-2 transition-colors disabled:cursor-default disabled:no-underline", !isReorderMode && "cursor-pointer"),
+																	children: flexRender(cell.column.columnDef.cell, cell.getContext())
+																}),
+																isRowDeleted && /* @__PURE__ */ jsxs("span", {
+																	className: "text-destructive bg-destructive/10 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
+																	children: [/* @__PURE__ */ jsx(Icon, {
+																		icon: "ph:trash",
+																		className: "size-3"
+																	}), t("common.deleted")]
+																}),
+																isDocLocked(row_12.id) && (() => {
+																	const lock = getLock(row_12.id);
+																	const user_0 = lock ? getLockUser(lock) : null;
+																	return /* @__PURE__ */ jsxs("span", {
+																		className: "text-muted-foreground bg-muted inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
+																		title: user_0?.name ?? user_0?.email ?? "Someone is editing",
+																		children: [user_0?.image ? /* @__PURE__ */ jsx("img", {
+																			src: user_0.image,
+																			alt: "",
+																			className: "image-outline size-4 rounded-full"
+																		}) : /* @__PURE__ */ jsx(Icon, {
+																			icon: "ph:pencil-simple",
+																			className: "size-3"
+																		}), /* @__PURE__ */ jsx("span", {
+																			className: "max-w-20 truncate",
+																			children: user_0?.name?.split(" ")[0] ?? t("table.editing")
+																		})]
+																	});
+																})()
+															]
+														}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+													}, cell.id);
+												})
+											}, row_12.id);
+										}) })
+									})
+								]
+							}), /* @__PURE__ */ jsx(DragOverlay, {
+								adjustScale: false,
+								dropAnimation: REORDER_DROP_ANIMATION,
+								children: /* @__PURE__ */ jsx(ReorderDragOverlay, {
+									row: activeReorderRow,
+									columns: visibleLeafColumns,
+									rect: activeReorderRect
 								})
-							}, row_1.id);
-						}) })]
+							})]
+						})
 					}), !table.getRowModel().rows.length && (emptyState || /* @__PURE__ */ jsx(EmptyState, {
-						title: "NO_RESULTS",
-						description: isSearching ? t("collectionSearch.noResults") : t("table.noItemsInCollection"),
+						variant: isSearching || hasActiveFilters ? "search" : "empty",
+						iconName: isSearching ? "ph:magnifying-glass" : hasActiveFilters ? "ph:funnel-x" : "ph:tray",
+						title: emptyStateTitle,
+						description: emptyStateDescription,
+						action: emptyStateAction,
 						height: "h-48"
 					}))]
 				}),
 				!isSearching && /* @__PURE__ */ jsxs("div", {
-					className: "qa-table-view__pagination flex items-center justify-between gap-4 py-2",
+					className: "qa-table-view__pagination flex items-center justify-between gap-4 py-2 tabular-nums",
 					role: "navigation",
 					"aria-label": t("table.pagination"),
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -757,7 +1688,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 								return /* @__PURE__ */ jsx(Button, {
 									variant: currentPage === pageNum ? "secondary" : "ghost",
 									size: "sm",
-									className: "size-8 min-w-[32px] p-0",
+									className: "size-8 min-w-[32px] p-0 tabular-nums",
 									onClick: () => viewState.setPage(pageNum),
 									"aria-label": `Page ${pageNum}`,
 									"aria-current": currentPage === pageNum ? "page" : void 0,
@@ -780,7 +1711,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					})]
 				}),
 				isSearching && /* @__PURE__ */ jsxs("div", {
-					className: "text-muted-foreground flex items-center gap-2 py-2 text-sm",
+					className: "text-muted-foreground flex items-center gap-2 py-2 text-sm tabular-nums",
 					"aria-live": "polite",
 					"aria-atomic": "true",
 					children: [
@@ -809,6 +1740,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					onConfigChange: viewState.setConfig,
 					isOpen: isSheetOpen,
 					onOpenChange: setIsSheetOpen,
+					groupableFields,
+					defaultGroupBy,
 					savedViews: savedViewsData?.docs ?? [],
 					savedViewsLoading,
 					onSaveView: handleSaveView,
@@ -817,7 +1750,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				}),
 				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 					open: !!dialogAction,
-					onOpenChange: (open) => !open && closeDialog(),
+					onOpenChange: (open_0) => !open_0 && closeDialog(),
 					action: dialogAction,
 					collection,
 					item: dialogItem,