@synthaxai/ui 1.0.0

package/dist/data-display/DataTable/DataTable.svelte

@@ -0,0 +1,773 @@
+<!--
+  @component DataTable
+  
+  A world-class responsive data table component designed for healthcare applications.
+  Features sorting, row selection, sticky headers, pagination, and full accessibility.
+  
+  Features:
+  - Full WCAG 2.1 AA compliance with proper semantic markup
+  - Sortable columns with keyboard support
+  - Row selection with checkbox support
+  - Sticky header option for long tables
+  - Size variants (sm, md, lg) for different data densities
+  - Loading state with skeleton placeholders
+  - Empty state with customizable message
+  - Pagination support for large datasets
+  - Mobile-responsive with column hiding
+  
+  @example
+  <DataTable
+    columns={[
+      { key: 'name', header: 'Patient Name', sortable: true },
+      { key: 'status', header: 'Status' },
+      { key: 'date', header: 'Date', hideOnMobile: true }
+    ]}
+    data={patients}
+    caption="Patient list for Dr. Smith"
+    selectable
+    stickyHeader
+  />
+-->
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import { ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
+	import { Skeleton } from '../../feedback/Skeleton/index.js';
+	import { EmptyState } from '../../feedback/EmptyState/index.js';
+	import { Checkbox } from '../../forms/Checkbox/index.js';
+	import type { TableColumn, SortState, SortDirection } from '../../types/index.js';
+
+	type TableSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		/** Column definitions */
+		columns: TableColumn<T>[];
+		/** Data rows */
+		data: T[];
+		/** Table caption for accessibility - describes the table's purpose */
+		caption?: string;
+		/** Whether to visually hide the caption (still available to screen readers) */
+		captionHidden?: boolean;
+		/** Size variant */
+		size?: TableSize;
+		/** Initial sort state */
+		sortState?: SortState;
+		/** Whether rows are hoverable */
+		hoverable?: boolean;
+		/** Whether rows are striped */
+		striped?: boolean;
+		/** Whether the header should stick when scrolling */
+		stickyHeader?: boolean;
+		/** Maximum height for scrollable table (enables sticky header behavior) */
+		maxHeight?: string;
+		/** Whether rows are selectable */
+		selectable?: boolean;
+		/** Currently selected row keys */
+		selectedKeys?: Set<string>;
+		/** Whether the table is loading */
+		loading?: boolean;
+		/** Number of skeleton rows to show when loading */
+		loadingRows?: number;
+		/** Empty state message */
+		emptyMessage?: string;
+		/** Empty state description */
+		emptyDescription?: string;
+		/** Row key function */
+		getRowKey?: (row: T, index: number) => string;
+		/** Custom cell renderer */
+		cellRenderer?: Snippet<[{ value: unknown; row: T; column: TableColumn<T> }]>;
+		/** Custom empty state snippet */
+		emptyState?: Snippet;
+		/** Row click handler */
+		onRowClick?: (row: T) => void;
+		/** Sort change handler */
+		onSort?: (state: SortState) => void;
+		/** Selection change handler */
+		onSelectionChange?: (selectedKeys: Set<string>) => void;
+		/** Pagination - current page (1-indexed) */
+		currentPage?: number;
+		/** Pagination - items per page */
+		pageSize?: number;
+		/** Pagination - total items (for server-side pagination) */
+		totalItems?: number;
+		/** Pagination - page change handler */
+		onPageChange?: (page: number) => void;
+		/** Row highlight function - return variant name for highlighting */
+		getRowHighlight?: (row: T) => 'error' | 'warning' | 'success' | 'info' | null;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the table */
+		id?: string;
+	}
+
+	let {
+		columns,
+		data,
+		caption = '',
+		captionHidden = false,
+		size = 'md',
+		sortState = { column: null, direction: null },
+		hoverable = true,
+		striped = false,
+		stickyHeader = false,
+		maxHeight = '',
+		selectable = false,
+		selectedKeys = new Set<string>(),
+		loading = false,
+		loadingRows = 5,
+		emptyMessage = 'No data available',
+		emptyDescription = '',
+		getRowKey = (_row: T, index: number) => String(index),
+		cellRenderer,
+		emptyState,
+		onRowClick,
+		onSort,
+		onSelectionChange,
+		currentPage,
+		pageSize,
+		totalItems,
+		onPageChange,
+		getRowHighlight,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	// Size configurations
+	const sizeConfig: Record<TableSize, { cellPadding: string; fontSize: string; headerPadding: string }> = {
+		sm: { cellPadding: '0.5rem 0.75rem', fontSize: '0.8125rem', headerPadding: '0.5rem 0.75rem' },
+		md: { cellPadding: '0.75rem 1rem', fontSize: '0.875rem', headerPadding: '0.75rem 1rem' },
+		lg: { cellPadding: '1rem 1.25rem', fontSize: '0.9375rem', headerPadding: '1rem 1.25rem' }
+	};
+
+	const config = $derived(sizeConfig[size]);
+
+	// Pagination calculations
+	const isPaginated = $derived(currentPage !== undefined && pageSize !== undefined);
+	const totalPages = $derived(
+		isPaginated
+			? Math.ceil((totalItems ?? data.length) / (pageSize ?? 10))
+			: 1
+	);
+	const paginatedData = $derived(
+		isPaginated && !totalItems
+			? data.slice(((currentPage ?? 1) - 1) * (pageSize ?? 10), (currentPage ?? 1) * (pageSize ?? 10))
+			: data
+	);
+
+	// Selection state
+	const allSelected = $derived(
+		selectable && data.length > 0 && data.every((row, i) => selectedKeys.has(getRowKey(row, i)))
+	);
+	const someSelected = $derived(
+		selectable && data.some((row, i) => selectedKeys.has(getRowKey(row, i))) && !allSelected
+	);
+
+	// Aria live region for announcing sort changes
+	let sortAnnouncement = $state('');
+
+	function handleSort(columnKey: string) {
+		if (!onSort) return;
+
+		const column = columns.find((c) => c.key === columnKey);
+		if (!column?.sortable) return;
+
+		let newDirection: SortDirection = 'asc';
+		if (sortState.column === columnKey) {
+			if (sortState.direction === 'asc') newDirection = 'desc';
+			else if (sortState.direction === 'desc') newDirection = null;
+		}
+
+		// Announce sort change to screen readers
+		if (newDirection) {
+			sortAnnouncement = `Table sorted by ${column.header} ${newDirection === 'asc' ? 'ascending' : 'descending'}`;
+		} else {
+			sortAnnouncement = `Sort cleared`;
+		}
+
+		onSort({
+			column: newDirection ? columnKey : null,
+			direction: newDirection
+		});
+	}
+
+	function handleRowKeyDown(e: KeyboardEvent, row: T) {
+		if (onRowClick && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			onRowClick(row);
+		}
+	}
+
+	function handleHeaderKeyDown(e: KeyboardEvent, columnKey: string) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleSort(columnKey);
+		}
+	}
+
+	function handleSelectAll() {
+		if (!onSelectionChange) return;
+		
+		if (allSelected) {
+			onSelectionChange(new Set());
+		} else {
+			const allKeys = new Set(data.map((row, i) => getRowKey(row, i)));
+			onSelectionChange(allKeys);
+		}
+	}
+
+	function handleSelectRow(row: T, index: number) {
+		if (!onSelectionChange) return;
+		
+		const key = getRowKey(row, index);
+		const newSelection = new Set(selectedKeys);
+		
+		if (newSelection.has(key)) {
+			newSelection.delete(key);
+		} else {
+			newSelection.add(key);
+		}
+		
+		onSelectionChange(newSelection);
+	}
+
+	function getCellValue(row: T, column: TableColumn<T>): unknown {
+		const value = row[column.key as keyof T];
+		if (column.render) {
+			return column.render(value, row);
+		}
+		return value;
+	}
+
+	function getRowHighlightClass(row: T): string {
+		if (!getRowHighlight) return '';
+		const highlight = getRowHighlight(row);
+		if (!highlight) return '';
+		return `data-table-row-${highlight}`;
+	}
+
+	// Generate array for skeleton rows
+	const skeletonRows = $derived(Array.from({ length: loadingRows }, (_, i) => i));
+</script>
+
+<!-- Screen reader announcements for sort changes -->
+<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+	{sortAnnouncement}
+</div>
+
+<div
+	{id}
+	class="data-table-wrapper data-table-{size} {className}"
+	class:data-table-scrollable={maxHeight}
+	style={maxHeight ? `max-height: ${maxHeight};` : undefined}
+>
+	<div class="data-table-scroll-container">
+		<table class="data-table" role="grid" aria-busy={loading}>
+			{#if caption}
+				<caption class:sr-only={captionHidden} class="data-table-caption">
+					{caption}
+				</caption>
+			{/if}
+
+			<thead class:data-table-sticky-header={stickyHeader}>
+				<tr>
+					{#if selectable}
+					<th
+						class="data-table-header data-table-checkbox-cell"
+						scope="col"
+						style="padding: {config.headerPadding};"
+					>
+						<Checkbox
+							checked={allSelected}
+							indeterminate={someSelected}
+							onchange={handleSelectAll}
+							label="Select all rows"
+							hideLabel
+							size="sm"
+						/>
+					</th>
+					{/if}
+					{#each columns as column (column.key)}
+						<th
+							class="data-table-header"
+							class:data-table-header-sortable={column.sortable}
+							class:data-table-header-sorted={sortState.column === column.key}
+							class:data-table-hide-mobile={column.hideOnMobile}
+							class:data-table-align-center={column.align === 'center'}
+							class:data-table-align-right={column.align === 'right'}
+							scope="col"
+							style="padding: {config.headerPadding}; font-size: {config.fontSize}; {column.width ? `width: ${column.width};` : ''}"
+							onclick={() => column.sortable && handleSort(column.key)}
+							onkeydown={(e) => column.sortable && handleHeaderKeyDown(e, column.key)}
+							tabindex={column.sortable ? 0 : undefined}
+							role={column.sortable ? 'columnheader' : 'columnheader'}
+							aria-sort={
+								sortState.column === column.key
+									? sortState.direction === 'asc'
+										? 'ascending'
+										: 'descending'
+									: undefined
+							}
+						>
+							<span class="data-table-header-content">
+								<span class="data-table-header-text">{column.header}</span>
+								{#if column.sortable}
+									<span class="data-table-sort-icon" aria-hidden="true">
+										{#if sortState.column === column.key && sortState.direction === 'asc'}
+											<ArrowUp size={14} />
+										{:else if sortState.column === column.key && sortState.direction === 'desc'}
+											<ArrowDown size={14} />
+										{:else}
+											<ArrowUpDown size={14} />
+										{/if}
+									</span>
+								{/if}
+							</span>
+						</th>
+					{/each}
+				</tr>
+			</thead>
+
+			<tbody>
+				{#if loading}
+					{#each skeletonRows as _row, index (index)}
+						<tr class="data-table-row">
+							{#if selectable}
+								<td class="data-table-cell data-table-checkbox-cell" style="padding: {config.cellPadding};">
+									<Skeleton variant="circle" width="1rem" height="1rem" animation="wave" />
+								</td>
+							{/if}
+							{#each columns as column, colIndex (column.key)}
+								<td
+									class="data-table-cell"
+									class:data-table-hide-mobile={column.hideOnMobile}
+									class:data-table-align-center={column.align === 'center'}
+									class:data-table-align-right={column.align === 'right'}
+									style="padding: {config.cellPadding};"
+								>
+									<Skeleton
+										variant="text"
+										size="sm"
+										width={colIndex === 0 ? '80%' : colIndex === columns.length - 1 ? '60%' : '70%'}
+										animation="wave"
+									/>
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{:else if paginatedData.length === 0}
+					<tr>
+						<td
+							colspan={columns.length + (selectable ? 1 : 0)}
+							class="data-table-empty-cell"
+						>
+							{#if emptyState}
+								{@render emptyState()}
+							{:else}
+								<EmptyState
+									variant="no-results"
+									title={emptyMessage}
+									description={emptyDescription}
+									size="sm"
+									compact
+								/>
+							{/if}
+						</td>
+					</tr>
+				{:else}
+					{#each paginatedData as row, index (getRowKey(row, index))}
+						{@const rowKey = getRowKey(row, index)}
+						{@const isSelected = selectedKeys.has(rowKey)}
+						<tr
+							class="data-table-row {getRowHighlightClass(row)}"
+							class:data-table-row-hoverable={hoverable}
+							class:data-table-row-striped={striped && index % 2 === 1}
+							class:data-table-row-clickable={onRowClick}
+							class:data-table-row-selected={isSelected}
+							onclick={() => onRowClick?.(row)}
+							onkeydown={(e) => handleRowKeyDown(e, row)}
+							tabindex={onRowClick ? 0 : undefined}
+							role={onRowClick ? 'row' : 'row'}
+							aria-selected={selectable ? isSelected : undefined}
+						>
+							{#if selectable}
+								<td
+									class="data-table-cell data-table-checkbox-cell"
+									style="padding: {config.cellPadding};"
+									onclick={(e) => e.stopPropagation()}
+									onkeydown={(e) => e.stopPropagation()}
+								>
+									<Checkbox
+										checked={isSelected}
+										onchange={() => handleSelectRow(row, index)}
+										label="Select row"
+										hideLabel
+										size="sm"
+									/>
+								</td>
+							{/if}
+							{#each columns as column (column.key)}
+								<td
+									class="data-table-cell"
+									class:data-table-hide-mobile={column.hideOnMobile}
+									class:data-table-align-center={column.align === 'center'}
+									class:data-table-align-right={column.align === 'right'}
+									style="padding: {config.cellPadding}; font-size: {config.fontSize};"
+								>
+									{#if cellRenderer}
+										{@render cellRenderer({ value: getCellValue(row, column), row, column })}
+									{:else}
+										{getCellValue(row, column)}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+
+	<!-- Pagination -->
+	{#if isPaginated && totalPages > 1 && !loading}
+		<div class="data-table-pagination">
+			<span class="data-table-pagination-info">
+				{#if totalItems}
+					Showing {((currentPage ?? 1) - 1) * (pageSize ?? 10) + 1} - {Math.min((currentPage ?? 1) * (pageSize ?? 10), totalItems)} of {totalItems}
+				{:else}
+					Page {currentPage} of {totalPages}
+				{/if}
+			</span>
+			<div class="data-table-pagination-controls">
+				<button
+					type="button"
+					class="data-table-pagination-btn"
+					disabled={(currentPage ?? 1) <= 1}
+					onclick={() => onPageChange?.((currentPage ?? 1) - 1)}
+					aria-label="Previous page"
+				>
+					<ChevronLeft size={16} />
+				</button>
+				<span class="data-table-pagination-pages">
+					{currentPage} / {totalPages}
+				</span>
+				<button
+					type="button"
+					class="data-table-pagination-btn"
+					disabled={(currentPage ?? 1) >= totalPages}
+					onclick={() => onPageChange?.((currentPage ?? 1) + 1)}
+					aria-label="Next page"
+				>
+					<ChevronRight size={16} />
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   SCREEN READER ONLY
+	   ======================================== */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* ========================================
+	   WRAPPER STYLES
+	   ======================================== */
+	.data-table-wrapper {
+		overflow: hidden;
+		border-radius: 0.75rem;
+		border: 1px solid var(--ui-border-default);
+		background-color: var(--ui-bg-primary);
+	}
+
+	.data-table-scrollable {
+		overflow: hidden;
+	}
+
+	.data-table-scroll-container {
+		overflow-x: auto;
+		overflow-y: auto;
+	}
+
+	.data-table-scrollable .data-table-scroll-container {
+		max-height: inherit;
+	}
+
+	/* ========================================
+	   TABLE BASE STYLES
+	   ======================================== */
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+	}
+
+	/* ========================================
+	   CAPTION
+	   ======================================== */
+	.data-table-caption {
+		padding: 0.75rem 1rem;
+		font-weight: 600;
+		text-align: left;
+		color: var(--ui-text-primary);
+		background-color: var(--ui-bg-secondary);
+		border-bottom: 1px solid var(--ui-border-default);
+	}
+
+	/* ========================================
+	   HEADER STYLES
+	   ======================================== */
+	.data-table thead {
+		background-color: var(--ui-bg-tertiary);
+	}
+
+	.data-table-sticky-header {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background-color: var(--ui-bg-tertiary);
+	}
+
+	.data-table-header {
+		font-weight: 600;
+		color: var(--ui-text-primary);
+		text-align: left;
+		border-bottom: 1px solid var(--ui-border-default);
+		white-space: nowrap;
+	}
+
+	.data-table-header-sortable {
+		cursor: pointer;
+		user-select: none;
+		transition: background-color 0.15s ease;
+	}
+
+	.data-table-header-sortable:hover {
+		background-color: var(--ui-bg-secondary);
+	}
+
+	.data-table-header-sortable:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	.data-table-header-sorted {
+		background-color: rgb(var(--ui-color-primary) / 0.05);
+	}
+
+	.data-table-header-content {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.data-table-header-text {
+		flex: 1;
+	}
+
+	.data-table-sort-icon {
+		display: flex;
+		align-items: center;
+		color: var(--ui-text-tertiary);
+		transition: color 0.15s ease;
+	}
+
+	.data-table-header-sorted .data-table-sort-icon {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	/* ========================================
+	   CELL STYLES
+	   ======================================== */
+	.data-table-cell {
+		color: var(--ui-text-secondary);
+		border-bottom: 1px solid var(--ui-border-default);
+	}
+
+	.data-table-row:last-child .data-table-cell {
+		border-bottom: none;
+	}
+
+	.data-table-checkbox-cell {
+		width: 3rem;
+	}
+
+	/* ========================================
+	   ROW STYLES
+	   ======================================== */
+	.data-table-row {
+		transition: background-color 0.15s ease;
+	}
+
+	.data-table-row-hoverable:hover {
+		background-color: var(--ui-bg-secondary);
+	}
+
+	.data-table-row-striped {
+		background-color: var(--ui-bg-secondary);
+	}
+
+	.data-table-row-clickable {
+		cursor: pointer;
+	}
+
+	.data-table-row-clickable:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	.data-table-row-selected {
+		background-color: rgb(var(--ui-color-primary) / 0.08);
+	}
+
+	.data-table-row-selected:hover {
+		background-color: rgb(var(--ui-color-primary) / 0.12);
+	}
+
+	/* Row highlighting for status */
+	.data-table-row-error {
+		background-color: rgb(var(--ui-color-error) / 0.06);
+	}
+
+	.data-table-row-error:hover {
+		background-color: rgb(var(--ui-color-error) / 0.1);
+	}
+
+	.data-table-row-warning {
+		background-color: rgb(var(--ui-color-warning) / 0.06);
+	}
+
+	.data-table-row-warning:hover {
+		background-color: rgb(var(--ui-color-warning) / 0.1);
+	}
+
+	.data-table-row-success {
+		background-color: rgb(var(--ui-color-success) / 0.06);
+	}
+
+	.data-table-row-success:hover {
+		background-color: rgb(var(--ui-color-success) / 0.1);
+	}
+
+	.data-table-row-info {
+		background-color: rgb(var(--ui-color-info) / 0.06);
+	}
+
+	.data-table-row-info:hover {
+		background-color: rgb(var(--ui-color-info) / 0.1);
+	}
+
+	/* ========================================
+	   ALIGNMENT
+	   ======================================== */
+	.data-table-align-center {
+		text-align: center;
+	}
+
+	.data-table-align-right {
+		text-align: right;
+	}
+
+	/* ========================================
+	   RESPONSIVE
+	   ======================================== */
+	.data-table-hide-mobile {
+		display: none;
+	}
+
+	@media (min-width: 768px) {
+		.data-table-hide-mobile {
+			display: table-cell;
+		}
+	}
+
+	/* ========================================
+	   EMPTY STATE
+	   ======================================== */
+	.data-table-empty-cell {
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+
+	/* ========================================
+	   PAGINATION
+	   ======================================== */
+	.data-table-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 1rem;
+		border-top: 1px solid var(--ui-border-default);
+		background-color: var(--ui-bg-secondary);
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.data-table-pagination-info {
+		font-size: 0.8125rem;
+		color: var(--ui-text-secondary);
+	}
+
+	.data-table-pagination-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.data-table-pagination-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.375rem;
+		background-color: var(--ui-bg-primary);
+		color: var(--ui-text-primary);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.data-table-pagination-btn:hover:not(:disabled) {
+		background-color: var(--ui-bg-secondary);
+		border-color: var(--ui-border-hover);
+	}
+
+	.data-table-pagination-btn:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	.data-table-pagination-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.data-table-pagination-pages {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--ui-text-primary);
+		min-width: 4rem;
+		text-align: center;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.data-table-row,
+		.data-table-header-sortable,
+		.data-table-pagination-btn {
+			transition: none;
+		}
+	}
+</style>