@svelte-lean/table 0.12.1 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @svelte-lean/table
 
+## 0.13.1
+
+No changes in this release.
+
+## 0.13.0
+
+### Minor Changes
+
+- cc23cc5: `DataTable` reorders rows live. With `onRowMove` the table has a leading grip column (`slean-table-mover`, sticky at the start edge, `--slean-table-move-width`, 36px). The leading control columns now come in one order: expand, grip, selection (the expand column used to follow the selection column). Dragging a grip lifts its row after 3px: the row (with its open details row) follows the pointer, the rows it passes slide out of its way so the drop position shows before release, and the scrolling container scrolls while the row is held near its top or bottom edge. Release calls `onRowMove(source, target)` and the row glides into the place the application gave it; Escape, a cancelled pointer or a move the application does not make slides every row back. On a focused grip, ArrowUp and ArrowDown move the row one place and Home and End to the first or last place on the page, and focus stays on the grip. The grips are hidden while the rows are sorted, filtered or searched (the column stays); a tree or a custom row model has no grip column. Pointer moves write transforms on the row elements only; the listeners of a drag exist only while it lasts, and a press reaches one delegated listener for the whole table.
+  
+  The Move up and Move down buttons in the first cell and native HTML drag and drop on the rows (`draggable`, `dragstart`/`dragover`/`drop`) are removed, with their `.slean-table-row-move` class. New: the `moveRow` message (`'Drag to reorder'`, tr `'Sürükleyerek sırala'`) names the grips and the grip column; `moveUp` and `moveDown` stay in `TableMessages` but are deprecated and unused. New tokens: `--slean-table-row-lifted-shadow` and `--slean-table-row-lifted` (the dragged row's shadow and background); the root carries `data-row-dragging` during a drag and the dragged rows `data-lifted`. `@svelte-lean/styles` adds the `--slean-icon-grip` token, which the grip reads when present.
+  
+  Size budgets raised for this feature: the renderer from 22000 B to 22700 B gzip (22614 B measured, was 20710 B), the table stylesheet from 7300 B to 7700 B gzip (7613 B measured, was 7021 B).
+
 ## 0.12.1
 
 No changes in this release.

package/README.md

@@ -41,7 +41,8 @@ Peer dependency: `svelte ^5.0.0`.
 ```
 
 Sorting, search, column filters, pagination, selection, expansion, tree rows, sticky headers, column
-pinning, resizing, visibility and ordering, inline editing, cell ranges, row reordering and loading,
+pinning, resizing, visibility and ordering, inline editing, cell ranges, row reordering (a grip column
+dragged live or moved with the keyboard) and loading,
 empty and error states are props of `<DataTable />`. State is a serializable `TableState` object:
 pass `bind:state` or `onStateChange` to own it.
 

package/dist/messages.js

@@ -19,6 +19,7 @@ export const en = {
     resize: 'Resize',
     moveLeft: 'Move earlier',
     moveRight: 'Move later',
+    moveRow: 'Drag to reorder',
     moveUp: 'Move up',
     moveDown: 'Move down',
     pin: 'Pin',
@@ -55,6 +56,7 @@ export const tr = {
     resize: 'Boyutlandır',
     moveLeft: 'Öne taşı',
     moveRight: 'Arkaya taşı',
+    moveRow: 'Sürükleyerek sırala',
     moveUp: 'Yukarı taşı',
     moveDown: 'Aşağı taşı',
     pin: 'Sabitle',

package/dist/style.css

@@ -77,6 +77,11 @@
 		);
 		--slean-table-row-selected: var(--slean-table-selected);
 		--slean-table-pin-shadow: light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.45));
+		--slean-table-row-lifted-shadow: var(
+			--slean-shadow-md,
+			0 4px 12px light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.5)),
+			0 1px 3px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.4))
+		);
 		--slean-table-fetching-opacity: 0.55;
 		/* Set per row by hover, stripes, selection or `rowClass`; reset here so it never leaks into a
 		   table nested in a detail row. */
@@ -470,7 +475,7 @@
 	}
 
 	/* Row controls: 24px ghost icon buttons. */
-	:where(.slean-table-expand, .slean-table-edit, .slean-table-row-move > .slean-table-button) {
+	:where(.slean-table-expand, .slean-table-edit, .slean-table-grip) {
 		min-inline-size: 1.5rem;
 		min-block-size: 1.5rem;
 		padding: 0;
@@ -482,10 +487,27 @@
 	:where(
 		.slean-table-expand:hover,
 		.slean-table-edit:hover,
-		.slean-table-row-move > .slean-table-button:hover
+		.slean-table-grip:hover,
+		.slean-table-grip:focus-visible
 	) {
 		color: var(--slean-table-fg);
 	}
+	/* The row grip (onRowMove): the dots are masked on a pseudo-element, so the focus ring stays. */
+	:where(.slean-table-grip) {
+		cursor: grab;
+		touch-action: none;
+	}
+	:where(.slean-table-grip)::before {
+		content: '';
+		inline-size: 1rem;
+		block-size: 1rem;
+		background: currentColor;
+		mask: var(
+				--slean-icon-grip,
+				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4h.01M10 4h.01M6 8h.01M10 8h.01M6 12h.01M10 12h.01' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")
+			)
+			center / 1rem no-repeat;
+	}
 	/* The expand toggle of a plain grid row: the chevron is drawn by the button itself (two borders
 	   of a turned square), one element per row instead of an SVG. It points down when open, and the
 	   other way in right-to-left tables. */
@@ -520,10 +542,6 @@
 	:where(td:hover > .slean-table-cell > .slean-table-edit, .slean-table-edit:focus-visible) {
 		opacity: 1;
 	}
-	:where(.slean-table-row-move) {
-		display: flex;
-		gap: 0.125rem;
-	}
 	:where(.slean-table-ellipsis > .slean-table-cell) {
 		line-height: 1.5rem;
 		min-width: 0;
@@ -570,13 +588,17 @@
 		z-index: 4;
 	}
 
-	/* Leading control columns and pinned columns. */
-	:where(.slean-table-selection, .slean-table-expander) {
+	/* Leading control columns (expand, grip, selection) and pinned columns. */
+	:where(.slean-table-mover, .slean-table-selection, .slean-table-expander) {
 		position: sticky;
 		inset-inline-start: 0;
 		z-index: 3;
 		text-align: center;
 	}
+	:where(.slean-table-mover) {
+		width: var(--slean-table-move-width, 36px);
+		padding-inline: 0;
+	}
 	:where(.slean-table-selection) {
 		width: var(--slean-table-selection-width, 44px);
 		padding-inline: 0;
@@ -585,7 +607,7 @@
 		width: var(--slean-table-expand-width, 40px);
 		padding-inline: 0;
 	}
-	:where(thead .slean-table-selection, thead .slean-table-expander) {
+	:where(thead .slean-table-mover, thead .slean-table-selection, thead .slean-table-expander) {
 		z-index: 4;
 	}
 	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]) {
@@ -607,6 +629,41 @@
 		box-shadow: inset 0 0 0 1px var(--slean-table-accent);
 	}
 
+	/* A dragged row (row-drag.ts): opaque and raised over the body, below the sticky header (5);
+	   the other rows' sticky cells step back while it passes. */
+	:where(.slean-table-scroll > table > tbody > tr[data-lifted]) {
+		position: relative;
+		z-index: 4;
+		--slean-table-row-bg: var(--slean-table-row-lifted, var(--slean-table-bg));
+		box-shadow: var(--slean-table-row-lifted-shadow);
+	}
+	/* A skipped grid section clips and stacks on its own; a dragged row crosses sections. */
+	:where(
+		.slean-table[data-layout='grid'][data-row-dragging]
+			> .slean-table-scroll
+			> table
+			> tbody.slean-table-chunk
+	) {
+		content-visibility: visible;
+	}
+	:where(.slean-table[data-row-dragging]) {
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	:where(.slean-table[data-row-dragging], .slean-table[data-row-dragging] *) {
+		cursor: grabbing;
+	}
+	:where(
+		.slean-table[data-row-dragging]
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr:not([data-lifted])
+			> :is([data-pin], .slean-table-mover, .slean-table-selection, .slean-table-expander)
+	) {
+		z-index: 1;
+	}
+
 	/* Empty, loading, fetching, error. */
 	:where(.slean-table-scroll > table > tbody > tr > .slean-table-empty) {
 		padding: 3rem 1rem;
@@ -763,6 +820,13 @@
 		:where(.slean-table-scroll > table > tbody) {
 			transition: opacity var(--slean-table-duration);
 		}
+		/* Rows slide aside and into place; the lifted row follows the pointer (inline none). */
+		:where(.slean-table[data-row-dragging] > .slean-table-scroll > table > tbody > tr) {
+			transition: transform 150ms ease;
+		}
+		:where(.slean-table[data-row-settling] > .slean-table-scroll > table > tbody > tr) {
+			transition: none;
+		}
 		:where(.slean-table-skeleton) {
 			background: linear-gradient(
 					90deg,
@@ -896,7 +960,7 @@
 			> table
 			> *
 			> tr
-			> :is(.slean-table-selection, .slean-table-expander)
+			> :is(.slean-table-mover, .slean-table-selection, .slean-table-expander)
 	) {
 		justify-content: center;
 	}
@@ -999,7 +1063,7 @@
 		line-height: 1.5rem;
 	}
 	/* A grid body row paints its own ground once; its cells are transparent, except the sticky
-	   ones (pinned, selection, expand), which must stay opaque over what scrolls beneath them. */
+	   ones (pinned, expand, grip, selection), which must stay opaque over what scrolls beneath them. */
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr) {
 		background: var(--slean-table-row-bg, var(--slean-table-bg));
 	}
@@ -1012,7 +1076,7 @@
 			> table
 			> tbody
 			> tr
-			> :is([data-pin], .slean-table-selection, .slean-table-expander)
+			> :is([data-pin], .slean-table-mover, .slean-table-selection, .slean-table-expander)
 	) {
 		background: var(--slean-table-row-bg, var(--slean-table-bg));
 	}
@@ -1027,7 +1091,7 @@
 			.slean-table-pagination,
 			.slean-table-resize,
 			.slean-table-edit,
-			.slean-table-row-move
+			.slean-table-grip
 		) {
 			display: none !important;
 		}

package/dist/table/data-table.svelte

@@ -20,15 +20,21 @@
 	} as const;
 	type IconName = keyof typeof ICONS;
 	/**
-	 * Widths of the leading control columns. Applications override `--slean-table-selection-width`
-	 * and `--slean-table-expand-width` in CSS; the fallbacks keep the table correct without
-	 * `style.css`. Read here, by the `<col>`s and by the pinned-column offsets only.
+	 * Widths of the leading control columns. Applications override `--slean-table-move-width`,
+	 * `--slean-table-selection-width` and `--slean-table-expand-width` in CSS; the fallbacks keep the
+	 * table correct without `style.css`. Read here, by the `<col>`s and by the sticky offsets only.
 	 */
+	const MOVE_WIDTH = 'var(--slean-table-move-width, 36px)';
 	const SELECTION_WIDTH = 'var(--slean-table-selection-width, 44px)';
 	const EXPAND_WIDTH = 'var(--slean-table-expand-width, 40px)';
 	/** A click on one of these inside a cell belongs to the control, not to the row. */
 	const NOT_ROW_CLICK =
 		'button,a,input,select,textarea,label,summary,[contenteditable],[role="menuitem"],[data-action],[data-no-row-click]';
+	/** The inline-start inset of a sticky column: the widths of the columns before it, summed. */
+	function inset(...widths: (string | false)[]): string {
+		const parts = widths.filter(Boolean);
+		return parts.length > 1 ? `calc(${parts.join(' + ')})` : parts[0] || '0px';
+	}
 	/**
 	 * Numbered pages around the current one (0-based): the first, the last and the current ±1.
 	 * `null` marks a gap; a gap of one page shows that page instead.
@@ -67,6 +73,7 @@
 	import { en } from '../messages.js';
 	import { parseEdit } from '../editing.js';
 	import { horizontalCell, verticalCell } from './navigation.js';
+	import { dragRow } from './row-drag.js';
 	let {
 		data,
 		columns,
@@ -196,12 +203,28 @@
 	});
 	/** The expand toggle has a column of its own when asked for and when anything can expand. */
 	const expander = $derived(expandColumn && (!!rowDetails || !!getSubRows));
+	/**
+	 * The grip column (`onRowMove` on a flat row model). It stands whether or not a move is possible
+	 * right now (`movable`), so sorting or filtering does not add or remove a column.
+	 */
+	const mover = $derived(!!onRowMove && !getSubRows && getRowModel === createRowModel);
+	/** The leading control columns' widths, in order: expand, grip, selection. */
+	const leads = $derived(
+		[expander && EXPAND_WIDTH, mover && MOVE_WIDTH, selection && SELECTION_WIDTH].filter(
+			(part): part is string => !!part
+		)
+	);
+	/** Sticky insets of the grip and selection columns: the leading columns before each. */
+	const moverStart = $derived(expander ? EXPAND_WIDTH : undefined);
+	const selectionStart = $derived(
+		expander || mover ? inset(expander && EXPAND_WIDTH, mover && MOVE_WIDTH) : undefined
+	);
+	const expanderStart = '0px';
 	/** Every column of a full-width row: the leading control columns and the data columns. */
-	const span = $derived(cols.length + (selection ? 1 : 0) + (expander ? 1 : 0));
+	const span = $derived(cols.length + leads.length);
 	let editing = $state<{ id: RowId; column: string; row: T; value: string } | null>(null);
 	let editError = $state('');
 	let saving = $state(false);
-	let dragging = $state<RowId | null>(null);
 	let root: HTMLDivElement;
 	let viewport: HTMLDivElement;
 	let tableElement: HTMLTableElement;
@@ -731,9 +754,7 @@
 	 */
 	const tracks = $derived.by(() => {
 		if (!grid) return null;
-		const lead = [selection && SELECTION_WIDTH, expander && EXPAND_WIDTH].filter(
-			(part): part is string => !!part
-		);
+		const lead = leads;
 		const parts = [...lead];
 		let min = 0;
 		for (const col of cols) {
@@ -765,7 +786,7 @@
 	const headerLevels = $derived.by((): { cell: HeaderCell<T>; place?: string }[][] => {
 		const levels = table.headers;
 		if (!grid) return levels.map((row) => row.map((cell) => ({ cell })));
-		const lead = (selection ? 1 : 0) + (expander ? 1 : 0);
+		const lead = leads.length;
 		const result: { cell: HeaderCell<T>; place?: string }[][] = levels.map(() => []);
 		levels.forEach((row, level) =>
 			row.forEach((cell) => {
@@ -848,7 +869,7 @@
 	 */
 	const pins = $derived.by(() => {
 		const result = new Map<string, { pin: Exclude<Pin, false>; style: string; edge?: true }>();
-		const lead = [selection && SELECTION_WIDTH, expander && EXPAND_WIDTH].filter(Boolean);
+		const lead = leads;
 		for (const side of ['left', 'right'] as const) {
 			const ordered = side === 'left' ? cols : [...cols].reverse();
 			let offset = 0;
@@ -1055,19 +1076,18 @@
 	}
 	/**
 	 * A body cell takes the full template only when something in it can differ from a plain value:
-	 * an editor, range selection, row moves, spans, or the first column's toggle and indentation.
+	 * an editor, range selection, spans, or the first column's toggle and indentation.
 	 * Every other cell is a `<td>` with one rendered snippet.
 	 */
 	const fullCells = $derived(
 		!!onEdit ||
 			!!onCellRangeChange ||
-			movable ||
 			cols.some((col) => (!grid && !!col.span) || typeof col.class === 'function' || !!col.ellipsis)
 	);
 	const firstSpecial = $derived(!!getSubRows || (!!rowDetails && !expander));
 	/**
 	 * Grid rows with nothing but data cells take the plain row template: no group rows (the default
-	 * row model, no tree), no selection column, detail rows only behind an expand column, no cell
+	 * row model, no tree), no grip or selection column, detail rows only behind an expand column, no cell
 	 * that needs the full template. The choice is made once per table, not per row, so a plain row
 	 * carries no per-cell branches. Everything else takes the full template.
 	 */
@@ -1076,6 +1096,7 @@
 			!fullCells &&
 			!firstSpecial &&
 			!selection &&
+			!mover &&
 			!getSubRows &&
 			getRowModel === createRowModel
 	);
@@ -1134,10 +1155,70 @@
 		if (node?.data !== undefined) onRowContextMenu?.(node.data, e);
 	}
 	function bodyKey(e: KeyboardEvent) {
+		if (gripKey(e)) return;
 		const hit = ownCell(e.target);
 		if (hit && e.target === hit.cell) cellKey(e, hit.cell, hit.row, hit.col);
 		else rowKey(e);
 	}
+	/** The data row of a grip of this table, or null when `target` is not one. */
+	function gripRow(target: EventTarget | null): HTMLTableRowElement | null {
+		const element = target as Element | null;
+		const row = element?.classList?.contains('slean-table-grip')
+			? (element.parentElement?.parentElement ?? null)
+			: null;
+		return isOwnRow(row) ? row : null;
+	}
+	/**
+	 * Arrow keys on a grip move its row one place on the page, Home and End to the first or last
+	 * place; focus stays on the grip of the moved row. Returns whether the key was the grip's.
+	 */
+	function gripKey(e: KeyboardEvent): boolean {
+		const tr = gripRow(e.target);
+		const node = tr && nodes.get(tr.getAttribute('data-row-id') ?? '');
+		if (!movable || !node) return false;
+		const rows = model.rows.filter((n) => n.data !== undefined);
+		const index = rows.indexOf(node);
+		const target =
+			e.key === 'ArrowUp'
+				? rows[index - 1]
+				: e.key === 'ArrowDown'
+					? rows[index + 1]
+					: e.key === 'Home'
+						? rows[0]
+						: e.key === 'End'
+							? rows[rows.length - 1]
+							: null;
+		if (target === null) return false;
+		e.preventDefault();
+		e.stopPropagation();
+		if (!target || target === node) return true;
+		onRowMove?.(node.id, target.id);
+		void tick().then(() =>
+			ownRows(`[data-row-id="${CSS.escape(String(node.id))}"]`)[0]
+				?.querySelector<HTMLElement>(':scope > .slean-table-mover > .slean-table-grip')
+				?.focus()
+		);
+		return true;
+	}
+	/** A press on a grip starts a live drag (`row-drag.ts`); one delegated listener for the table. */
+	function bodyPointerDown(e: PointerEvent) {
+		const row = gripRow(e.target);
+		if (!movable || !row) return;
+		dragRow({
+			event: e,
+			grip: e.target as HTMLElement,
+			row,
+			root,
+			viewport,
+			rows: () => [...ownRows()],
+			move: (source, target) => {
+				const a = nodes.get(source)?.id;
+				const b = nodes.get(target)?.id;
+				if (a !== undefined && b !== undefined) onRowMove?.(a, b);
+			},
+			update: tick
+		});
+	}
 	/** Enter and Space on a focused clickable row, delegated to the body: no listener per row. */
 	function rowKey(e: KeyboardEvent) {
 		if (!focusableRows || (e.key !== 'Enter' && e.key !== ' ')) return;
@@ -1287,11 +1368,37 @@
 				? undefined
 				: headerRowCount + model.pageIndex * s.pageSize + index + 1}
 			tabindex={focusableRows ? 0 : undefined}
-			draggable={movable}
 		>
+			{#if expander}<td
+					role={grid ? 'cell' : undefined}
+					class="slean-table-expander"
+					style:inset-inline-start={expanderStart}
+					>{#if expandable(node, row)}<button
+							type="button"
+							class="slean-table-button slean-table-expand"
+							aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
+							aria-expanded={open}
+							onclick={() => toggleExpanded(node.id, row)}
+							>{@render icon(open ? 'collapse' : 'expand')}</button
+						>{/if}</td
+				>{/if}
+			{#if mover}<td
+					class="slean-table-mover"
+					role={grid ? 'cell' : undefined}
+					style:inset-inline-start={moverStart}
+					>{#if movable}<button
+							type="button"
+							class="slean-table-button slean-table-grip"
+							aria-label={`${m.moveRow}: ${nameOf(node, row)}`}
+							aria-keyshortcuts="ArrowUp ArrowDown"
+						></button>{/if}</td
+				>{/if}
 			<!-- Two static branches: `data-slean` stays a static marker for build-time
 							     discovery (Tier 0, no runtime); a radio is not the checkbox primitive. -->
-			{#if selection === 'single'}<td class="slean-table-selection" role={grid ? 'cell' : undefined}
+			{#if selection === 'single'}<td
+					class="slean-table-selection"
+					role={grid ? 'cell' : undefined}
+					style:inset-inline-start={selectionStart}
 					><input
 						type="radio"
 						class="slean-table-check"
@@ -1301,7 +1408,10 @@
 						disabled={!isRowSelectable(row)}
 						onchange={() => table.toggleSelection(node.id)}
 					/></td
-				>{:else if selection}<td class="slean-table-selection" role={grid ? 'cell' : undefined}
+				>{:else if selection}<td
+					class="slean-table-selection"
+					role={grid ? 'cell' : undefined}
+					style:inset-inline-start={selectionStart}
 					><input
 						type="checkbox"
 						class="slean-table-check"
@@ -1312,19 +1422,6 @@
 						onchange={() => table.toggleSelection(node.id)}
 					/></td
 				>{/if}
-			{#if expander}<td
-					role={grid ? 'cell' : undefined}
-					class="slean-table-expander"
-					style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
-					>{#if expandable(node, row)}<button
-							type="button"
-							class="slean-table-button slean-table-expand"
-							aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
-							aria-expanded={open}
-							onclick={() => toggleExpanded(node.id, row)}
-							>{@render icon(open ? 'collapse' : 'expand')}</button
-						>{/if}</td
-				>{/if}
 			{#if fullCells || firstSpecial}{#each cols as col, ci (col.id)}{#if fullCells || ci === 0}{@const value =
 							valueOf(row, col)}{@const context = cellContext(
 							node,
@@ -1401,27 +1498,7 @@
 											? `${node.depth * indentSize}px`
 											: undefined}
 									>
-										{#if ci === 0 && movable}<span class="slean-table-row-move"
-												><button
-													type="button"
-													class="slean-table-button"
-													aria-label={`${m.moveUp}: ${nameOf(node, row)}`}
-													disabled={index === 0}
-													onclick={() => {
-														const target = model.rows[index - 1];
-														if (target) onRowMove?.(node.id, target.id);
-													}}>{@render icon('asc')}</button
-												><button
-													type="button"
-													class="slean-table-button"
-													aria-label={`${m.moveDown}: ${nameOf(node, row)}`}
-													disabled={index === model.rows.length - 1}
-													onclick={() => {
-														const target = model.rows[index + 1];
-														if (target) onRowMove?.(node.id, target.id);
-													}}>{@render icon('desc')}</button
-												></span
-											>{/if}{#if ci === 0 && !expander && expandable(node, row)}<button
+										{#if ci === 0 && !expander && expandable(node, row)}<button
 												type="button"
 												class="slean-table-button slean-table-expand"
 												aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
@@ -1492,13 +1569,18 @@
 	{/if}{/snippet}
 
 <!-- Empty cells of the leading control columns, for rows that hold no controls. -->
-{#snippet leading()}{#if selection}<td
-			class="slean-table-selection"
-			role={grid ? 'cell' : undefined}
-		></td>{/if}{#if expander}<td
+{#snippet leading()}{#if expander}<td
 			role={grid ? 'cell' : undefined}
 			class="slean-table-expander"
-			style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
+			style:inset-inline-start={expanderStart}
+		></td>{/if}{#if mover}<td
+			class="slean-table-mover"
+			role={grid ? 'cell' : undefined}
+			style:inset-inline-start={moverStart}
+		></td>{/if}{#if selection}<td
+			class="slean-table-selection"
+			role={grid ? 'cell' : undefined}
+			style:inset-inline-start={selectionStart}
 		></td>{/if}{/snippet}
 
 <!-- `dir` is spread so an absent prop leaves no attribute: for a literal dir={…} Svelte re-assigns
@@ -1607,7 +1689,8 @@
 		aria-label={label}
 		onscroll={onScroll}
 	>
-		<!-- Row keys, clicks and drags are delegated to the table; rows and cells are the targets. -->
+		<!-- Row keys, clicks and grip presses are delegated to the table; rows, cells and grips are
+		     the targets. -->
 		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 		<table
 			bind:this={tableElement}
@@ -1615,20 +1698,7 @@
 			onclick={bodyClick}
 			ondblclick={bodyDoubleClick}
 			oncontextmenu={bodyContextMenu}
-			ondragstart={(e) => {
-				const id = ownRow(e.target)?.id;
-				if (movable && id !== undefined) dragging = id;
-			}}
-			ondragover={(e) => {
-				if (movable) e.preventDefault();
-			}}
-			ondrop={(e) => {
-				if (!movable) return;
-				e.preventDefault();
-				const id = ownRow(e.target)?.id;
-				if (dragging !== null && id !== undefined) onRowMove?.(dragging, id);
-				dragging = null;
-			}}
+			onpointerdown={bodyPointerDown}
 			role={grid ? 'table' : undefined}
 			aria-label={label}
 			aria-busy={loading || fetching}
@@ -1640,8 +1710,10 @@
 		>
 			{#if caption}<caption>{caption}</caption>{/if}
 			{#if !grid}<colgroup
-					>{#if selection}<col style="width:{SELECTION_WIDTH}" />{/if}{#if expander}<col
-							style="width:{EXPAND_WIDTH}"
+					>{#if expander}<col style="width:{EXPAND_WIDTH}" />{/if}{#if mover}<col
+							style="width:{MOVE_WIDTH}"
+						/>{/if}{#if selection}<col
+							style="width:{SELECTION_WIDTH}"
 						/>{/if}{#each cols as col (col.id)}<col
 							data-column={col.id}
 							style:width={colWidth(col)}
@@ -1652,11 +1724,28 @@
 							role={grid ? 'row' : undefined}
 							aria-rowindex={ariaRowCount === undefined ? undefined : level + 1}
 						>
+							{#if expander && level === leadLevel}<th
+									scope="col"
+									role={grid ? 'columnheader' : undefined}
+									rowspan={grid ? undefined : table.headers.length}
+									class="slean-table-expander"
+									style:inset-inline-start={expanderStart}
+									><span class="slean-table-visually-hidden">{m.expandHeader}</span></th
+								>{/if}
+							{#if mover && level === leadLevel}<th
+									scope="col"
+									role={grid ? 'columnheader' : undefined}
+									rowspan={grid ? undefined : table.headers.length}
+									class="slean-table-mover"
+									style:inset-inline-start={moverStart}
+									><span class="slean-table-visually-hidden">{m.moveRow}</span></th
+								>{/if}
 							{#if selection && level === leadLevel}<th
 									scope="col"
 									role={grid ? 'columnheader' : undefined}
 									rowspan={grid ? undefined : table.headers.length}
 									class="slean-table-selection"
+									style:inset-inline-start={selectionStart}
 									>{#if selection === 'multiple' && !hideSelectAll}<input
 											type="checkbox"
 											class="slean-table-check"
@@ -1669,14 +1758,6 @@
 										/>{:else}<span class="slean-table-visually-hidden">{m.selectionHeader}</span
 										>{/if}</th
 								>{/if}
-							{#if expander && level === leadLevel}<th
-									scope="col"
-									role={grid ? 'columnheader' : undefined}
-									rowspan={grid ? undefined : table.headers.length}
-									class="slean-table-expander"
-									style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
-									><span class="slean-table-visually-hidden">{m.expandHeader}</span></th
-								>{/if}
 							{#each row as { cell: h, place } (h.key)}{@const col = h.column}{@const sort =
 									table.sortOf(col)}{@const pin = h.colSpan === 1 ? pins.get(col.id) : undefined}<th
 									scope={h.colSpan > 1 ? 'colgroup' : 'col'}

package/dist/table/row-drag.d.ts

@@ -0,0 +1,18 @@
+export interface RowDragOptions {
+    /** The `pointerdown` on a grip. */
+    event: PointerEvent;
+    grip: HTMLElement;
+    /** The data row of the grip. */
+    row: HTMLTableRowElement;
+    /** The `.slean-table` root: `data-row-dragging`, `data-row-settling`. */
+    root: HTMLElement;
+    /** The `.slean-table-scroll` region. */
+    viewport: HTMLElement;
+    /** The table's own data rows, in document order (never the rows of a nested table). */
+    rows: () => HTMLTableRowElement[];
+    /** Reports a drop on another place, by `data-row-id`. */
+    move: (source: string, target: string) => void;
+    /** Resolves once the application's answer to `move` is in the document (Svelte's `tick`). */
+    update: () => Promise<void>;
+}
+export declare function dragRow(options: RowDragOptions): void;

package/dist/table/row-drag.js

@@ -0,0 +1,247 @@
+/**
+ * Live row dragging for `<DataTable />` (`onRowMove`). DOM only: no Svelte state changes while the
+ * pointer moves; transforms are written straight to the row elements, and only when they change.
+ *
+ * A press on a grip lifts its row after `ACTIVATION` pixels. The lifted row (and its detail rows)
+ * follows the pointer; the rows between its place and the place under it slide out of its way, so
+ * the drop position is visible before release. Release reports the move (`move`), waits for the
+ * application's update (`update`) and lets the row glide from where it was dropped into the place
+ * it now has. A cancel (Escape, `pointercancel`, a lost capture), or a move the application did not
+ * make, slides every row back. Near the visible edge of the scrolling container the container
+ * scrolls, on a timer (a hidden tab runs no animation frames).
+ *
+ * Every listener exists only for the length of one press and is removed through one
+ * `AbortController`. Nothing here runs at module evaluation.
+ */
+const ACTIVATION = 3;
+const EDGE = 48;
+const SPEED = 20;
+const INTERVAL = 16;
+/** The slide of the rows (`style.css`), and a little more, before the end state is cleaned up. */
+const SETTLE_MS = 200;
+/** The cleanup of a drop still sliding into place, per table root: a new press runs it first. */
+const finishing = new WeakMap();
+function blockOf(row) {
+    const rows = [row];
+    for (let next = row.nextElementSibling; next?.matches('tr.slean-table-detail'); next = next.nextElementSibling)
+        rows.push(next);
+    return rows;
+}
+function keyOf(row) {
+    return row.getAttribute('data-row-id') ?? '';
+}
+function translate(rows, y) {
+    for (const row of rows)
+        row.style.transform = y ? `translateY(${y}px)` : '';
+}
+/** The nearest container above the table that scrolls vertically; the document otherwise. */
+function scrollerOf(viewport) {
+    const doc = viewport.ownerDocument;
+    for (let element = viewport; element && element !== doc.body && element !== doc.documentElement; element = element.parentElement) {
+        if (element.scrollHeight > element.clientHeight + 1 &&
+            /auto|scroll|overlay/.test(getComputedStyle(element).overflowY))
+            return element;
+    }
+    return doc.scrollingElement ?? doc.documentElement;
+}
+export function dragRow(options) {
+    const { event, grip, root } = options;
+    if (event.button !== 0 || !event.isPrimary)
+        return;
+    finishing.get(root)?.();
+    const doc = grip.ownerDocument;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    let y = startY;
+    const controller = new AbortController();
+    const { signal } = controller;
+    let blocks = [];
+    let dragged;
+    let from = -1;
+    let target = -1;
+    let scroller = doc.documentElement;
+    let page = false;
+    let scrollStart = 0;
+    let written = 0;
+    let timer;
+    try {
+        grip.setPointerCapture(event.pointerId);
+    }
+    catch {
+        // No capture (an engine or a test environment without it): the document listeners below
+        // still receive the moves while the pointer stays over the page.
+    }
+    function lift() {
+        blocks = options.rows().map((row) => {
+            const rows = blockOf(row);
+            const first = rows[0].getBoundingClientRect();
+            const last = rows[rows.length - 1].getBoundingClientRect();
+            return { key: keyOf(row), rows, top: first.top, height: last.bottom - first.top, shift: 0 };
+        });
+        from = target = blocks.findIndex((block) => block.rows[0] === options.row);
+        dragged = blocks[from];
+        if (!dragged)
+            return false;
+        scroller = scrollerOf(options.viewport);
+        page = scroller === doc.scrollingElement || scroller === doc.documentElement;
+        scrollStart = scroller.scrollTop;
+        root.setAttribute('data-row-dragging', '');
+        for (const row of dragged.rows) {
+            row.setAttribute('data-lifted', '');
+            // The lifted row follows the pointer exactly; the others slide (`style.css`).
+            row.style.transition = 'none';
+        }
+        doc.addEventListener('keydown', escape, { signal, capture: true });
+        (page ? doc : scroller).addEventListener('scroll', frame, { signal, passive: true });
+        timer = setInterval(autoScroll, INTERVAL);
+        return true;
+    }
+    function frame() {
+        if (!dragged)
+            return;
+        const dy = y - startY + scroller.scrollTop - scrollStart;
+        if (dy !== written) {
+            written = dy;
+            translate(dragged.rows, dy);
+        }
+        const centre = dragged.top + dy + dragged.height / 2;
+        const middle = (block) => block.top + block.height / 2;
+        let next = from;
+        while (next + 1 < blocks.length && centre > middle(blocks[next + 1]))
+            next++;
+        if (next === from)
+            while (next > 0 && centre < middle(blocks[next - 1]))
+                next--;
+        target = next;
+        blocks.forEach((block, i) => {
+            if (i === from)
+                return;
+            const shift = i > from && i <= next ? -dragged.height : i < from && i >= next ? dragged.height : 0;
+            if (shift === block.shift)
+                return;
+            block.shift = shift;
+            translate(block.rows, shift);
+        });
+    }
+    /** Scrolls while the pointer is within `EDGE` of the container's visible top or bottom. */
+    function autoScroll() {
+        const height = doc.documentElement.clientHeight;
+        const box = page ? { top: 0, bottom: height } : scroller.getBoundingClientRect();
+        const top = Math.max(box.top, 0);
+        const bottom = Math.min(box.bottom, height);
+        const speed = (distance) => Math.ceil(SPEED * (1 - Math.max(0, distance) / EDGE));
+        const step = y - top < EDGE ? -speed(y - top) : bottom - y < EDGE ? speed(bottom - y) : 0;
+        if (!step)
+            return;
+        const before = scroller.scrollTop;
+        scroller.scrollTop = before + step;
+        if (scroller.scrollTop !== before)
+            frame();
+    }
+    function stop() {
+        controller.abort();
+        clearInterval(timer);
+    }
+    /** Leaves the rows as they are now, after the slide back or into place. */
+    function later(rows) {
+        const done = () => {
+            clearTimeout(handle);
+            finishing.delete(root);
+            for (const row of rows) {
+                row.removeAttribute('data-lifted');
+                row.style.transform = '';
+                row.style.transition = '';
+            }
+            root.removeAttribute('data-row-settling');
+            root.removeAttribute('data-row-dragging');
+        };
+        const handle = setTimeout(done, SETTLE_MS);
+        finishing.set(root, done);
+    }
+    /** Every row slides back to its place. */
+    function back() {
+        for (const row of dragged.rows)
+            row.style.transition = '';
+        for (const block of blocks) {
+            block.shift = 0;
+            translate(block.rows, 0);
+        }
+        later(blocks.flatMap((block) => block.rows));
+    }
+    /**
+     * The application has answered the move. Positions are reset with transitions off; the dragged
+     * row (perhaps a new element: it is found again by its id) starts where it was dropped and
+     * slides into its new place.
+     */
+    function settle(dropped) {
+        const key = dragged.key;
+        const now = options.rows();
+        const row = now.find((element) => keyOf(element) === key);
+        if (row && now.indexOf(row) === from)
+            return back();
+        root.setAttribute('data-row-settling', '');
+        for (const block of blocks)
+            for (const element of block.rows) {
+                element.removeAttribute('data-lifted');
+                element.style.transform = '';
+                element.style.transition = '';
+            }
+        if (!row)
+            return later([]);
+        const rows = blockOf(row);
+        const offset = dropped - row.getBoundingClientRect().top;
+        for (const element of rows)
+            element.setAttribute('data-lifted', '');
+        translate(rows, offset);
+        void row.offsetHeight;
+        root.removeAttribute('data-row-settling');
+        translate(rows, 0);
+        later(rows);
+    }
+    function drop() {
+        stop();
+        if (target === from)
+            return back();
+        const dropped = dragged.rows[0].getBoundingClientRect().top;
+        options.move(dragged.key, blocks[target].key);
+        void options.update().then(() => settle(dropped));
+    }
+    function cancel() {
+        stop();
+        if (dragged)
+            back();
+    }
+    function escape(e) {
+        if (e.key !== 'Escape')
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        cancel();
+    }
+    doc.addEventListener('pointermove', (e) => {
+        if (e.pointerId !== event.pointerId)
+            return;
+        y = e.clientY;
+        if (!dragged) {
+            if (Math.hypot(e.clientX - startX, e.clientY - startY) < ACTIVATION)
+                return;
+            if (!lift())
+                return stop();
+        }
+        e.preventDefault();
+        frame();
+    }, { signal });
+    doc.addEventListener('pointerup', (e) => {
+        if (e.pointerId !== event.pointerId)
+            return;
+        if (dragged)
+            drop();
+        else
+            stop();
+    }, { signal });
+    doc.addEventListener('pointercancel', (e) => {
+        if (e.pointerId === event.pointerId)
+            cancel();
+    }, { signal });
+    grip.addEventListener('lostpointercapture', cancel, { signal });
+}

package/dist/types.d.ts

@@ -186,8 +186,14 @@ export interface TableMessages {
     /** Column controls: move a column earlier/later in the order. */
     moveLeft: string;
     moveRight: string;
-    /** Row reordering buttons rendered when `onRowMove` is set. */
+    /**
+     * The row grip (`onRowMove`): the hidden header text of the grip column and, followed by the
+     * row's name, each grip's accessible name (`"Drag to reorder: <row>"`).
+     */
+    moveRow: string;
+    /** @deprecated Unused since the grip column (`moveRow`) replaced the move buttons. */
     moveUp: string;
+    /** @deprecated Unused since the grip column (`moveRow`) replaced the move buttons. */
     moveDown: string;
     /** Accessible name of the column-controls pin select (`"Pin: <column>"`). */
     pin: string;
@@ -338,7 +344,15 @@ export interface TableProps<T> {
     onScroll?: (event: Event) => void;
     onAction?: (action: string, row: T, trigger: HTMLElement, index: number) => void;
     rowClass?: (row: T, index: number) => string;
-    /** Controlled drag/reorder; disabled while sorting, filtering or using tree/group models. */
+    /**
+     * Controlled row reordering: `source` is to take the place of `target` on the page (the
+     * application moves the row; the table never changes `data`). Adds a leading grip column
+     * (`slean-table-mover`). A grip is dragged live: the row follows the pointer, the other rows
+     * slide out of its way, and the container scrolls near its edges; Escape cancels. On a focused
+     * grip, ArrowUp and ArrowDown move the row one place, Home and End to the first or last place
+     * on the page. The grips are hidden while the rows are sorted, filtered or searched; the column
+     * is absent with a tree (`getSubRows`) or a custom row model (grouping, pivot).
+     */
     onRowMove?: (source: RowId, target: RowId) => void;
     cellRange?: CellRange | null;
     onCellRangeChange?: (range: CellRange | null) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",