@marianmeres/stuic 3.161.0 → 3.163.0

package/dist/components/DataTable/DataTable.svelte

@@ -4,35 +4,8 @@
 	import type { PagingCalcResult } from "@marianmeres/paging-store";
 	import type { THC } from "../Thc/index.js";
 	import type { TranslateFn } from "../../types.js";
-	import { isPlainObject } from "../../utils/is-plain-object.js";
-	import { replaceMap } from "../../utils/replace-map.js";
-
-	// i18n ready
-	function t_default(
-		k: string,
-		values: false | null | undefined | Record<string, string | number> = null,
-		fallback: string | boolean = "",
-		_i18nSpanWrap: boolean = true
-	) {
-		const m: Record<string, string> = {
-			previous_page: "Prev",
-			next_page: "Next",
-			page_x_of_y: "Page {page} of {pageCount}",
-			no_data: "No data",
-			select_all_rows: "Select all rows on this page",
-			select_row: "Select row",
-			select_all_on_page_x: "All {count} on this page selected.",
-			select_all_results: "Select all {totalCount} results",
-			all_results_selected: "All {totalCount} results selected.",
-			clear_selection: "Clear selection",
-		};
-		let out = m[k] ?? fallback ?? k;
-		return isPlainObject(values)
-			? replaceMap(out, values as any, {
-					preSearchKeyTransform: (k) => `{${k}}`,
-				})
-			: out;
-	}
+	// i18n ready -- see ./i18n.ts (english, built-in) and ./i18n-sk.ts (opt-in slovak)
+	import { DATA_TABLE_MESSAGES_EN, t_default } from "./i18n.js";
 
 	export interface DataTableColumn<T = Record<string, any>> {
 		/** Property key to extract from row data (supports dot-notation: "data.name") */
@@ -95,9 +68,71 @@
 		/** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
 		excluded?: Set<string | number>;
 
+		/**
+		 * Keep the selection bar -- the strip above the table holding the idle status,
+		 * `batchActions`, and the select-all-across-pages offer -- in the layout at all
+		 * times, so checking the first row does not shove the table down. While nothing
+		 * is selected it reads `t("no_rows_selected")`.
+		 *
+		 * Only meaningful when `selectable` is on AND there is something to reserve room
+		 * for (a `batchActions` snippet or `allowSelectAllPages`); with neither, no bar
+		 * is rendered at all.
+		 *
+		 * Set `false` for the pop-in behaviour: the bar appears only once it has content.
+		 */
+		reserveBatchBar?: boolean;
+
 		/** Callback when a row is clicked */
 		onRowClick?: (row: T, index: number) => void;
 
+		/**
+		 * Where this row's primary action navigates. When it returns a href for a row, the
+		 * content of that row's "lead" cell is wrapped in an anchor -- which is what makes a
+		 * clickable row keyboard-, middle- and modifier-click-reachable.
+		 *
+		 * Return `undefined` for a row with no destination (a placeholder, a row still
+		 * minting its id) -- that row's lead cell renders exactly as it does today.
+		 *
+		 * Independent of `onRowClick`: supply both and the anchor handles the keyboard and
+		 * modified clicks while `onRowClick` keeps handling a plain click anywhere else on
+		 * the row -- the row click handler ignores events originating inside an anchor, so
+		 * the two never double-fire. (Consequence: a plain click on the lead cell navigates
+		 * via the href and does NOT call `onRowClick` -- point both at the same destination.)
+		 */
+		rowHref?: (row: T, index: number) => string | undefined;
+		/**
+		 * Which column is the "lead" cell for `rowHref`. Defaults to the first column in
+		 * `columns`. On mobile, if that column is `hideOnMobile`, the first visible card
+		 * field is used instead (so the card keeps a keyboard-reachable link).
+		 */
+		rowHrefColumn?: string;
+		/** Additional CSS classes for the anchor generated by `rowHref`. */
+		classRowLink?: string;
+
+		/**
+		 * Make the desktop `<tr>` itself focusable and Enter-activatable.
+		 *
+		 * For a row whose action is NOT a navigation -- prefer `rowHref` when it is, since a
+		 * real link is better in every respect (tab order, `Enter`, middle/cmd-click, "copy
+		 * link address", and an announcement of where it goes).
+		 *
+		 * Deliberately does NOT set `role="button"`: a `<tr>` carries an implicit `row` role
+		 * that the table's own structure depends on, and overriding it detaches the row from
+		 * the table for assistive technology. The row stays a row; it merely becomes focusable.
+		 *
+		 * Also deliberately `Enter`-only, unlike the mobile card (which IS a `role="button"`,
+		 * where `Space` is expected). Taking `Space` -- page scroll -- away from a table is a
+		 * worse trade than the one the card makes.
+		 *
+		 * No-op unless `onRowClick` or `selectOnRowClick` is set.
+		 */
+		rowActivatable?: boolean;
+		/**
+		 * Accessible name for an activatable row, e.g. `(row) => "Open " + row.name`.
+		 * Only applied when the row is actually activatable.
+		 */
+		rowLabel?: (row: T, index: number) => string | undefined;
+
 		/** Show loading state (spinner overlay + reduced opacity) */
 		loading?: boolean;
 
@@ -125,7 +160,8 @@
 			]
 		>;
 		/**
-		 * Batch actions bar snippet (shown when items are selected).
+		 * Content of the selection bar while something is selected. Replaces the default
+		 * "{count} selected" status, so render your own count alongside the buttons.
 		 *
 		 * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
 		 * rows from the current page that aren't excluded. Off-page rows are not
@@ -147,8 +183,8 @@
 			]
 		>;
 		/**
-		 * Custom "select all results across pages" banner. When omitted, a default
-		 * banner is rendered.
+		 * Custom "select all results across pages" offer, rendered on the trailing edge
+		 * of the selection bar. When omitted, a default one is rendered.
 		 */
 		selectAllBanner?: Snippet<
 			[
@@ -202,7 +238,13 @@
 		allowSelectAllPages = false,
 		selectedAll = $bindable(false),
 		excluded = $bindable(new Set()),
+		reserveBatchBar = true,
 		onRowClick,
+		rowHref,
+		rowHrefColumn,
+		classRowLink,
+		rowActivatable = false,
+		rowLabel,
 		loading = false,
 		cell,
 		row,
@@ -342,22 +384,70 @@
 		return allOnPageSelected;
 	});
 
-	// --- Row click ---
-	function handleRowClick(row: T, index: number, e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (
+	// The default selection status, shown when there is no `batchActions` snippet to take
+	// its place. Both keys post-date the component, so a consumer `t` written against an
+	// older version does not know them -- and one that answers an unknown key with ""
+	// would leave the reserved bar visibly blank. Hence the explicit english fallbacks
+	// (pre-interpolated, since a `t` may hand a fallback straight back untouched), which
+	// every other, older key can do without.
+	let statusText = $derived(
+		effectiveCount > 0
+			? t(
+					"x_rows_selected",
+					{ count: effectiveCount },
+					DATA_TABLE_MESSAGES_EN.x_rows_selected.replace("{count}", `${effectiveCount}`)
+				)
+			: t("no_rows_selected", null, DATA_TABLE_MESSAGES_EN.no_rows_selected)
+	);
+
+	// The bar only exists if something can appear in it; `reserveBatchBar` then decides
+	// whether it holds its place while that something is absent.
+	let hasBatchBar = $derived(selectable && (!!batchActions || allowSelectAllPages));
+	let showBatchBar = $derived(
+		hasBatchBar &&
+			(reserveBatchBar || showSelectAllBanner || (effectiveCount > 0 && !!batchActions))
+	);
+
+	// --- Row click / activation ---
+
+	// A row is a big target that legitimately contains its own controls. Anything that
+	// originates inside one of those is that control's business, not the row's - this
+	// guards the click handler AND both keydown handlers (Enter on a focused lead link
+	// must navigate, not fire onRowClick; Space on a focused checkbox must toggle it).
+	function isInteractiveTarget(e: Event): boolean {
+		const target = e.target as HTMLElement | null;
+		if (!target?.closest) return false;
+		return !!(
 			target.closest('input[type="checkbox"]') ||
 			target.closest("button") ||
 			target.closest("a")
-		) {
-			return;
-		}
+		);
+	}
+
+	function activateRow(row: T, index: number) {
 		if (selectable && selectOnRowClick) {
 			toggleSelectRow(getRowId(row, index));
 		}
 		onRowClick?.(row, index);
 	}
 
+	function handleRowClick(row: T, index: number, e: MouseEvent) {
+		if (isInteractiveTarget(e)) return;
+		activateRow(row, index);
+	}
+
+	/**
+	 * Shared by the desktop `<tr>` (Enter only) and the mobile card (Enter + Space, since
+	 * the card actually is a `role="button"`).
+	 */
+	function handleRowKeydown(row: T, index: number, e: KeyboardEvent, withSpace: boolean) {
+		if (!rowClickable) return;
+		if (e.key !== "Enter" && !(withSpace && e.key === " ")) return;
+		if (isInteractiveTarget(e)) return;
+		e.preventDefault();
+		activateRow(row, index);
+	}
+
 	// --- Cell value helpers ---
 	function getCellValue(row: T, column: DataTableColumn<T>): any {
 		return column.key.split(".").reduce((obj: any, k) => obj?.[k], row);
@@ -373,49 +463,101 @@
 	let rootClass = $derived(unstyled ? classProp : twMerge("stuic-data-table", classProp));
 
 	let mobileColumns = $derived(columns.filter((col) => !col.hideOnMobile));
-</script>
 
-<!-- Batch action bar -->
-{#if selectable && effectiveCount > 0 && batchActions}
-	<div class={!unstyled ? "stuic-data-table-batch" : undefined}>
-		{@render batchActions({
-			selected,
-			selectedRows,
-			selectedAll,
-			excluded,
-			effectiveCount,
-			totalCount,
-			clearSelection: clearAllSelection,
-		})}
-	</div>
-{/if}
+	// --- Row link / activation derivations ---
+	let rowClickable = $derived(!!(onRowClick || selectOnRowClick));
+	let rowIsActivatable = $derived(rowActivatable && rowClickable);
+
+	// The lead cell is the one whose content gets wrapped in the `rowHref` anchor.
+	let leadColumnKey = $derived(rowHrefColumn ?? columns[0]?.key);
+	// A `hideOnMobile` lead column would leave the card with no link at all, so there we
+	// fall back to the first visible field rather than silently dropping the anchor.
+	let mobileLeadColumnKey = $derived(
+		mobileColumns.some((col) => col.key === leadColumnKey)
+			? leadColumnKey
+			: mobileColumns[0]?.key
+	);
+
+	let rowLinkClass = $derived(
+		unstyled ? classRowLink : twMerge("stuic-data-table-row-link", classRowLink)
+	);
+</script>
 
-<!-- Select-all-across-pages banner -->
-{#if showSelectAllBanner && paging}
-	{#if selectAllBanner}
-		{@render selectAllBanner({
-			selectedAll,
-			effectiveCount,
-			totalCount: paging.total,
-			pageCount: data.length,
-			selectAll: enterSelectAll,
-			clearSelection: clearAllSelection,
-		})}
+<!--
+	The rendered content of a single cell, shared by both layouts so that a `rowHref`
+	anchor wraps exactly what the cell would have rendered anyway (a consumer `cell`
+	snippet included).
+-->
+{#snippet cellBody(
+	col: DataTableColumn<T>,
+	rowData: T,
+	value: any,
+	rowIndex: number,
+	variant: "desktop" | "mobile"
+)}
+	{#if cell}
+		{@render cell({ column: col, row: rowData, value, rowIndex, variant })}
 	{:else}
-		<div class={!unstyled ? "stuic-data-table-select-all-banner" : undefined}>
-			{#if selectedAll}
-				<span>{t("all_results_selected", { totalCount: paging.total })}</span>
-				<Button variant="ghost" size="sm" onclick={clearAllSelection}>
-					{t("clear_selection")}
-				</Button>
+		{getCellDisplay(rowData, col)}
+	{/if}
+{/snippet}
+
+<!--
+	Selection bar -- one strip carrying the selection status, the consumer's
+	`batchActions`, and the select-all-across-pages offer. Deliberately a single element
+	rather than a stack of independent conditionals: each of those appearing on its own
+	reflows everything below it, which is exactly the jump `reserveBatchBar` exists to
+	prevent. Sits outside the root container so the loading overlay doesn't cover it.
+-->
+{#if showBatchBar}
+	<div
+		class={!unstyled ? "stuic-data-table-batch" : undefined}
+		data-idle={!unstyled && effectiveCount === 0 ? "true" : undefined}
+		data-select-all={!unstyled && showSelectAllBanner ? "true" : undefined}
+	>
+		<div class={!unstyled ? "stuic-data-table-batch-main" : undefined}>
+			{#if effectiveCount > 0 && batchActions}
+				{@render batchActions({
+					selected,
+					selectedRows,
+					selectedAll,
+					excluded,
+					effectiveCount,
+					totalCount,
+					clearSelection: clearAllSelection,
+				})}
 			{:else}
-				<span>{t("select_all_on_page_x", { count: data.length })}</span>
-				<Button variant="ghost" size="sm" onclick={enterSelectAll}>
-					{t("select_all_results", { totalCount: paging.total })}
-				</Button>
+				<span class={!unstyled ? "stuic-data-table-batch-status" : undefined}>
+					{statusText}
+				</span>
 			{/if}
 		</div>
-	{/if}
+
+		{#if showSelectAllBanner && paging}
+			<div class={!unstyled ? "stuic-data-table-batch-select-all" : undefined}>
+				{#if selectAllBanner}
+					{@render selectAllBanner({
+						selectedAll,
+						effectiveCount,
+						totalCount: paging.total,
+						pageCount: data.length,
+						selectAll: enterSelectAll,
+						clearSelection: clearAllSelection,
+					})}
+				{:else if selectedAll}
+					<span>{t("all_results_selected", { totalCount: paging.total })}</span>
+					<Button variant="ghost" size="sm" onclick={clearAllSelection}>
+						{t("clear_selection")}
+					</Button>
+				{:else}
+					<span>{t("select_all_on_page_x", { count: data.length })}</span>
+					<Button variant="ghost" size="sm" onclick={enterSelectAll}>
+						{t("select_all_results", { totalCount: paging.total })}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</div>
 {/if}
 
 <!-- Root container -->
@@ -461,16 +603,20 @@
 						{@const rowId = getRowId(rowData, rowIndex)}
 						{@const isSelected = selectable && isRowSelected(rowId)}
 						{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+						{@const rowLink = rowHref?.(rowData, rowIndex)}
 						{#if row}
 							{@render row({ row: rowData, columns, rowIndex, isSelected })}
 						{:else}
 							<tr
 								data-hoverable={!unstyled ? "true" : undefined}
-								data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-									? "true"
-									: undefined}
+								data-clickable={!unstyled && rowClickable ? "true" : undefined}
 								data-selected={!unstyled && isSelected ? "true" : undefined}
+								tabindex={rowIsActivatable ? 0 : undefined}
+								aria-label={rowIsActivatable ? rowLabel?.(rowData, rowIndex) : undefined}
 								onclick={(e) => handleRowClick(rowData, rowIndex, e)}
+								onkeydown={(e) => {
+									if (rowActivatable) handleRowKeydown(rowData, rowIndex, e, false);
+								}}
 							>
 								{#if selectable}
 									<td data-checkbox class="stuic-checkbox">
@@ -485,20 +631,17 @@
 								{/if}
 								{#each columns as col (col.key)}
 									{@const value = getCellValue(rowData, col)}
+									{@const href = col.key === leadColumnKey ? rowLink : undefined}
 									<td
 										class={col.class}
 										data-align={!unstyled && col.align ? col.align : undefined}
 									>
-										{#if cell}
-											{@render cell({
-												column: col,
-												row: rowData,
-												value,
-												rowIndex,
-												variant: "desktop",
-											})}
+										{#if href}
+											<a class={rowLinkClass} {href}>
+												{@render cellBody(col, rowData, value, rowIndex, "desktop")}
+											</a>
 										{:else}
-											{getCellDisplay(rowData, col)}
+											{@render cellBody(col, rowData, value, rowIndex, "desktop")}
 										{/if}
 									</td>
 								{/each}
@@ -531,6 +674,7 @@
 				{@const rowId = getRowId(rowData, rowIndex)}
 				{@const isSelected = selectable && isRowSelected(rowId)}
 				{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+				{@const rowLink = rowHref?.(rowData, rowIndex)}
 				{#if mobileRow}
 					{@render mobileRow({
 						row: rowData,
@@ -542,25 +686,12 @@
 					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<div
 						class={!unstyled ? "stuic-data-table-card" : undefined}
-						data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-							? "true"
-							: undefined}
+						data-clickable={!unstyled && rowClickable ? "true" : undefined}
 						data-selected={!unstyled && isSelected ? "true" : undefined}
-						role={onRowClick || selectOnRowClick ? "button" : undefined}
-						tabindex={onRowClick || selectOnRowClick ? 0 : undefined}
+						role={rowClickable ? "button" : undefined}
+						tabindex={rowClickable ? 0 : undefined}
 						onclick={(e) => handleRowClick(rowData, rowIndex, e)}
-						onkeydown={(e) => {
-							if (
-								(onRowClick || selectOnRowClick) &&
-								(e.key === "Enter" || e.key === " ")
-							) {
-								e.preventDefault();
-								if (selectable && selectOnRowClick) {
-									toggleSelectRow(rowId);
-								}
-								onRowClick?.(rowData, rowIndex);
-							}
-						}}
+						onkeydown={(e) => handleRowKeydown(rowData, rowIndex, e, true)}
 					>
 						{#if selectable}
 							<div
@@ -579,6 +710,7 @@
 						{/if}
 						{#each mobileColumns as col (col.key)}
 							{@const value = getCellValue(rowData, col)}
+							{@const href = col.key === mobileLeadColumnKey ? rowLink : undefined}
 							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
 								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
 									{#if isTHCNotEmpty(col.label)}
@@ -588,16 +720,12 @@
 									{/if}
 								</span>
 								<span class={!unstyled ? "stuic-data-table-card-value" : undefined}>
-									{#if cell}
-										{@render cell({
-											column: col,
-											row: rowData,
-											value,
-											rowIndex,
-											variant: "mobile",
-										})}
+									{#if href}
+										<a class={rowLinkClass} {href}>
+											{@render cellBody(col, rowData, value, rowIndex, "mobile")}
+										</a>
 									{:else}
-										{getCellDisplay(rowData, col)}
+										{@render cellBody(col, rowData, value, rowIndex, "mobile")}
 									{/if}
 								</span>
 							</div>

package/dist/components/DataTable/DataTable.svelte.d.ts

@@ -56,8 +56,67 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     selectedAll?: boolean;
     /** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
     excluded?: Set<string | number>;
+    /**
+     * Keep the selection bar -- the strip above the table holding the idle status,
+     * `batchActions`, and the select-all-across-pages offer -- in the layout at all
+     * times, so checking the first row does not shove the table down. While nothing
+     * is selected it reads `t("no_rows_selected")`.
+     *
+     * Only meaningful when `selectable` is on AND there is something to reserve room
+     * for (a `batchActions` snippet or `allowSelectAllPages`); with neither, no bar
+     * is rendered at all.
+     *
+     * Set `false` for the pop-in behaviour: the bar appears only once it has content.
+     */
+    reserveBatchBar?: boolean;
     /** Callback when a row is clicked */
     onRowClick?: (row: T, index: number) => void;
+    /**
+     * Where this row's primary action navigates. When it returns a href for a row, the
+     * content of that row's "lead" cell is wrapped in an anchor -- which is what makes a
+     * clickable row keyboard-, middle- and modifier-click-reachable.
+     *
+     * Return `undefined` for a row with no destination (a placeholder, a row still
+     * minting its id) -- that row's lead cell renders exactly as it does today.
+     *
+     * Independent of `onRowClick`: supply both and the anchor handles the keyboard and
+     * modified clicks while `onRowClick` keeps handling a plain click anywhere else on
+     * the row -- the row click handler ignores events originating inside an anchor, so
+     * the two never double-fire. (Consequence: a plain click on the lead cell navigates
+     * via the href and does NOT call `onRowClick` -- point both at the same destination.)
+     */
+    rowHref?: (row: T, index: number) => string | undefined;
+    /**
+     * Which column is the "lead" cell for `rowHref`. Defaults to the first column in
+     * `columns`. On mobile, if that column is `hideOnMobile`, the first visible card
+     * field is used instead (so the card keeps a keyboard-reachable link).
+     */
+    rowHrefColumn?: string;
+    /** Additional CSS classes for the anchor generated by `rowHref`. */
+    classRowLink?: string;
+    /**
+     * Make the desktop `<tr>` itself focusable and Enter-activatable.
+     *
+     * For a row whose action is NOT a navigation -- prefer `rowHref` when it is, since a
+     * real link is better in every respect (tab order, `Enter`, middle/cmd-click, "copy
+     * link address", and an announcement of where it goes).
+     *
+     * Deliberately does NOT set `role="button"`: a `<tr>` carries an implicit `row` role
+     * that the table's own structure depends on, and overriding it detaches the row from
+     * the table for assistive technology. The row stays a row; it merely becomes focusable.
+     *
+     * Also deliberately `Enter`-only, unlike the mobile card (which IS a `role="button"`,
+     * where `Space` is expected). Taking `Space` -- page scroll -- away from a table is a
+     * worse trade than the one the card makes.
+     *
+     * No-op unless `onRowClick` or `selectOnRowClick` is set.
+     */
+    rowActivatable?: boolean;
+    /**
+     * Accessible name for an activatable row, e.g. `(row) => "Open " + row.name`.
+     * Only applied when the row is actually activatable.
+     */
+    rowLabel?: (row: T, index: number) => string | undefined;
     /** Show loading state (spinner overlay + reduced opacity) */
     loading?: boolean;
     /** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */
@@ -80,7 +139,8 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         }
     ]>;
     /**
-     * Batch actions bar snippet (shown when items are selected).
+     * Content of the selection bar while something is selected. Replaces the default
+     * "{count} selected" status, so render your own count alongside the buttons.
      *
      * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
      * rows from the current page that aren't excluded. Off-page rows are not
@@ -100,8 +160,8 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         }
     ]>;
     /**
-     * Custom "select all results across pages" banner. When omitted, a default
-     * banner is rendered.
+     * Custom "select all results across pages" offer, rendered on the trailing edge
+     * of the selection bar. When omitted, a default one is rendered.
      */
     selectAllBanner?: Snippet<[
         {

package/dist/components/DataTable/README.md

@@ -64,6 +64,30 @@ DataTable integrates with [`@marianmeres/paging-store`](https://github.com/maria
 
 Shift+click a checkbox to toggle a range of rows from the last clicked checkbox to the current one. Disabled rows in the range are skipped. The anchor resets when `data` changes (e.g. on page navigation).
 
+#### The selection bar holds its place
+
+Everything selection-related lives in one strip above the table: the status while nothing
+is selected, your `batchActions` while something is, and the select-all-across-pages offer
+on its trailing edge. That strip is rendered from the start and keeps a constant height
+(`reserveBatchBar`, on by default), so checking the first row swaps its contents instead
+of pushing the table down.
+
+- The height comes from `--stuic-data-table-batch-min-height`, sized to a `size="sm"`
+  Button. Batch actions built from bigger controls need that token raised, or the bar
+  grows when they appear — which is the jump all over again.
+- Idle, the bar is transparent (`--stuic-data-table-batch-bg-idle`) so a permanently
+  reserved strip doesn't shout; it takes on `--stuic-data-table-batch-bg` once something
+  is selected and `--stuic-data-table-select-all-bg` while the select-all offer is up.
+- The bar only exists when there is something to reserve room for — `selectable` plus
+  either a `batchActions` snippet or `allowSelectAllPages`. `selectable` on its own
+  renders no bar.
+- `reserveBatchBar={false}` restores the old behaviour: the bar appears only once it has
+  content.
+
+Without a `batchActions` snippet the bar still reports the count itself
+(`t("x_rows_selected")` / `t("no_rows_selected")`). With one, the snippet replaces that
+status entirely — render your own count next to the buttons.
+
 ### Select All Across Pages
 
 When your data is paged, DataTable can offer a "select all results" affordance that expands selection beyond the current page. Enable it with `allowSelectAllPages`. When the user opts in, selection flips to **all-pages mode**: every row is implicitly selected, and `excluded` holds IDs the user has explicitly deselected.
@@ -115,7 +139,7 @@ function deleteSelection({ selectedAll, excluded }) {
 
 New records inserted while all-pages mode is active are implicitly selected (they aren't in `excluded`). This matches the conventional intent — "delete everything matching X" should include matches that arrive before the operation runs. If you need snapshot-at-click semantics, capture a timestamp or ID list in your consumer.
 
-**Customising the banner:** the default banner uses the built-in `t()` keys `select_all_on_page_x`, `select_all_results`, `all_results_selected`, and `clear_selection`. Override markup entirely with the `selectAllBanner` snippet:
+**Customising the offer:** the default offer renders on the trailing edge of the selection bar and uses the built-in `t()` keys `select_all_on_page_x`, `select_all_results`, `all_results_selected`, and `clear_selection`. Override its markup entirely with the `selectAllBanner` snippet (which renders in the same slot — it is no longer a standalone block below the batch bar):
 
 ```svelte
 <DataTable
@@ -143,6 +167,89 @@ New records inserted while all-pages mode is active are implicitly selected (the
 
 **Filter changes:** when filters change in the consumer, reset the bound selection stores (`selected`, `selectedAll`, `excluded`) explicitly — DataTable doesn't track which filter produced the current state.
 
+### Clickable Rows That Work Without a Mouse
+
+`onRowClick` alone makes a row **mouse-only** on the desktop table layout: a `<tr>` is not
+focusable, so nothing about the row is reachable by keyboard. (The mobile card layout has
+always been fine — it is a `<div role="button">`.) Two opt-in props close that gap, and
+they are not alternatives:
+
+| Your row action is…             | Use              |
+| ------------------------------- | ---------------- |
+| a navigation (it has a URL)     | `rowHref`        |
+| anything else (drawer, expand…) | `rowActivatable` |
+
+#### `rowHref` — the lead cell becomes a real link
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	getRowId={(row) => row.id}
+	rowHref={(row) => `/users/${row.id}`}
+/>
+```
+
+The content of the row's **lead cell** (the first column by default, or `rowHrefColumn`)
+is wrapped in an `<a href>` — including whatever your `cell` snippet renders for it, and
+respecting the column's `renderValue`. A link gets, for free and correctly: keyboard focus
+in the right tab order, `Enter`, ⌘/middle-click and "open in new tab", "copy link address",
+and a screen-reader announcement of _where it goes_ rather than an anonymous "button".
+
+Return `undefined` for a row with no destination (a placeholder, a row still minting its
+id) — that row's lead cell renders exactly as it would without `rowHref`.
+
+`rowHref` composes with `onRowClick`: the row click handler ignores clicks originating
+inside an anchor, so the two never double-fire. The consequence is worth stating — a plain
+click **on the lead cell** navigates via the href and does _not_ call `onRowClick`, so point
+both at the same destination.
+
+On mobile the same field is linked. If the lead column is `hideOnMobile`, the card links its
+first visible field instead, rather than silently dropping the anchor.
+
+By default the link looks like the text it replaced (`color: inherit`, no underline until
+hover) — a table where every lead cell is blue-and-underlined is a worse table. Three CSS
+variables and `classRowLink` are there if you disagree.
+
+#### `rowActivatable` — the `<tr>` itself
+
+For a row whose action has no address:
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	onRowClick={(row) => openDrawer(row)}
+	rowActivatable
+	rowLabel={(row) => `Open ${row.name}`}
+/>
+```
+
+The `<tr>` gets `tabindex="0"`, an optional `aria-label` from `rowLabel`, and a
+`:focus-visible` ring. It is a no-op unless `onRowClick` or `selectOnRowClick` is set.
+
+Two deliberate choices, so nobody "fixes" them later:
+
+- **No `role="button"` on the `<tr>`.** A `<tr>` carries an implicit `row` role that the
+  table's own structure depends on. Overriding it detaches the row from the table for
+  assistive technology — row/column counts stop making sense and cell-by-cell navigation
+  breaks. The row stays a row; it merely becomes focusable. (The mobile card is a `<div>`,
+  so `role="button"` is correct _there_.)
+- **`Enter` only, no `Space`.** `Space` on a focused row scrolls the page, and a row is not
+  a button — taking `Space` away from a table is a worse trade than the one the card makes.
+
+With `selectable` + `selectOnRowClick`, `Enter` toggles selection _and_ fires `onRowClick`,
+matching the mobile card.
+
+#### Both are opt-in
+
+With neither prop set, the rendered markup is exactly what it was before they existed. A
+consumer who replaces the whole `<tr>` with the `row` snippet opts out of both and owns the
+keyboard story themselves.
+
+Interactive descendants always win: a click, `Enter` or `Space` that originates inside a
+`<button>`, an `<a>` or a checkbox in the row is that control's business, not the row's.
+
 ### Custom Cell Rendering
 
 The `cell` snippet is used for both desktop and mobile layouts. Use the `variant` param if rendering differs per layout.
@@ -204,33 +311,39 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ## Props
 
-| Prop                  | Type                               | Default       | Description                                                              |
-| --------------------- | ---------------------------------- | ------------- | ------------------------------------------------------------------------ |
-| `columns`             | `DataTableColumn<T>[]`             | required      | Column definitions                                                       |
-| `data`                | `T[]`                              | required      | Array of row data                                                        |
-| `getRowId`            | `(row, index) => string \| number` | `(_, i) => i` | Row ID extractor                                                         |
-| `paging`              | `PagingCalcResult`                 | -             | Paging state (from `@marianmeres/paging-store`)                          |
-| `onPageChange`        | `(offset: number) => void`         | -             | Called with the new offset when the user navigates pages                 |
-| `selectable`          | `boolean`                          | `false`       | Enable selection checkboxes                                              |
-| `selected`            | `Set<string \| number>`            | `new Set()`   | Selected row IDs (bindable)                                              |
-| `selectOnRowClick`    | `boolean`                          | `false`       | Clicking anywhere on a row toggles its selection                         |
-| `selectDisabledBy`    | `(row, index) => boolean`          | -             | Return `true` to disable selection for a specific row                    |
-| `allowSelectAllPages` | `boolean`                          | `false`       | Show a banner offering "select all results" across paged data            |
-| `selectedAll`         | `boolean`                          | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection |
-| `excluded`            | `Set<string \| number>`            | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                    |
-| `onRowClick`          | `(row, index) => void`             | -             | Row click callback                                                       |
-| `loading`             | `boolean`                          | `false`       | Show loading overlay                                                     |
-| `small`               | `boolean`                          | `false`       | Force mobile/card layout regardless of viewport                          |
-| `t`                   | `TranslateFn`                      | built-in      | Optional translation function                                            |
-| `cell`                | `Snippet`                          | -             | Custom cell renderer (desktop + mobile)                                  |
-| `row`                 | `Snippet`                          | -             | Custom desktop `<tr>` renderer (overrides default row)                   |
-| `mobileRow`           | `Snippet`                          | -             | Custom mobile card renderer                                              |
-| `batchActions`        | `Snippet`                          | -             | Batch action bar content                                                 |
-| `selectAllBanner`     | `Snippet`                          | -             | Override default "select all across pages" banner                        |
-| `empty`               | `Snippet`                          | -             | Custom empty state                                                       |
-| `unstyled`            | `boolean`                          | `false`       | Skip default styling                                                     |
-| `class`               | `string`                           | -             | Additional CSS classes                                                   |
-| `el`                  | `HTMLDivElement`                   | -             | Bindable element ref                                                     |
+| Prop                  | Type                                  | Default       | Description                                                                |
+| --------------------- | ------------------------------------- | ------------- | -------------------------------------------------------------------------- |
+| `columns`             | `DataTableColumn<T>[]`                | required      | Column definitions                                                         |
+| `data`                | `T[]`                                 | required      | Array of row data                                                          |
+| `getRowId`            | `(row, index) => string \| number`    | `(_, i) => i` | Row ID extractor                                                           |
+| `paging`              | `PagingCalcResult`                    | -             | Paging state (from `@marianmeres/paging-store`)                            |
+| `onPageChange`        | `(offset: number) => void`            | -             | Called with the new offset when the user navigates pages                   |
+| `selectable`          | `boolean`                             | `false`       | Enable selection checkboxes                                                |
+| `selected`            | `Set<string \| number>`               | `new Set()`   | Selected row IDs (bindable)                                                |
+| `selectOnRowClick`    | `boolean`                             | `false`       | Clicking anywhere on a row toggles its selection                           |
+| `selectDisabledBy`    | `(row, index) => boolean`             | -             | Return `true` to disable selection for a specific row                      |
+| `allowSelectAllPages` | `boolean`                             | `false`       | Show a banner offering "select all results" across paged data              |
+| `selectedAll`         | `boolean`                             | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection   |
+| `excluded`            | `Set<string \| number>`               | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                      |
+| `reserveBatchBar`     | `boolean`                             | `true`        | Keep the selection bar in the layout while nothing is selected             |
+| `onRowClick`          | `(row, index) => void`                | -             | Row click callback                                                         |
+| `rowHref`             | `(row, index) => string \| undefined` | -             | Wrap the lead cell's content in an `<a href>` (keyboard/⌘-click reachable) |
+| `rowHrefColumn`       | `string`                              | first column  | Which column is the lead cell for `rowHref`                                |
+| `classRowLink`        | `string`                              | -             | Extra classes for the `rowHref` anchor                                     |
+| `rowActivatable`      | `boolean`                             | `false`       | Make the desktop `<tr>` focusable + `Enter`-activatable (no `role`)        |
+| `rowLabel`            | `(row, index) => string \| undefined` | -             | Accessible name for an activatable row                                     |
+| `loading`             | `boolean`                             | `false`       | Show loading overlay                                                       |
+| `small`               | `boolean`                             | `false`       | Force mobile/card layout regardless of viewport                            |
+| `t`                   | `TranslateFn`                         | built-in      | Optional translation function                                              |
+| `cell`                | `Snippet`                             | -             | Custom cell renderer (desktop + mobile)                                    |
+| `row`                 | `Snippet`                             | -             | Custom desktop `<tr>` renderer (overrides default row)                     |
+| `mobileRow`           | `Snippet`                             | -             | Custom mobile card renderer                                                |
+| `batchActions`        | `Snippet`                             | -             | Selection bar content while something is selected                          |
+| `selectAllBanner`     | `Snippet`                             | -             | Override default "select all across pages" offer                           |
+| `empty`               | `Snippet`                             | -             | Custom empty state                                                         |
+| `unstyled`            | `boolean`                             | `false`       | Skip default styling                                                       |
+| `class`               | `string`                              | -             | Additional CSS classes                                                     |
+| `el`                  | `HTMLDivElement`                      | -             | Bindable element ref                                                       |
 
 ### Snippet signatures
 
@@ -260,31 +373,83 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `hideOnMobile` | `boolean`                       | `false`  | Hide in mobile view                       |
 | `renderValue`  | `(value, row) => string`        | -        | Value formatter                           |
 
+## i18n
+
+All built-in texts go through the `t` prop. English is the built-in default; Slovak ships
+bundled and opt-in (importing it is what pulls it into your bundle — English-only
+consumers pay nothing).
+
+```svelte
+<script>
+	import {
+		DataTable,
+		createDataTableT,
+		DATA_TABLE_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+
+	const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+</script>
+
+<DataTable {columns} {data} {t} />
+```
+
+`createDataTableT(messages, fallbackMessages?)` falls back to `DATA_TABLE_MESSAGES_EN` for
+any key the catalog does not define, so a partial catalog is fine and a raw key is never
+rendered — pass your own object to translate into a language that is not bundled, or to
+override individual bundled texts:
+
+```ts
+const t = createDataTableT({ ...DATA_TABLE_MESSAGES_SK, no_data: "Nič tu nie je" });
+```
+
+| Key                    | English                            | Used by                              |
+| ---------------------- | ---------------------------------- | ------------------------------------ |
+| `previous_page`        | Prev                               | Paging                               |
+| `next_page`            | Next                               | Paging                               |
+| `page_x_of_y`          | Page {page} of {pageCount}         | Paging                               |
+| `no_data`              | No data                            | Empty state (no `empty` snippet)     |
+| `select_all_rows`      | Select all rows on this page       | Header checkbox `aria-label`         |
+| `select_row`           | Select row                         | Row checkbox `aria-label`            |
+| `no_rows_selected`     | No rows selected                   | Idle selection bar                   |
+| `x_rows_selected`      | {count} selected                   | Selection bar without `batchActions` |
+| `select_all_on_page_x` | All {count} on this page selected. | Select-all offer                     |
+| `select_all_results`   | Select all {totalCount} results    | Select-all offer                     |
+| `all_results_selected` | All {totalCount} results selected. | Select-all offer, all-pages mode     |
+| `clear_selection`      | Clear selection                    | Select-all offer, all-pages mode     |
+
 ## CSS Variables
 
-| Variable                                  | Default                               | Description                  |
-| ----------------------------------------- | ------------------------------------- | ---------------------------- |
-| `--stuic-data-table-radius`               | `var(--radius-md)`                    | Border radius                |
-| `--stuic-data-table-border-color`         | `var(--stuic-color-border)`           | Border color                 |
-| `--stuic-data-table-header-bg`            | `var(--stuic-color-muted)`            | Header background            |
-| `--stuic-data-table-header-color`         | `var(--stuic-color-muted-foreground)` | Header text                  |
-| `--stuic-data-table-header-font-size`     | `0.875rem`                            | Header font size             |
-| `--stuic-data-table-header-font-weight`   | `var(--font-weight-semibold)`         | Header font weight           |
-| `--stuic-data-table-header-padding-x`     | `0.75rem`                             | Header horizontal padding    |
-| `--stuic-data-table-header-padding-y`     | `0.5rem`                              | Header vertical padding      |
-| `--stuic-data-table-row-bg`               | `transparent`                         | Row background               |
-| `--stuic-data-table-row-bg-hover`         | `var(--stuic-color-muted)`            | Row hover background         |
-| `--stuic-data-table-row-bg-selected`      | `color-mix(primary 10%)`              | Selected row background      |
-| `--stuic-data-table-row-border-color`     | `var(--stuic-color-border)`           | Row border color             |
-| `--stuic-data-table-cell-padding-x`       | `0.75rem`                             | Cell horizontal padding      |
-| `--stuic-data-table-cell-padding-y`       | `0.75rem`                             | Cell vertical padding        |
-| `--stuic-data-table-cell-font-size`       | `0.875rem`                            | Cell font size               |
-| `--stuic-data-table-loading-opacity`      | `0.5`                                 | Loading state opacity        |
-| `--stuic-data-table-card-bg`              | `var(--stuic-color-background)`       | Mobile card background       |
-| `--stuic-data-table-card-border-color`    | `var(--stuic-color-border)`           | Mobile card border           |
-| `--stuic-data-table-card-radius`          | `var(--radius-md)`                    | Mobile card radius           |
-| `--stuic-data-table-card-padding`         | `0.75rem`                             | Mobile card padding          |
-| `--stuic-data-table-card-gap`             | `0.5rem`                              | Gap between mobile cards     |
-| `--stuic-data-table-select-all-bg`        | `color-mix(primary 10%)`              | Select-all banner background |
-| `--stuic-data-table-select-all-padding-x` | `0.75rem`                             | Banner horizontal padding    |
-| `--stuic-data-table-select-all-padding-y` | `0.5rem`                              | Banner vertical padding      |
+| Variable                                       | Default                               | Description                       |
+| ---------------------------------------------- | ------------------------------------- | --------------------------------- |
+| `--stuic-data-table-radius`                    | `var(--radius-md)`                    | Border radius                     |
+| `--stuic-data-table-border-color`              | `var(--stuic-color-border)`           | Border color                      |
+| `--stuic-data-table-header-bg`                 | `var(--stuic-color-muted)`            | Header background                 |
+| `--stuic-data-table-header-color`              | `var(--stuic-color-muted-foreground)` | Header text                       |
+| `--stuic-data-table-header-font-size`          | `0.875rem`                            | Header font size                  |
+| `--stuic-data-table-header-font-weight`        | `var(--font-weight-semibold)`         | Header font weight                |
+| `--stuic-data-table-header-padding-x`          | `0.75rem`                             | Header horizontal padding         |
+| `--stuic-data-table-header-padding-y`          | `0.5rem`                              | Header vertical padding           |
+| `--stuic-data-table-row-bg`                    | `transparent`                         | Row background                    |
+| `--stuic-data-table-row-bg-hover`              | `var(--stuic-color-muted)`            | Row hover background              |
+| `--stuic-data-table-row-bg-selected`           | `color-mix(primary 10%)`              | Selected row background           |
+| `--stuic-data-table-row-border-color`          | `var(--stuic-color-border)`           | Row border color                  |
+| `--stuic-data-table-row-link-color`            | `inherit`                             | `rowHref` anchor color            |
+| `--stuic-data-table-row-link-decoration`       | `none`                                | `rowHref` anchor decoration       |
+| `--stuic-data-table-row-link-decoration-hover` | `underline`                           | …on hover                         |
+| `--stuic-data-table-row-ring-width`            | `3px`                                 | Activatable row focus ring        |
+| `--stuic-data-table-row-ring-color`            | `var(--stuic-color-ring)`             | Activatable row ring color        |
+| `--stuic-data-table-cell-padding-x`            | `0.75rem`                             | Cell horizontal padding           |
+| `--stuic-data-table-cell-padding-y`            | `0.75rem`                             | Cell vertical padding             |
+| `--stuic-data-table-cell-font-size`            | `0.875rem`                            | Cell font size                    |
+| `--stuic-data-table-loading-opacity`           | `0.5`                                 | Loading state opacity             |
+| `--stuic-data-table-card-bg`                   | `var(--stuic-color-background)`       | Mobile card background            |
+| `--stuic-data-table-card-border-color`         | `var(--stuic-color-border)`           | Mobile card border                |
+| `--stuic-data-table-card-radius`               | `var(--radius-md)`                    | Mobile card radius                |
+| `--stuic-data-table-card-padding`              | `0.75rem`                             | Mobile card padding               |
+| `--stuic-data-table-card-gap`                  | `0.5rem`                              | Gap between mobile cards          |
+| `--stuic-data-table-batch-bg`                  | `var(--stuic-color-muted)`            | Selection bar background          |
+| `--stuic-data-table-batch-bg-idle`             | `transparent`                         | …while nothing is selected        |
+| `--stuic-data-table-batch-padding-x`           | `0.75rem`                             | Selection bar h. padding          |
+| `--stuic-data-table-batch-padding-y`           | `0.5rem`                              | Selection bar v. padding          |
+| `--stuic-data-table-batch-min-height`          | `sm Button + padding`                 | Reserved selection bar height     |
+| `--stuic-data-table-select-all-bg`             | `color-mix(primary 10%)`              | …while the select-all offer is up |

package/dist/components/DataTable/i18n-sk.d.ts

@@ -0,0 +1,17 @@
+import type { DataTableMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `DataTable`. Opt-in — English stays the built-in default,
+ * and this module is only pulled into a bundle when it is actually imported (the
+ * component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export declare const DATA_TABLE_MESSAGES_SK: DataTableMessages;

package/dist/components/DataTable/i18n-sk.js

@@ -0,0 +1,29 @@
+/**
+ * Slovak message catalog for `DataTable`. Opt-in — English stays the built-in default,
+ * and this module is only pulled into a bundle when it is actually imported (the
+ * component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export const DATA_TABLE_MESSAGES_SK = {
+    previous_page: "Späť",
+    next_page: "Ďalej",
+    page_x_of_y: "Strana {page} z {pageCount}",
+    no_data: "Žiadne údaje",
+    select_all_rows: "Vybrať všetky riadky na tejto strane",
+    select_row: "Vybrať riadok",
+    select_all_on_page_x: "Vybrané všetky na tejto strane ({count}).",
+    select_all_results: "Vybrať všetky výsledky ({totalCount})",
+    all_results_selected: "Vybrané všetky výsledky ({totalCount}).",
+    clear_selection: "Zrušiť výber",
+    no_rows_selected: "Nič nie je vybrané",
+    x_rows_selected: "Vybrané: {count}",
+};

package/dist/components/DataTable/i18n.d.ts

@@ -0,0 +1,43 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `DataTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{page}`, `{totalCount}`, ...).
+ */
+export declare const DATA_TABLE_MESSAGES_EN: {
+    previous_page: string;
+    next_page: string;
+    page_x_of_y: string;
+    no_data: string;
+    select_all_rows: string;
+    select_row: string;
+    select_all_on_page_x: string;
+    select_all_results: string;
+    all_results_selected: string;
+    clear_selection: string;
+    no_rows_selected: string;
+    x_rows_selected: string;
+};
+/** Every message key `DataTable` may look up. */
+export type DataTableMessageKey = keyof typeof DATA_TABLE_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type DataTableMessages = Record<DataTableMessageKey, string>;
+/**
+ * Builds the `t` prop of `DataTable` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export declare function createDataTableT(messages: Partial<DataTableMessages> | Record<string, string>, fallbackMessages?: Partial<DataTableMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/DataTable/i18n.js

@@ -0,0 +1,51 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `DataTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{page}`, `{totalCount}`, ...).
+ */
+export const DATA_TABLE_MESSAGES_EN = {
+    previous_page: "Prev",
+    next_page: "Next",
+    page_x_of_y: "Page {page} of {pageCount}",
+    no_data: "No data",
+    select_all_rows: "Select all rows on this page",
+    select_row: "Select row",
+    select_all_on_page_x: "All {count} on this page selected.",
+    select_all_results: "Select all {totalCount} results",
+    all_results_selected: "All {totalCount} results selected.",
+    clear_selection: "Clear selection",
+    no_rows_selected: "No rows selected",
+    x_rows_selected: "{count} selected",
+};
+/**
+ * Builds the `t` prop of `DataTable` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export function createDataTableT(messages, fallbackMessages = DATA_TABLE_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createDataTableT(DATA_TABLE_MESSAGES_EN);

package/dist/components/DataTable/index.css

@@ -24,6 +24,15 @@
 	--stuic-data-table-row-bg-selected: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
 	--stuic-data-table-row-border-color: var(--stuic-color-border);
 
+	/* Row link (rowHref) — defaults to "looks like the text it replaced" */
+	--stuic-data-table-row-link-color: inherit;
+	--stuic-data-table-row-link-decoration: none;
+	--stuic-data-table-row-link-decoration-hover: underline;
+
+	/* Focus ring for an activatable row (rowActivatable) */
+	--stuic-data-table-row-ring-width: 3px;
+	--stuic-data-table-row-ring-color: var(--stuic-color-ring);
+
 	/* Cell */
 	--stuic-data-table-cell-padding-x: 0.75rem;
 	--stuic-data-table-cell-padding-y: 0.75rem;
@@ -33,15 +42,19 @@
 	--stuic-data-table-paging-gap: 0.5rem;
 	--stuic-data-table-paging-padding-y: 0.75rem;
 
-	/* Batch action bar */
+	/* Selection (batch action) bar */
 	--stuic-data-table-batch-bg: var(--stuic-color-muted);
+	/* Nothing selected -- the bar is only holding its place, so it stays quiet. */
+	--stuic-data-table-batch-bg-idle: var(--stuic-color-muted);
 	--stuic-data-table-batch-padding-x: 0.75rem;
-	--stuic-data-table-batch-padding-y: 0.5rem;
+	--stuic-data-table-batch-padding-y: 0.25rem;
+	/* Sized to a `size="sm"` Button so the idle and active states are the same height. */
+	--stuic-data-table-batch-min-height: calc(var(--stuic-button-min-height-sm, 2.75rem) + var(--stuic-data-table-batch-padding-y) * 2);
+	/*  */
+	--stuic-data-table-batch-margin: 0 0 0.125rem 0;
 
-	/* Select-all-across-pages banner */
+	/* Select-all-across-pages offer (rendered inside the selection bar) */
 	--stuic-data-table-select-all-bg: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
-	--stuic-data-table-select-all-padding-x: 0.75rem;
-	--stuic-data-table-select-all-padding-y: 0.5rem;
 
 	/* Checkbox column */
 	--stuic-data-table-checkbox-width: 3rem;
@@ -152,6 +165,31 @@
 		);
 	}
 
+	/*
+	   `rowActivatable` puts tabindex on the <tr>, and a focusable element with no
+	   visible ring is worse than no tabindex at all. The negative offset keeps the
+	   ring inside the row box — an outset ring on a <tr> is clipped unpredictably
+	   by border-collapse.
+	*/
+	.stuic-data-table tbody tr:focus-visible {
+		outline: var(--stuic-data-table-row-ring-width) solid
+			var(--stuic-data-table-row-ring-color);
+		outline-offset: calc(var(--stuic-data-table-row-ring-width) * -1);
+	}
+
+	/* ============================================================================
+	   ROW LINK (rowHref)
+	   ============================================================================ */
+
+	.stuic-data-table-row-link {
+		color: var(--stuic-data-table-row-link-color);
+		text-decoration: var(--stuic-data-table-row-link-decoration);
+	}
+
+	.stuic-data-table-row-link:hover {
+		text-decoration: var(--stuic-data-table-row-link-decoration-hover);
+	}
+
 	/* ============================================================================
 	   CELL
 	   ============================================================================ */
@@ -204,34 +242,52 @@
 	   BATCH ACTION BAR
 	   ============================================================================ */
 
+	/*
+	   The min-height is the whole point of the reserved bar: an idle line of text is
+	   shorter than a row of buttons, so without it the table would still shift -- just
+	   by less. Keep it in sync with whatever button size the batch actions use.
+	*/
 	.stuic-data-table-batch {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
 		gap: var(--stuic-data-table-paging-gap);
+		min-height: var(--stuic-data-table-batch-min-height);
 		padding: var(--stuic-data-table-batch-padding-y)
 			var(--stuic-data-table-batch-padding-x);
 		background: var(--stuic-data-table-batch-bg);
 		border-radius: var(--stuic-data-table-radius, var(--stuic-radius));
-		margin-bottom: 0.5rem;
+		margin: var(--stuic-data-table-batch-margin, 0);
+		transition: background var(--stuic-data-table-transition, var(--stuic-transition));
 	}
 
-	/* ============================================================================
-	   SELECT-ALL-ACROSS-PAGES BANNER
-	   ============================================================================ */
+	.stuic-data-table-batch[data-idle="true"] {
+		background: var(--stuic-data-table-batch-bg-idle);
+	}
+
+	/* The select-all offer is the one state worth actively drawing attention to. */
+	.stuic-data-table-batch[data-select-all="true"] {
+		background: var(--stuic-data-table-select-all-bg);
+	}
 
-	.stuic-data-table-select-all-banner {
+	.stuic-data-table-batch-main,
+	.stuic-data-table-batch-select-all {
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		flex-wrap: wrap;
 		gap: var(--stuic-data-table-paging-gap);
-		padding: var(--stuic-data-table-select-all-padding-y)
-			var(--stuic-data-table-select-all-padding-x);
-		background: var(--stuic-data-table-select-all-bg);
-		border-radius: var(--stuic-data-table-radius, var(--stuic-radius));
-		margin-bottom: 0.5rem;
+	}
+
+	.stuic-data-table-batch-select-all {
+		margin-left: auto;
+		font-size: var(--stuic-data-table-cell-font-size);
+		color: var(--stuic-data-table-header-color);
+	}
+
+	.stuic-data-table-batch-status {
 		font-size: var(--stuic-data-table-cell-font-size);
 		color: var(--stuic-data-table-header-color);
-		text-align: center;
 	}
 
 	/* ============================================================================

package/dist/components/DataTable/index.d.ts

@@ -1 +1,3 @@
 export { default as DataTable, type Props as DataTableProps, type DataTableColumn, } from "./DataTable.svelte";
+export { createDataTableT, DATA_TABLE_MESSAGES_EN, type DataTableMessageKey, type DataTableMessages, } from "./i18n.js";
+export { DATA_TABLE_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/DataTable/index.js

@@ -1 +1,3 @@
 export { default as DataTable, } from "./DataTable.svelte";
+export { createDataTableT, DATA_TABLE_MESSAGES_EN, } from "./i18n.js";
+export { DATA_TABLE_MESSAGES_SK } from "./i18n-sk.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.161.0",
+	"version": "3.163.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",