runeforge 0.0.52 → 0.0.54

package/dist/components/table/PaginatedTable.svelte

@@ -4,15 +4,20 @@
 	import Paginator from './Paginator.svelte';
 	import TableHeader from './TableHeader.svelte';
 	import { SortState, FilterState, snapshotFilter } from './state.svelte.js';
-	import { distinctEntries, isFilterable } from './utils.js';
+	import {
+		distinctEntries,
+		isFilterable,
+		resolveReorderComparator
+	} from './utils.js';
 	import type {
 		FilterSnapshot,
 		IndexedRow,
+		ReorderOptions,
 		ServerPagination,
 		SortDirection,
 		TableQuery
 	} from '../../types/table.js';
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import type { ColumnDefinition } from '../../types/crud.js';
 	import { getStrings } from '../../i18n/context.js';
 
@@ -31,7 +36,9 @@
 		initialFilters = undefined as Partial<FilterSnapshot> | undefined,
 		onPaginationChange = undefined as ((query: TableQuery) => void) | undefined,
 		visibleRows = $bindable<T[]>([]),
-		query = $bindable<TableQuery | undefined>(undefined)
+		query = $bindable<TableQuery | undefined>(undefined),
+		reorder = undefined as ReorderOptions<T> | undefined,
+		onReorder = undefined as ((rows: T[]) => void) | undefined
 	}: {
 		data?: T[];
 		columns?: ColumnDefinition<T>[];
@@ -53,6 +60,15 @@
 		/** Current ordering + filters snapshot, kept in sync for callers that
 		 * need to replicate the active query (e.g. exporting server-side). */
 		query?: TableQuery;
+		/** Turns on drag-to-reorder. Per-column filters are suppressed and row
+		 * order is fully owned by `reorder.compare`/`reorder.attribute` while
+		 * it's active — ignored entirely in server-pagination mode
+		 * (`pagination` set), since the full row set needs to be reachable
+		 * client-side for drag positions to be meaningful. */
+		reorder?: ReorderOptions<T>;
+		/** Fires after a drag settles with the complete reordered row list
+		 * (client mode only). The caller decides how to persist it. */
+		onReorder?: (rows: T[]) => void;
 	} = $props();
 
 	// Intentional one-time hydration of local state from the initial prop
@@ -100,24 +116,103 @@
 			: distinctEntries(data, columns)
 	);
 
+	// Server-pagination mode owns its own full row set server-side, where
+	// drag positions can't be reconciled across pages — reorder only makes
+	// sense once the whole (client-mode) row set is reachable.
+	const reorderActive = $derived(!!reorder && !pagination);
+
 	const indexed = $derived(data.map((row, index): IndexedRow<T> => ({ row, index })));
+	// Dragging needs the complete row set reachable, so filters (which would
+	// hide rows) are bypassed while reorder is active.
 	const filtered = $derived(
-		pagination ? indexed : indexed.filter(({ row }) => filter.matches(row, columns))
+		pagination || reorderActive ? indexed : indexed.filter(({ row }) => filter.matches(row, columns))
+	);
+	const sorted = $derived(pagination || reorderActive ? filtered : sort.apply(filtered, columns));
+
+	// Reorder mode owns ordering outright (column-header sorting is disabled
+	// while it's active — see TableHeader), via `reorder.compare` when given
+	// (composite orders) or plain ascending by `reorder.attribute`.
+	const reorderComparator = $derived(reorder ? resolveReorderComparator(reorder) : undefined);
+	const reorderBase = $derived(
+		reorderActive ? [...indexed].sort((a, b) => reorderComparator!(a.row, b.row)) : []
 	);
-	const sorted = $derived(pagination ? filtered : sort.apply(filtered, columns));
+
+	// Local override applied on top of `reorderBase` once the user starts
+	// dragging, so the displayed order doesn't snap back on the next reactive
+	// update while persistence is in flight — cleared whenever `data` changes
+	// reference from anywhere else (e.g. a reload after persisting).
+	let manualOrder = $state<IndexedRow<T>[] | null>(null);
+	let lastReorderData: T[] | undefined;
+	$effect(() => {
+		if (data !== lastReorderData) {
+			manualOrder = null;
+			lastReorderData = data;
+		}
+	});
+	// The full reordered row list (all of it — pagination during reorder mode
+	// is a visual window over this, not a slice; see `visibleRange` below).
+	const reorderIndexed = $derived(reorderActive ? (manualOrder ?? reorderBase) : []);
+
+	// Escape cancels an in-progress drag — see the `keydown` listener below.
+	// SortableJS has no public "abort" API, so cancelling means: let the drag
+	// settle normally (wherever the pointer happens to be), then discard that
+	// outcome here instead of persisting it.
+	let cancelReorder = false;
+
+	async function handleReorderSettled(rows: IndexedRow<T>[]) {
+		// TableBody's `onEnd` fires this on every drag that settles, whether or
+		// not any row actually moved — the natural place to also clear the
+		// dragging/hover-zone state.
+		isDragging = false;
+		resetHoverZone();
+		if (cancelReorder) {
+			cancelReorder = false;
+			// `manualOrder` was `null` for the whole drag — it's only ever set
+			// here, at settle time — while SortableJS was moving the *actual*
+			// DOM nodes around live, entirely outside Svelte's own bookkeeping
+			// for this keyed each block. So right now Svelte's internal model
+			// of "current order" still says the original order, same as what
+			// we want to revert to — setting `manualOrder` straight to that is
+			// a no-op *to Svelte* (nothing to reconcile from its point of
+			// view), leaving the real DOM stuck wherever SortableJS dropped it.
+			// Sync to `rows` (where it actually settled) first — a real change
+			// Svelte will apply — then revert on the next tick, which is now a
+			// real change too.
+			manualOrder = rows;
+			await tick();
+			manualOrder = [...reorderBase];
+			return;
+		}
+		manualOrder = rows;
+		onReorder?.(rows.map((e) => e.row));
+	}
 
 	const effectivePageSize = $derived(pagination?.pageSize ?? pageSize);
 	const totalPages = $derived(
-		pagination?.totalPages ?? Math.ceil(sorted.length / effectivePageSize)
+		reorderActive
+			? Math.max(1, Math.ceil(reorderIndexed.length / effectivePageSize))
+			: (pagination?.totalPages ?? Math.ceil(sorted.length / effectivePageSize))
 	);
 	const displayPage = $derived(pagination?.page ?? currentPage);
 	const pageStart = $derived((displayPage - 1) * effectivePageSize);
+	const pageEnd = $derived(pageStart + effectivePageSize);
+	// Reorder mode: TableBody gets the *entire* reordered set (so a drag can
+	// reach across a page flip without SortableJS losing track of rows), with
+	// `visibleRange` telling it which positions are actually on screen.
 	const pageData = $derived(
-		pagination ? sorted : sorted.slice(pageStart, pageStart + effectivePageSize)
+		reorderActive ? reorderIndexed : pagination ? sorted : sorted.slice(pageStart, pageEnd)
+	);
+	const visiblePageData = $derived(
+		reorderActive ? reorderIndexed.slice(pageStart, pageEnd) : pageData
 	);
-	const totalCount = $derived(pagination?.total ?? sorted.length);
-	const allChecked = $derived(pageData.length > 0 && pageData.every((e) => selected.has(e.index)));
-	const someChecked = $derived(pageData.some((e) => selected.has(e.index)));
+	const visibleRange = $derived(
+		reorderActive ? { start: pageStart, end: Math.min(pageEnd, reorderIndexed.length) } : undefined
+	);
+	const totalCount = $derived(reorderActive ? reorderIndexed.length : (pagination?.total ?? sorted.length));
+	const allChecked = $derived(
+		visiblePageData.length > 0 && visiblePageData.every((e) => selected.has(e.index))
+	);
+	const someChecked = $derived(visiblePageData.some((e) => selected.has(e.index)));
 
 	// Client mode only: server mode's totalPages is externally owned, clamping
 	// here would fight with URL-driven navigation while a page reload is pending.
@@ -141,9 +236,10 @@
 		}
 	});
 
-	// Surface the filtered+sorted rows and current query for callers (e.g. export).
+	// Surface the filtered+sorted rows and current query for callers (e.g.
+	// export) — the full set pre-pagination in both regular and reorder mode.
 	$effect(() => {
-		visibleRows = sorted.map((e) => e.row);
+		visibleRows = (reorderActive ? reorderIndexed : sorted).map((e) => e.row);
 	});
 	$effect(() => {
 		query = currentQuery(displayPage);
@@ -165,8 +261,8 @@
 	}
 
 	function toggleAll() {
-		if (allChecked) pageData.forEach((e) => selected.delete(e.index));
-		else pageData.forEach((e) => selected.add(e.index));
+		if (allChecked) visiblePageData.forEach((e) => selected.delete(e.index));
+		else visiblePageData.forEach((e) => selected.add(e.index));
 	}
 
 	function toggleItem(index: number) {
@@ -174,11 +270,255 @@
 		else selected.add(index);
 	}
 
-	const colCount = $derived(columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0));
+	const colCount = $derived(
+		columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0) + (reorderActive ? 1 : 0)
+	);
+
+	// ─── Drag-to-reorder: edge hover zones for flipping pages mid-drag ──────
+	//
+	// Hit-testing is computed from `wrapperEl`'s own layout box, not from the
+	// visual zone `<div>`s' rendered (Tailwind-classed) dimensions — the
+	// mechanic must keep working even if a consumer's Tailwind setup can't
+	// generate those utilities for some reason. The `<div>`s stay purely
+	// cosmetic, styled the same way as the rest of the library.
+
+	const ZONE_WIDTH_PX = 56;
+
+	let isDragging = $state(false);
+	let wrapperEl: HTMLElement | undefined = $state();
+	let leftProgress = $state(0);
+	let rightProgress = $state(0);
+	let hoverZone: 'left' | 'right' | null = null;
+	let hoverStart = 0;
+	let hoverTimer: ReturnType<typeof setInterval> | undefined;
+
+	// The "Pág N" label + chevron is positioned via JS (`position: fixed`),
+	// not CSS `sticky` — the zone spans the *whole* table, which can be much
+	// taller than the viewport, and every sticky-based attempt at keeping the
+	// label in view broke down somewhere: `top: 50%` resolves against the
+	// containing block's height (the full table), not the viewport, so it
+	// doesn't track scroll position at all; a `height: 100vh` sticky trick
+	// tracks scroll correctly through the top and middle of the table but
+	// still overshoots past the viewport once less than one viewport's worth
+	// of table remains below the current scroll position (confirmed with a
+	// 1611px table in a 900px viewport: correct at scroll 0 and 300, but the
+	// label ended up above the viewport, y=-335, once scrolled near the
+	// bottom). Computing the clamped position directly sidesteps all of it.
+	let labelCenterY = $state(0);
+	let labelLeft = $state(0);
+	let labelRight = $state(0);
+	// Measured off whichever label is currently mounted, so the clamp below
+	// knows the label's actual (responsive) height instead of a guessed
+	// constant — `prev`/`next` render identically, so either one will do.
+	let prevLabelEl: HTMLElement | undefined = $state();
+	let nextLabelEl: HTMLElement | undefined = $state();
+
+	function updateLabelPosition() {
+		const box = wrapperEl?.getBoundingClientRect();
+		if (!box) return;
+		if (box.top >= 0 && box.bottom <= window.innerHeight) {
+			// The whole zone already fits on screen — just center the label in
+			// it. Nothing to chase the viewport for here, and it keeps the
+			// label sitting in the visual middle of the zone instead of
+			// pinned to whichever edge the viewport-center math below would
+			// clamp it to.
+			labelCenterY = (box.top + box.bottom) / 2;
+			labelLeft = box.left;
+			labelRight = box.right;
+			return;
+		}
+		// The zone is taller than the viewport (or scrolled partly out of
+		// it): clamp to the viewport's vertical center, but never past the
+		// zone's own top/bottom — so it doesn't float outside the table (or
+		// off somewhere odd).
+		//
+		// That clamp alone only keeps the label's *center* inside the zone —
+		// the label itself (chevron + text, `-translate-y-1/2`'d around that
+		// center) can still stick out past the top or bottom edge. Pull the
+		// clamp in by half the label's own height to keep the whole label
+		// inside. When the zone is shorter than the label, full containment
+		// is impossible either way — center on the zone so it overflows
+		// evenly on both sides rather than being clipped on just one.
+		const halfLabel = (prevLabelEl ?? nextLabelEl)?.getBoundingClientRect().height ?? 0;
+		const minY = box.top + halfLabel / 2;
+		const maxY = box.bottom - halfLabel / 2;
+		const target = Math.min(Math.max(window.innerHeight / 2, box.top), box.bottom);
+		labelCenterY = minY <= maxY ? Math.min(Math.max(target, minY), maxY) : (box.top + box.bottom) / 2;
+		labelLeft = box.left;
+		labelRight = box.right;
+	}
+
+	const pageFlipThresholdMs = $derived(reorder?.pageFlipThresholdMs ?? 2000);
+
+	function resetHoverZone() {
+		if (hoverTimer) {
+			clearInterval(hoverTimer);
+			hoverTimer = undefined;
+		}
+		hoverZone = null;
+		leftProgress = 0;
+		rightProgress = 0;
+	}
+
+	function tickHoverZone() {
+		if (!hoverZone) return;
+		const elapsed = performance.now() - hoverStart;
+		const progress = Math.min(1, elapsed / pageFlipThresholdMs);
+		if (hoverZone === 'left') leftProgress = progress;
+		else rightProgress = progress;
+		if (progress >= 1) {
+			if (hoverZone === 'left' && currentPage > 1) currentPage--;
+			else if (hoverZone === 'right' && currentPage < totalPages) currentPage++;
+			// Keep hovering to flip again — dwell time restarts from here.
+			hoverStart = performance.now();
+		}
+	}
+
+	function enterZone(zone: 'left' | 'right') {
+		if (hoverZone === zone) return;
+		if (hoverTimer) clearInterval(hoverTimer);
+		hoverZone = zone;
+		hoverStart = performance.now();
+		leftProgress = 0;
+		rightProgress = 0;
+		hoverTimer = setInterval(tickHoverZone, 80);
+	}
+
+	function handleDragStart() {
+		isDragging = true;
+		updateLabelPosition();
+		// The label divs aren't mounted yet on this first call (they only
+		// render once `isDragging` flips, which Svelte applies to the DOM
+		// after this synchronous call returns) — `halfLabel` above falls back
+		// to 0 for this one frame. Re-run once they exist so the height-aware
+		// clamp kicks in immediately rather than waiting for the next pointer
+		// move or scroll.
+		tick().then(updateLabelPosition);
+	}
+
+	function handleDragMove(clientX: number, clientY: number) {
+		const box = wrapperEl?.getBoundingClientRect();
+		if (!box || clientY < box.top || clientY > box.bottom) {
+			resetHoverZone();
+			return;
+		}
+		if (clientX >= box.left && clientX <= box.left + ZONE_WIDTH_PX) enterZone('left');
+		else if (clientX <= box.right && clientX >= box.right - ZONE_WIDTH_PX) enterZone('right');
+		else resetHoverZone();
+	}
+
+	// SortableJS's own `onMove` is about "should this reordering happen", not
+	// general cursor tracking — it doesn't fire once the pointer strays from
+	// a valid drop target (e.g. into the edge margin), so the page-flip zones
+	// track the raw pointer directly via document-level listeners instead,
+	// active only while a drag is in progress. `dragover` (not `mousemove`)
+	// is what actually fires during a *native* HTML5 drag — which reorder
+	// uses instead of the mouse-simulated fallback whenever `multiDrag` is
+	// on — so both are wired up; whichever the current drag mode emits wins.
+	$effect(() => {
+		if (!isDragging) return;
+		function onPointerMove(e: MouseEvent | TouchEvent | DragEvent) {
+			updateLabelPosition();
+			const point = 'touches' in e ? e.touches[0] : e;
+			if (point) handleDragMove(point.clientX, point.clientY);
+		}
+		// Scrolling without moving the pointer (mouse wheel mid-drag, or the
+		// page having scrolled before the pointer ever reaches the zone) needs
+		// to reposition the label too — it's visible (at low opacity) for the
+		// whole drag, not just while actively hovering a zone.
+		function onScroll() {
+			updateLabelPosition();
+		}
+		document.addEventListener('mousemove', onPointerMove);
+		document.addEventListener('touchmove', onPointerMove);
+		document.addEventListener('dragover', onPointerMove);
+		window.addEventListener('scroll', onScroll, { passive: true });
+		return () => {
+			document.removeEventListener('mousemove', onPointerMove);
+			document.removeEventListener('touchmove', onPointerMove);
+			document.removeEventListener('dragover', onPointerMove);
+			window.removeEventListener('scroll', onScroll);
+		};
+	});
+
+	$effect(() => () => {
+		if (hoverTimer) clearInterval(hoverTimer);
+	});
+
+	// Escape cancels the drag in progress. SortableJS only knows how to
+	// finish a drag, not abort one, so this ends it the normal way (a real
+	// `mouseup` is what its fallback dragging listens for — see sortable.ts)
+	// and `handleReorderSettled` discards whatever it settled on instead of
+	// persisting it.
+	$effect(() => {
+		if (!isDragging) return;
+		function onKeyDown(e: KeyboardEvent) {
+			if (e.key !== 'Escape') return;
+			cancelReorder = true;
+			// SortableJS listens for `pointerup` when the browser supports Pointer
+			// Events (`options.supportPointer`, on by default) and only falls back
+			// to plain `mouseup`/`touchend` otherwise — dispatch both so this
+			// works regardless of which mode is active.
+			document.dispatchEvent(
+				new PointerEvent('pointerup', { bubbles: true, cancelable: true, pointerType: 'mouse' })
+			);
+			document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
+		}
+		document.addEventListener('keydown', onKeyDown);
+		return () => document.removeEventListener('keydown', onKeyDown);
+	});
 </script>
 
 <div class="flex flex-col gap-6">
-	<div class="min-w-0 overflow-x-auto rounded-box border border-base-content/10">
+	<div bind:this={wrapperEl} class="relative min-w-0 overflow-x-auto rounded-box border border-base-content/10">
+		{#if reorderActive && isDragging && totalPages > 1}
+			{#if currentPage > 1}
+				<div
+					data-reorder-page-zone="prev"
+					class="pointer-events-none absolute inset-y-0 left-0 z-10 w-12 bg-primary transition-opacity duration-150 sm:w-14"
+					style="opacity: {0.35 + leftProgress * 0.55}"
+					aria-hidden="true"
+				></div>
+				<!-- Positioned via JS (`labelCenterY`/`labelLeft`, computed in
+					`updateLabelPosition`), not CSS `sticky` — see that function's
+					comment for why: nothing sticky-based reliably stayed within the
+					viewport across the whole scroll range of a table taller than it. -->
+				<div
+					bind:this={prevLabelEl}
+					data-reorder-page-label="prev"
+					class="pointer-events-none fixed z-20 flex w-12 -translate-y-1/2 flex-col items-center
+						gap-1 text-primary-content sm:w-14"
+					style="top: {labelCenterY}px; left: {labelLeft}px;"
+					aria-hidden="true"
+				>
+					<span class="text-lg leading-none drop-shadow-sm sm:text-xl">‹</span>
+					<span class="text-center text-[10px] leading-tight font-semibold drop-shadow-sm sm:text-xs">
+						{strings.reorderPage(currentPage - 1)}
+					</span>
+				</div>
+			{/if}
+			{#if currentPage < totalPages}
+				<div
+					data-reorder-page-zone="next"
+					class="pointer-events-none absolute inset-y-0 right-0 z-10 w-12 bg-primary transition-opacity duration-150 sm:w-14"
+					style="opacity: {0.35 + rightProgress * 0.55}"
+					aria-hidden="true"
+				></div>
+				<div
+					bind:this={nextLabelEl}
+					data-reorder-page-label="next"
+					class="pointer-events-none fixed z-20 flex w-12 -translate-y-1/2 flex-col items-center
+						gap-1 text-primary-content sm:w-14"
+					style="top: {labelCenterY}px; left: {labelRight - ZONE_WIDTH_PX}px;"
+					aria-hidden="true"
+				>
+					<span class="text-lg leading-none drop-shadow-sm sm:text-xl">›</span>
+					<span class="text-center text-[10px] leading-tight font-semibold drop-shadow-sm sm:text-xs">
+						{strings.reorderPage(currentPage + 1)}
+					</span>
+				</div>
+			{/if}
+		{/if}
 		<table class="table table-zebra table-xs w-full text-xs sm:table-md sm:text-base">
 			<TableHeader
 				{columns}
@@ -191,6 +531,7 @@
 				{distinctValues}
 				hasRowActions={!!rowActions}
 				{actionsLabel}
+				{reorderActive}
 				onchange={handleHeaderChange}
 			/>
 			<TableBody
@@ -201,6 +542,10 @@
 				onToggle={toggleItem}
 				{colCount}
 				{rowActions}
+				reorder={reorderActive ? reorder : undefined}
+				{visibleRange}
+				onDragStart={handleDragStart}
+				onReorder={handleReorderSettled}
 			/>
 		</table>
 	</div>

package/dist/components/table/PaginatedTable.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteSet } from 'svelte/reactivity';
-import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../types/table.js';
-import type { Snippet } from 'svelte';
+import type { FilterSnapshot, ReorderOptions, ServerPagination, SortDirection, TableQuery } from '../../types/table.js';
+import { type Snippet } from 'svelte';
 import type { ColumnDefinition } from '../../types/crud.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
@@ -27,6 +27,15 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         /** Current ordering + filters snapshot, kept in sync for callers that
          * need to replicate the active query (e.g. exporting server-side). */
         query?: TableQuery;
+        /** Turns on drag-to-reorder. Per-column filters are suppressed and row
+         * order is fully owned by `reorder.compare`/`reorder.attribute` while
+         * it's active — ignored entirely in server-pagination mode
+         * (`pagination` set), since the full row set needs to be reachable
+         * client-side for drag positions to be meaningful. */
+        reorder?: ReorderOptions<T>;
+        /** Fires after a drag settles with the complete reordered row list
+         * (client mode only). The caller decides how to persist it. */
+        onReorder?: (rows: T[]) => void;
     };
     exports: {};
     bindings: "selected" | "visibleRows" | "query";

package/dist/components/table/TableBody.svelte

@@ -2,7 +2,15 @@
   import type { Snippet } from 'svelte';
   import type { SvelteSet } from 'svelte/reactivity';
   import type { ColumnDefinition } from '../../types/crud.js';
-  import type { IndexedRow } from '../../types/table.js';
+  import type { IndexedRow, ReorderOptions } from '../../types/table.js';
+  import { sortableRows, type SortEndIndices } from './sortable.js';
+  import { moveIndexedRows } from './utils.js';
+  import Button from '../form/Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
 
   let {
     columns,
@@ -12,6 +20,10 @@
     onToggle,
     colCount,
     rowActions,
+    reorder,
+    visibleRange,
+    onDragStart,
+    onReorder,
   }: {
     columns: ColumnDefinition<T>[];
     rows: IndexedRow<T>[];
@@ -20,10 +32,56 @@
     onToggle: (index: number) => void;
     colCount: number;
     rowActions?: Snippet<[T]>;
+    reorder?: ReorderOptions<T>;
+    /** Reorder mode only: positions within `rows` (not the `index` field)
+     * that are actually on screen — the rest render `hidden` so they stay in
+     * the DOM (and reachable by SortableJS) across a page flip mid-drag. */
+    visibleRange?: { start: number; end: number };
+    onDragStart?: () => void;
+    /** Fires once a drag settles, with the complete row list in its new
+     * order — computed from SortableJS's own before/after indices, correct
+     * uniformly for a single-row drag and a `multiDrag` group move alike. */
+    onReorder?: (rows: IndexedRow<T>[]) => void;
   } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+
+  let tbodyEl: HTMLElement | undefined = $state();
+
+  function handleDragEnd(indices: SortEndIndices) {
+    const fromIndices =
+      indices.oldIndicies.length > 0 ? indices.oldIndicies : [indices.oldIndex ?? -1];
+    const toIndex =
+      indices.newIndicies.length > 0 ? Math.min(...indices.newIndicies) : (indices.newIndex ?? -1);
+    onReorder?.(moveIndexedRows(rows, fromIndices, toIndex));
+  }
+
+  // Mirrors the checkbox selection into SortableJS's own MultiDrag selection
+  // registry, so a `multiDrag` drag moves whatever's currently checked
+  // instead of relying on the plugin's own click/modifier-key selection UX.
+  $effect(() => {
+    const utils = reorder?.multiDrag ? reorder.sortable.utils : undefined;
+    if (!utils || !tbodyEl) return;
+    for (const { index } of rows) {
+      const el = tbodyEl.querySelector(`[data-row-key="${index}"]`);
+      if (!(el instanceof HTMLElement)) continue;
+      if (selected.has(index)) utils.select(el);
+      else utils.deselect(el);
+    }
+  });
 </script>
 
-<tbody data-testid="paginated-table-body">
+<tbody
+  data-testid="paginated-table-body"
+  bind:this={tbodyEl}
+  use:sortableRows={{
+    enabled: !!reorder,
+    sortable: reorder?.sortable,
+    multiDrag: reorder?.multiDrag,
+    onStart: () => onDragStart?.(),
+    onEnd: handleDragEnd,
+  }}
+>
   {#if rows.length === 0}
     <tr>
       <td colspan={colCount} class="py-10 text-center text-base-content/50">
@@ -31,12 +89,34 @@
       </td>
     </tr>
   {:else}
-    {#each rows as { row, index } (index)}
+    {#each rows as { row, index }, position (index)}
+      {@const isHidden = !!visibleRange && (position < visibleRange.start || position >= visibleRange.end)}
       <tr
         class="hover"
+        class:group={!!reorder}
         class:cursor-pointer={selectable}
+        data-row-key={index}
+        style:display={isHidden ? 'none' : null}
         onclick={selectable ? () => onToggle(index) : undefined}
       >
+        {#if reorder}
+          {@const GripIcon = reorder.icon ?? icons.grip}
+          <td class="w-10 border-l-4 border-base-content/10 p-0 group-hover:border-primary/50">
+            <Button
+              type="button"
+              btn={false}
+              data-reorder-handle
+              class="flex h-full w-full cursor-grab items-center justify-center py-2 text-base-content/40 active:cursor-grabbing"
+              title={strings.reorder}
+              aria-label={strings.reorder}
+              onclick={(e) => e.stopPropagation()}
+            >
+              {#if GripIcon}
+                <GripIcon class="size-4" />
+              {/if}
+            </Button>
+          </td>
+        {/if}
         {#if selectable}
           <td>
             <input

package/dist/components/table/TableBody.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { SvelteSet } from 'svelte/reactivity';
 import type { ColumnDefinition } from '../../types/crud.js';
-import type { IndexedRow } from '../../types/table.js';
+import type { IndexedRow, ReorderOptions } from '../../types/table.js';
 declare function $$render<T extends object>(): {
     props: {
         columns: ColumnDefinition<T>[];
@@ -11,6 +11,19 @@ declare function $$render<T extends object>(): {
         onToggle: (index: number) => void;
         colCount: number;
         rowActions?: Snippet<[T]>;
+        reorder?: ReorderOptions<T>;
+        /** Reorder mode only: positions within `rows` (not the `index` field)
+         * that are actually on screen — the rest render `hidden` so they stay in
+         * the DOM (and reachable by SortableJS) across a page flip mid-drag. */
+        visibleRange?: {
+            start: number;
+            end: number;
+        };
+        onDragStart?: () => void;
+        /** Fires once a drag settles, with the complete row list in its new
+         * order — computed from SortableJS's own before/after indices, correct
+         * uniformly for a single-row drag and a `multiDrag` group move alike. */
+        onReorder?: (rows: IndexedRow<T>[]) => void;
     };
     exports: {};
     bindings: "";

package/dist/components/table/TableHeader.svelte

@@ -20,6 +20,7 @@
     distinctValues,
     hasRowActions = false,
     actionsLabel = strings.actions,
+    reorderActive = false,
     onchange,
   }: {
     columns: ColumnDefinition<T>[];
@@ -32,11 +33,12 @@
     distinctValues: Record<string, DistinctEntry<T>[]>;
     hasRowActions?: boolean;
     actionsLabel?: string;
+    reorderActive?: boolean;
     onchange?: () => void;
   } = $props();
 
   function sortBy(col: ColumnDefinition<T>) {
-    if (!isSortable(col)) return;
+    if (reorderActive || !isSortable(col)) return;
     sort.cycle(col.attribute);
     onchange?.();
   }
@@ -44,6 +46,9 @@
 
 <thead class="bg-base-200">
   <tr>
+    {#if reorderActive}
+      <th class="w-10"></th>
+    {/if}
     {#if selectable}
       <th>
         <input
@@ -61,11 +66,11 @@
         <div class="flex items-center gap-1">
           <SortHeader
             {title}
-            sortable={isSortable(col)}
-            direction={sort.directionFor(col.attribute)}
+            sortable={isSortable(col) && !reorderActive}
+            direction={reorderActive ? null : sort.directionFor(col.attribute)}
             onsort={() => sortBy(col)}
           />
-          {#if isFilterable(col)}
+          {#if isFilterable(col) && !reorderActive}
             <ColumnFilter
               column={col}
               entries={distinctValues[col.attribute] ?? []}