@marianmeres/stuic 3.7.0 → 3.8.0

package/dist/components/DataTable/DataTable.svelte

@@ -0,0 +1,451 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	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",
+			select_row: "Select row",
+		};
+		let out = m[k] ?? fallback ?? k;
+		return isPlainObject(values) ? replaceMap(out, values as any) : out;
+	}
+
+	export interface DataTableColumn<T = Record<string, any>> {
+		/** Property key to extract from row data (supports dot-notation: "data.name") */
+		key: string;
+		/** Column header label (string, HTML, component, or snippet) */
+		label?: THC;
+		/** CSS width value (e.g. "200px", "30%") */
+		width?: string;
+		/** Additional CSS class for body cells in this column */
+		class?: string;
+		/** Additional CSS class for the header cell */
+		classHeader?: string;
+		/** Text alignment */
+		align?: "left" | "center" | "right";
+		/** Hide this column in mobile card view */
+		hideOnMobile?: boolean;
+		/** Simple text formatter for cell values */
+		renderValue?: (value: any, row: T) => string;
+	}
+
+	export interface Props<T = Record<string, any>> extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"children"
+	> {
+		/** Column definitions */
+		columns: DataTableColumn<T>[];
+		/** Array of row data objects */
+		data: T[];
+		/** Function to extract a unique ID from a row. Defaults to index. */
+		getRowId?: (row: T, index: number) => string | number;
+
+		/** Paging calculation result from @marianmeres/paging-store */
+		paging?: PagingCalcResult;
+		/** Callback when the user navigates to a different page (receives new offset) */
+		onPageChange?: (offset: number) => void;
+
+		/** Enable row selection checkboxes */
+		selectable?: boolean;
+		/** Set of selected row IDs (bindable) */
+		selected?: Set<string | number>;
+		/** Toggle row selection when clicking anywhere on the row */
+		selectOnRowClick?: boolean;
+
+		/** Callback when a row is clicked */
+		onRowClick?: (row: T, index: number) => void;
+
+		/** Show loading state (spinner overlay + reduced opacity) */
+		loading?: boolean;
+
+		/** Custom cell renderer snippet */
+		cell?: Snippet<
+			[{ column: DataTableColumn<T>; row: T; value: any; rowIndex: number }]
+		>;
+		/** Batch actions bar snippet (shown when items are selected) */
+		batchActions?: Snippet<
+			[
+				{
+					selected: Set<string | number>;
+					selectedRows: T[];
+					clearSelection: () => void;
+				},
+			]
+		>;
+		/** Custom empty state snippet */
+		empty?: Snippet;
+		/** Custom mobile row card snippet */
+		mobileRow?: Snippet<[{ row: T; columns: DataTableColumn<T>[]; rowIndex: number }]>;
+		/** Default children snippet (not used directly) */
+		children?: Snippet;
+
+		/** Optional translate function */
+		t?: TranslateFn;
+
+		/** Force mobile/card layout regardless of breakpoint */
+		small?: boolean;
+
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes for the root container */
+		class?: string;
+		/** Bindable element reference */
+		el?: HTMLDivElement;
+	}
+</script>
+
+<script lang="ts" generics="T extends Record<string, any> = Record<string, any>">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { Breakpoint } from "../../utils/breakpoint.svelte.js";
+	import Spinner from "../Spinner/Spinner.svelte";
+	import Button from "../Button/Button.svelte";
+	import Thc, { isTHCNotEmpty, getTHCStringContent } from "../Thc/Thc.svelte";
+
+	let {
+		columns,
+		data,
+		getRowId = (_row: T, index: number) => index,
+		paging,
+		onPageChange,
+		selectable = false,
+		selected = $bindable(new Set()),
+		selectOnRowClick = false,
+		onRowClick,
+		loading = false,
+		cell,
+		batchActions,
+		empty,
+		mobileRow,
+		children,
+		t = t_default,
+		small = false,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props<T> = $props();
+
+	// --- Responsive ---
+	const bp = Breakpoint.instance;
+	let isDesktop = $derived(small ? false : bp.md);
+
+	// --- Paging ---
+	let showPaging = $derived(paging != null && paging.pageCount > 1);
+
+	// --- Selection ---
+	let allRowIds = $derived(data.map((row, i) => getRowId(row, i)));
+
+	let allOnPageSelected = $derived.by(() => {
+		if (!selectable || allRowIds.length === 0) return false;
+		return allRowIds.every((id) => selected.has(id));
+	});
+
+	let someOnPageSelected = $derived.by(() => {
+		if (!selectable || allRowIds.length === 0) return false;
+		return allRowIds.some((id) => selected.has(id)) && !allOnPageSelected;
+	});
+
+	let selectedRows = $derived.by(() => {
+		if (!selectable || selected.size === 0) return [] as T[];
+		return data.filter((row, i) => selected.has(getRowId(row, i)));
+	});
+
+	function toggleSelectAll() {
+		if (allOnPageSelected) {
+			const next = new Set(selected);
+			for (const id of allRowIds) next.delete(id);
+			selected = next;
+		} else {
+			const next = new Set(selected);
+			for (const id of allRowIds) next.add(id);
+			selected = next;
+		}
+	}
+
+	function toggleSelectRow(id: string | number) {
+		const next = new Set(selected);
+		if (next.has(id)) {
+			next.delete(id);
+		} else {
+			next.add(id);
+		}
+		selected = next;
+	}
+
+	function clearSelection() {
+		selected = new Set();
+	}
+
+	// --- Row click ---
+	function handleRowClick(row: T, index: number, e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (
+			target.closest('input[type="checkbox"]') ||
+			target.closest("button") ||
+			target.closest("a")
+		) {
+			return;
+		}
+		if (selectable && selectOnRowClick) {
+			toggleSelectRow(getRowId(row, index));
+		}
+		onRowClick?.(row, index);
+	}
+
+	// --- Cell value helpers ---
+	function getCellValue(row: T, column: DataTableColumn<T>): any {
+		return column.key.split(".").reduce((obj: any, k) => obj?.[k], row);
+	}
+
+	function getCellDisplay(row: T, column: DataTableColumn<T>): string {
+		const value = getCellValue(row, column);
+		if (column.renderValue) return column.renderValue(value, row);
+		return value == null ? "" : String(value);
+	}
+
+	// --- CSS ---
+	let rootClass = $derived(unstyled ? classProp : twMerge("stuic-data-table", classProp));
+
+	let mobileColumns = $derived(columns.filter((col) => !col.hideOnMobile));
+</script>
+
+<!-- Batch action bar -->
+{#if selectable && selected.size > 0 && batchActions}
+	<div class={!unstyled ? "stuic-data-table-batch" : undefined}>
+		{@render batchActions({ selected, selectedRows, clearSelection })}
+	</div>
+{/if}
+
+<!-- Root container -->
+<div bind:this={el} class={rootClass} {...rest}>
+	{#if isDesktop}
+		<!-- DESKTOP: TABLE -->
+		<div
+			class={!unstyled ? "stuic-data-table-wrapper" : undefined}
+			data-loading={!unstyled && loading ? "true" : undefined}
+		>
+			<table>
+				<thead>
+					<tr>
+						{#if selectable}
+							<th data-checkbox class="stuic-checkbox">
+								<input
+									type="checkbox"
+									checked={allOnPageSelected}
+									indeterminate={someOnPageSelected}
+									onchange={toggleSelectAll}
+									aria-label={t("select_all_rows")}
+								/>
+							</th>
+						{/if}
+						{#each columns as col (col.key)}
+							<th
+								class={col.classHeader}
+								data-align={!unstyled && col.align ? col.align : undefined}
+								style={col.width ? `width: ${col.width}` : undefined}
+							>
+								{#if isTHCNotEmpty(col.label)}
+									<Thc thc={col.label!} />
+								{:else}
+									{col.key}
+								{/if}
+							</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each data as row, rowIndex (getRowId(row, rowIndex))}
+						{@const rowId = getRowId(row, rowIndex)}
+						{@const isSelected = selectable && selected.has(rowId)}
+						<tr
+							data-hoverable={!unstyled ? "true" : undefined}
+							data-clickable={!unstyled && (onRowClick || selectOnRowClick)
+								? "true"
+								: undefined}
+							data-selected={!unstyled && isSelected ? "true" : undefined}
+							onclick={(e) => handleRowClick(row, rowIndex, e)}
+						>
+							{#if selectable}
+								<td data-checkbox class="stuic-checkbox">
+									<input
+										type="checkbox"
+										checked={isSelected}
+										onchange={() => toggleSelectRow(rowId)}
+										aria-label={t("select_row")}
+									/>
+								</td>
+							{/if}
+							{#each columns as col (col.key)}
+								{@const value = getCellValue(row, col)}
+								<td
+									class={col.class}
+									data-align={!unstyled && col.align ? col.align : undefined}
+								>
+									{#if cell}
+										{@render cell({
+											column: col,
+											row,
+											value,
+											rowIndex,
+										})}
+									{:else}
+										{getCellDisplay(row, col)}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{:else}
+						<tr>
+							<td
+								colspan={columns.length + (selectable ? 1 : 0)}
+								class={!unstyled ? "stuic-data-table-empty" : undefined}
+							>
+								{#if empty}
+									{@render empty()}
+								{:else}
+									{t("no_data")}
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{:else}
+		<!-- MOBILE: CARDS -->
+		<div
+			class={!unstyled ? "stuic-data-table-cards" : undefined}
+			data-loading={!unstyled && loading ? "true" : undefined}
+		>
+			{#each data as row, rowIndex (getRowId(row, rowIndex))}
+				{@const rowId = getRowId(row, rowIndex)}
+				{@const isSelected = selectable && selected.has(rowId)}
+				{#if mobileRow}
+					{@render mobileRow({
+						row,
+						columns: mobileColumns,
+						rowIndex,
+					})}
+				{:else}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<div
+						class={!unstyled ? "stuic-data-table-card" : undefined}
+						data-clickable={!unstyled && (onRowClick || selectOnRowClick)
+							? "true"
+							: undefined}
+						data-selected={!unstyled && isSelected ? "true" : undefined}
+						role={onRowClick || selectOnRowClick ? "button" : undefined}
+						tabindex={onRowClick || selectOnRowClick ? 0 : undefined}
+						onclick={(e) => handleRowClick(row, rowIndex, e)}
+						onkeydown={(e) => {
+							if (
+								(onRowClick || selectOnRowClick) &&
+								(e.key === "Enter" || e.key === " ")
+							) {
+								e.preventDefault();
+								if (selectable && selectOnRowClick) {
+									toggleSelectRow(rowId);
+								}
+								onRowClick?.(row, rowIndex);
+							}
+						}}
+					>
+						{#if selectable}
+							<div class="stuic-checkbox flex items-center gap-2 mb-1">
+								<input
+									type="checkbox"
+									checked={isSelected}
+									onchange={() => toggleSelectRow(rowId)}
+									aria-label={t("select_row")}
+								/>
+							</div>
+						{/if}
+						{#each mobileColumns as col (col.key)}
+							{@const value = getCellValue(row, col)}
+							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
+								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
+									{#if isTHCNotEmpty(col.label)}
+										{getTHCStringContent(col.label) || col.key}
+									{:else}
+										{col.key}
+									{/if}
+								</span>
+								<span class={!unstyled ? "stuic-data-table-card-value" : undefined}>
+									{#if cell}
+										{@render cell({
+											column: col,
+											row,
+											value,
+											rowIndex,
+										})}
+									{:else}
+										{getCellDisplay(row, col)}
+									{/if}
+								</span>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<div class={!unstyled ? "stuic-data-table-empty" : undefined}>
+					{#if empty}
+						{@render empty()}
+					{:else}
+						No data
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Loading spinner overlay -->
+	{#if loading}
+		<div class={!unstyled ? "stuic-data-table-loading" : undefined}>
+			<Spinner />
+		</div>
+	{/if}
+
+	<!-- Paging -->
+	{#if showPaging && paging}
+		<div class={!unstyled ? "stuic-data-table-paging" : undefined}>
+			<Button
+				variant="ghost"
+				size="sm"
+				disabled={!paging.hasPrevious}
+				onclick={() => onPageChange?.(paging!.previousOffset)}
+				aria-label={t("previous_page")}
+			>
+				&lsaquo; {t("previous_page")}
+			</Button>
+			<span class={!unstyled ? "stuic-data-table-paging-info" : undefined}>
+				{t("page_x_of_y", { page: paging.currentPage, pageCount: paging.pageCount })}
+			</span>
+			<Button
+				variant="ghost"
+				size="sm"
+				disabled={!paging.hasNext}
+				onclick={() => onPageChange?.(paging!.nextOffset)}
+				aria-label={t("next_page")}
+			>
+				{t("next_page")} &rsaquo;
+			</Button>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,106 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { PagingCalcResult } from "@marianmeres/paging-store";
+import type { THC } from "../Thc/index.js";
+import type { TranslateFn } from "../../types.js";
+export interface DataTableColumn<T = Record<string, any>> {
+    /** Property key to extract from row data (supports dot-notation: "data.name") */
+    key: string;
+    /** Column header label (string, HTML, component, or snippet) */
+    label?: THC;
+    /** CSS width value (e.g. "200px", "30%") */
+    width?: string;
+    /** Additional CSS class for body cells in this column */
+    class?: string;
+    /** Additional CSS class for the header cell */
+    classHeader?: string;
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Hide this column in mobile card view */
+    hideOnMobile?: boolean;
+    /** Simple text formatter for cell values */
+    renderValue?: (value: any, row: T) => string;
+}
+export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Array of row data objects */
+    data: T[];
+    /** Function to extract a unique ID from a row. Defaults to index. */
+    getRowId?: (row: T, index: number) => string | number;
+    /** Paging calculation result from @marianmeres/paging-store */
+    paging?: PagingCalcResult;
+    /** Callback when the user navigates to a different page (receives new offset) */
+    onPageChange?: (offset: number) => void;
+    /** Enable row selection checkboxes */
+    selectable?: boolean;
+    /** Set of selected row IDs (bindable) */
+    selected?: Set<string | number>;
+    /** Toggle row selection when clicking anywhere on the row */
+    selectOnRowClick?: boolean;
+    /** Callback when a row is clicked */
+    onRowClick?: (row: T, index: number) => void;
+    /** Show loading state (spinner overlay + reduced opacity) */
+    loading?: boolean;
+    /** Custom cell renderer snippet */
+    cell?: Snippet<[
+        {
+            column: DataTableColumn<T>;
+            row: T;
+            value: any;
+            rowIndex: number;
+        }
+    ]>;
+    /** Batch actions bar snippet (shown when items are selected) */
+    batchActions?: Snippet<[
+        {
+            selected: Set<string | number>;
+            selectedRows: T[];
+            clearSelection: () => void;
+        }
+    ]>;
+    /** Custom empty state snippet */
+    empty?: Snippet;
+    /** Custom mobile row card snippet */
+    mobileRow?: Snippet<[{
+        row: T;
+        columns: DataTableColumn<T>[];
+        rowIndex: number;
+    }]>;
+    /** Default children snippet (not used directly) */
+    children?: Snippet;
+    /** Optional translate function */
+    t?: TranslateFn;
+    /** Force mobile/card layout regardless of breakpoint */
+    small?: boolean;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes for the root container */
+    class?: string;
+    /** Bindable element reference */
+    el?: HTMLDivElement;
+}
+declare function $$render<T extends Record<string, any> = Record<string, any>>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "el" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any> = Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "el" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any> = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, any> = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T extends Record<string, any> = Record<string, any>> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/components/DataTable/README.md

@@ -0,0 +1,151 @@
+# DataTable
+
+A responsive data table component with configurable columns, paging, batch selection,
+loading state, and mobile card layout.
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { DataTable, type DataTableColumn } from "@marianmeres/stuic";
+
+	const columns: DataTableColumn[] = [
+		{ key: "id", label: "ID", width: "80px" },
+		{ key: "name", label: "Name" },
+		{ key: "email", label: "Email" },
+	];
+
+	const data = [
+		{ id: 1, name: "Alice", email: "alice@example.com" },
+		{ id: 2, name: "Bob", email: "bob@example.com" },
+	];
+</script>
+
+<DataTable {columns} {data} />
+```
+
+### With Paging
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	page={1}
+	pageSize={20}
+	totalItems={100}
+	onPageChange={(p) => fetchPage(p)}
+/>
+```
+
+### With Selection
+
+```svelte
+<script lang="ts">
+	let selected = $state(new Set<string | number>());
+</script>
+
+<DataTable
+	{columns}
+	{data}
+	selectable
+	bind:selected
+	getRowId={(row) => row.id}
+>
+	{#snippet batchActions({ selected, clearSelection })}
+		<span>{selected.size} selected</span>
+		<Button onclick={() => deleteSelected(selected)}>Delete</Button>
+		<Button variant="ghost" onclick={clearSelection}>Clear</Button>
+	{/snippet}
+</DataTable>
+```
+
+### Custom Cell Rendering
+
+```svelte
+<DataTable {columns} {data}>
+	{#snippet cell({ column, row, value })}
+		{#if column.key === "status"}
+			<span class="badge">{value}</span>
+		{:else}
+			{value}
+		{/if}
+	{/snippet}
+</DataTable>
+```
+
+### Custom Mobile Layout
+
+```svelte
+<DataTable {columns} {data}>
+	{#snippet mobileRow({ row })}
+		<div class="p-3 border rounded">
+			<strong>{row.name}</strong>
+			<p>{row.email}</p>
+		</div>
+	{/snippet}
+</DataTable>
+```
+
+## 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 |
+| `page` | `number` | - | Current page (1-based) |
+| `pageSize` | `number` | - | Rows per page |
+| `totalItems` | `number` | - | Total items count |
+| `onPageChange` | `(page: number) => void` | - | Page change callback |
+| `selectable` | `boolean` | `false` | Enable selection checkboxes |
+| `selected` | `Set<string \| number>` | `new Set()` | Selected row IDs (bindable) |
+| `onRowClick` | `(row, index) => void` | - | Row click callback |
+| `loading` | `boolean` | `false` | Show loading overlay |
+| `cell` | `Snippet` | - | Custom cell renderer |
+| `batchActions` | `Snippet` | - | Batch action bar content |
+| `empty` | `Snippet` | - | Custom empty state |
+| `mobileRow` | `Snippet` | - | Custom mobile row card |
+| `unstyled` | `boolean` | `false` | Skip default styling |
+| `class` | `string` | - | Additional CSS classes |
+| `el` | `HTMLDivElement` | - | Bindable element ref |
+
+## DataTableColumn
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `key` | `string` | required | Data property key (supports dot-notation) |
+| `label` | `THC` | `key` | Column header content |
+| `width` | `string` | - | CSS width value |
+| `class` | `string` | - | Cell CSS class |
+| `classHeader` | `string` | - | Header cell CSS class |
+| `align` | `"left" \| "center" \| "right"` | `"left"` | Text alignment |
+| `hideOnMobile` | `boolean` | `false` | Hide in mobile view |
+| `renderValue` | `(value, row) => string` | - | Value formatter |
+
+## 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 |

package/dist/components/DataTable/index.css

@@ -0,0 +1,303 @@
+/* ============================================================================
+   DATA TABLE COMPONENT TOKENS
+   Override globally: :root { --stuic-data-table-radius: 0; }
+   Override locally:  <DataTable style="--stuic-data-table-radius: 0;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Structure */
+	--stuic-data-table-radius: var(--radius-md);
+	--stuic-data-table-border-width: 1px;
+	--stuic-data-table-border-color: var(--stuic-color-border);
+	--stuic-data-table-transition: 150ms;
+
+	/* Header */
+	--stuic-data-table-header-bg: var(--stuic-color-muted);
+	--stuic-data-table-header-color: var(--stuic-color-muted-foreground);
+	--stuic-data-table-header-font-size: 0.875rem;
+	--stuic-data-table-header-font-weight: var(--font-weight-semibold);
+	--stuic-data-table-header-padding-x: 0.75rem;
+	--stuic-data-table-header-padding-y: 0.5rem;
+
+	/* Row */
+	--stuic-data-table-row-bg: transparent;
+	--stuic-data-table-row-bg-hover: var(--stuic-color-muted);
+	--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);
+
+	/* Cell */
+	--stuic-data-table-cell-padding-x: 0.75rem;
+	--stuic-data-table-cell-padding-y: 0.75rem;
+	--stuic-data-table-cell-font-size: 0.875rem;
+
+	/* Paging */
+	--stuic-data-table-paging-gap: 0.5rem;
+	--stuic-data-table-paging-padding-y: 0.75rem;
+
+	/* Batch action bar */
+	--stuic-data-table-batch-bg: var(--stuic-color-muted);
+	--stuic-data-table-batch-padding-x: 0.75rem;
+	--stuic-data-table-batch-padding-y: 0.5rem;
+
+	/* Checkbox column */
+	--stuic-data-table-checkbox-width: 3rem;
+
+	/* Loading overlay */
+	--stuic-data-table-loading-opacity: 0.5;
+
+	/* Mobile card */
+	--stuic-data-table-card-bg: var(--stuic-color-background);
+	--stuic-data-table-card-border-color: var(--stuic-color-border);
+	--stuic-data-table-card-radius: var(--radius-md);
+	--stuic-data-table-card-padding: 0.75rem;
+	--stuic-data-table-card-gap: 0.5rem;
+	--stuic-data-table-card-bg-selected: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
+}
+
+@layer components {
+	/* ============================================================================
+	   CONTAINER
+	   ============================================================================ */
+
+	.stuic-data-table {
+		position: relative;
+		width: 100%;
+	}
+
+	/* ============================================================================
+	   TABLE WRAPPER (desktop)
+	   ============================================================================ */
+
+	.stuic-data-table-wrapper {
+		overflow-x: auto;
+		border-radius: var(--stuic-data-table-radius);
+		border: var(--stuic-data-table-border-width) solid var(--stuic-data-table-border-color);
+		transition: opacity var(--stuic-data-table-transition);
+	}
+
+	.stuic-data-table-wrapper[data-loading="true"] {
+		opacity: var(--stuic-data-table-loading-opacity);
+	}
+
+	.stuic-data-table table {
+		width: 100%;
+		border-collapse: collapse;
+		table-layout: fixed;
+	}
+
+	/* ============================================================================
+	   HEADER
+	   ============================================================================ */
+
+	.stuic-data-table thead {
+		background: var(--stuic-data-table-header-bg);
+	}
+
+	.stuic-data-table th {
+		padding: var(--stuic-data-table-header-padding-y) var(--stuic-data-table-header-padding-x);
+		font-size: var(--stuic-data-table-header-font-size);
+		font-weight: var(--stuic-data-table-header-font-weight);
+		color: var(--stuic-data-table-header-color);
+		text-align: left;
+		white-space: nowrap;
+		border-bottom: var(--stuic-data-table-border-width) solid
+			var(--stuic-data-table-border-color);
+	}
+
+	.stuic-data-table th[data-align="center"] {
+		text-align: center;
+	}
+
+	.stuic-data-table th[data-align="right"] {
+		text-align: right;
+	}
+
+	/* ============================================================================
+	   ROW
+	   ============================================================================ */
+
+	.stuic-data-table tbody tr {
+		background: var(--stuic-data-table-row-bg);
+		border-bottom: var(--stuic-data-table-border-width) solid
+			var(--stuic-data-table-row-border-color);
+		transition: background var(--stuic-data-table-transition);
+	}
+
+	.stuic-data-table tbody tr:last-child {
+		border-bottom: none;
+	}
+
+	.stuic-data-table tbody tr[data-hoverable="true"]:hover {
+		background: var(--stuic-data-table-row-bg-hover);
+	}
+
+	.stuic-data-table tbody tr[data-clickable="true"] {
+		cursor: pointer;
+	}
+
+	.stuic-data-table tbody tr[data-selected="true"] {
+		background: var(--stuic-data-table-row-bg-selected);
+	}
+
+	.stuic-data-table tbody tr[data-selected="true"][data-hoverable="true"]:hover {
+		background: color-mix(
+			in srgb,
+			var(--stuic-color-primary) 18%,
+			var(--stuic-color-background)
+		);
+	}
+
+	/* ============================================================================
+	   CELL
+	   ============================================================================ */
+
+	.stuic-data-table td {
+		padding: var(--stuic-data-table-cell-padding-y) var(--stuic-data-table-cell-padding-x);
+		font-size: var(--stuic-data-table-cell-font-size);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.stuic-data-table td[data-align="center"] {
+		text-align: center;
+	}
+
+	.stuic-data-table td[data-align="right"] {
+		text-align: right;
+	}
+
+	/* Checkbox cell */
+	.stuic-data-table th[data-checkbox],
+	.stuic-data-table td[data-checkbox] {
+		width: var(--stuic-data-table-checkbox-width);
+		text-align: center;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		line-height: 0;
+	}
+
+	/* ============================================================================
+	   PAGING
+	   ============================================================================ */
+
+	.stuic-data-table-paging {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-data-table-paging-gap);
+		padding-top: var(--stuic-data-table-paging-padding-y);
+	}
+
+	.stuic-data-table-paging-info {
+		font-size: var(--stuic-data-table-cell-font-size);
+		color: var(--stuic-data-table-header-color);
+		white-space: nowrap;
+	}
+
+	/* ============================================================================
+	   BATCH ACTION BAR
+	   ============================================================================ */
+
+	.stuic-data-table-batch {
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-data-table-paging-gap);
+		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);
+		margin-bottom: 0.5rem;
+	}
+
+	/* ============================================================================
+	   LOADING SPINNER OVERLAY
+	   ============================================================================ */
+
+	.stuic-data-table-loading {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	/* ============================================================================
+	   EMPTY STATE
+	   ============================================================================ */
+
+	.stuic-data-table-empty {
+		padding: 2rem;
+		color: var(--stuic-data-table-header-color);
+		font-size: var(--stuic-data-table-cell-font-size);
+		text-align: center;
+	}
+
+	/* When empty state is not inside a table cell (mobile cards) */
+	div.stuic-data-table-empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* ============================================================================
+	   MOBILE CARDS
+	   ============================================================================ */
+
+	.stuic-data-table-cards {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-data-table-card-gap);
+		transition: opacity var(--stuic-data-table-transition);
+	}
+
+	.stuic-data-table-cards[data-loading="true"] {
+		opacity: var(--stuic-data-table-loading-opacity);
+	}
+
+	.stuic-data-table-card {
+		background: var(--stuic-data-table-card-bg);
+		border: var(--stuic-data-table-border-width) solid var(--stuic-data-table-card-border-color);
+		border-radius: var(--stuic-data-table-card-radius);
+		padding: var(--stuic-data-table-card-padding);
+		transition: background var(--stuic-data-table-transition);
+	}
+
+	.stuic-data-table-card[data-clickable="true"] {
+		cursor: pointer;
+	}
+
+	.stuic-data-table-card[data-clickable="true"]:hover {
+		background: var(--stuic-data-table-row-bg-hover);
+	}
+
+	.stuic-data-table-card[data-selected="true"] {
+		background: var(--stuic-data-table-card-bg-selected);
+	}
+
+	.stuic-data-table-card-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 0.5rem;
+		padding: 0.25rem 0;
+	}
+
+	.stuic-data-table-card-label {
+		font-size: var(--stuic-data-table-header-font-size);
+		font-weight: var(--stuic-data-table-header-font-weight);
+		color: var(--stuic-data-table-header-color);
+		flex-shrink: 0;
+	}
+
+	.stuic-data-table-card-value {
+		font-size: var(--stuic-data-table-cell-font-size);
+		text-align: right;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+}

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

@@ -0,0 +1 @@
+export { default as DataTable, type Props as DataTableProps, type DataTableColumn, } from "./DataTable.svelte";

package/dist/components/DataTable/index.js

@@ -0,0 +1 @@
+export { default as DataTable, } from "./DataTable.svelte";

package/dist/index.css

@@ -32,6 +32,7 @@ In practice:
 @import "./components/Collapsible/index.css";
 @import "./components/Carousel/index.css";
 @import "./components/CommandMenu/index.css";
+@import "./components/DataTable/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
 @import "./components/Input/index.css";

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export * from "./components/Carousel/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";

package/dist/index.js

@@ -34,6 +34,7 @@ export * from "./components/Carousel/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -65,6 +65,7 @@
   "dependencies": {
     "@marianmeres/clog": "^3.15.2",
     "@marianmeres/item-collection": "^1.3.5",
+    "@marianmeres/paging-store": "^2.0.2",
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
     "esm-env": "^1.2.2",