@makolabs/ripple 1.7.10 → 1.8.0

package/dist/layout/table/Table.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import type { TableProps, SortDirection, SortState, DataRow } from '../../index.js';
 	import Pagination from '../../elements/pagination/Pagination.svelte';
 	import Card from '../../layout/card/Card.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
 	let {
 		data = [],
@@ -16,21 +19,31 @@
 		selectable = false,
 		selected = $bindable([]),
 		onrowclick,
-		onsort = () => {},
+		onsort,
 		onselect = () => {},
 		onpagechange,
 		onpagesizechange,
 		class: classname = '',
-		wrapperclass: wrapperClass = '',
-		tableclass: tableClass = '',
-		theadclass: theadClass = '',
-		tbodyclass: tbodyClass = '',
-		trclass: trClass = 'bg-white',
-		thclass: thClass = '',
-		tdclass: tdClass = '',
-		footerclass: footerClass = '',
-		paginationclass: paginationClass = '',
-		rowclass = () => '',
+		wrapperclass,
+		wrapperClass = wrapperclass ?? '',
+		tableclass,
+		tableClass = tableclass ?? '',
+		theadclass,
+		theadClass = theadclass ?? '',
+		tbodyclass,
+		tbodyClass = tbodyclass ?? '',
+		trclass,
+		trClass = trclass ?? 'bg-white',
+		thclass,
+		thClass = thclass ?? '',
+		tdclass,
+		tdClass = tdclass ?? '',
+		footerclass,
+		footerClass = footerclass ?? '',
+		paginationclass,
+		paginationClass = paginationclass ?? '',
+		rowclass,
+		rowClass = rowclass ?? (() => ''),
 		loading = false,
 		expandedContent,
 		pagination = true,
@@ -41,9 +54,42 @@
 		paginationTemplate = 'full',
 		title,
 		subtitle,
-		headerActions
+		headerActions,
+		selectAllScope = 'page',
+		rowKey,
+		expandable = false,
+		testId
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
+
+	warnDeprecatedProps(
+		'Table',
+		{
+			wrapperclass,
+			tableclass,
+			theadclass,
+			tbodyclass,
+			trclass,
+			thclass,
+			tdclass,
+			footerclass,
+			paginationclass,
+			rowclass
+		},
+		{
+			wrapperclass: 'wrapperClass',
+			tableclass: 'tableClass',
+			theadclass: 'theadClass',
+			tbodyclass: 'tbodyClass',
+			trclass: 'trClass',
+			thclass: 'thClass',
+			tdclass: 'tdClass',
+			footerclass: 'footerClass',
+			paginationclass: 'paginationClass',
+			rowclass: 'rowClass'
+		}
+	);
+
 	// Determine if we should use Card wrapper
 	const hasHeader = $derived(title !== undefined || subtitle !== undefined);
 
@@ -58,6 +104,7 @@
 	let sortDirection = $state<SortDirection>(null);
 	let internalCurrentPage = $state(externalCurrentPage || 1);
 	let internalPageSize = $state(pageSize);
+	let expandedRows = new SvelteSet<string | number>();
 
 	// Use external current page if provided
 	$effect(() => {
@@ -109,24 +156,52 @@
 	const paginationClasses = $derived(cn(paginationBaseClass(), paginationClass));
 	const emptyStateClasses = $derived(emptyStateBaseClass());
 
+	// Apply client-side sorting when no onsort handler is provided
+	const sortedData = $derived.by<DataRow[]>(() => {
+		if (onsort || !sortColumn || !sortDirection) {
+			return data;
+		}
+
+		return [...data].sort((a, b) => {
+			const aVal = a[sortColumn];
+			const bVal = b[sortColumn];
+
+			// Handle null/undefined
+			if (aVal == null && bVal == null) return 0;
+			if (aVal == null) return sortDirection === 'asc' ? -1 : 1;
+			if (bVal == null) return sortDirection === 'asc' ? 1 : -1;
+
+			// Numeric comparison
+			if (typeof aVal === 'number' && typeof bVal === 'number') {
+				return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+			}
+
+			// String comparison
+			const aStr = String(aVal);
+			const bStr = String(bVal);
+			const cmp = aStr.localeCompare(bStr);
+			return sortDirection === 'asc' ? cmp : -cmp;
+		});
+	});
+
 	// Handle pagination
 	function getPaginatedData() {
 		// If no pagination or all data fits on one page, return all data
-		if (!pagination || data.length <= internalPageSize) {
-			return data;
+		if (!pagination || sortedData.length <= internalPageSize) {
+			return sortedData;
 		}
 
 		// If external data source might be handling pagination
 		if (totalItems !== undefined) {
 			// If data.length is less than or equal to pageSize, assume it's already paginated
-			if (data.length <= internalPageSize) {
-				return data;
+			if (sortedData.length <= internalPageSize) {
+				return sortedData;
 			}
 		}
 
 		// Otherwise, handle pagination internally
 		const startIndex = (internalCurrentPage - 1) * internalPageSize;
-		return data.slice(startIndex, startIndex + internalPageSize);
+		return sortedData.slice(startIndex, startIndex + internalPageSize);
 	}
 
 	// Handle sorting
@@ -150,26 +225,86 @@
 		}
 
 		const newSortState: SortState = { column: sortColumn, direction: sortDirection };
-		onsort(newSortState);
+		onsort?.(newSortState);
 	}
 
 	function toggleRowSelection(row: DataRow) {
 		if (!selectable) return;
 
-		const index = selected.findIndex((r) => r === row);
+		const index = rowKey
+			? selected.findIndex((r) => r[rowKey] === row[rowKey])
+			: selected.findIndex((r) => r === row);
 		if (index === -1) {
 			selected = [...selected, row];
 		} else {
-			selected = selected.filter((r) => r !== row);
+			selected = rowKey
+				? selected.filter((r) => r[rowKey] !== row[rowKey])
+				: selected.filter((r) => r !== row);
 		}
 
 		onselect(selected);
 	}
 
 	function isRowSelected(row: DataRow) {
+		if (rowKey) return selected.some((r) => r[rowKey] === row[rowKey]);
 		return selected.includes(row);
 	}
 
+	function getRowExpandKey(row: DataRow, index: number): string | number {
+		return rowKey ? row[rowKey] : index;
+	}
+
+	function toggleRowExpanded(row: DataRow, index: number) {
+		const key = getRowExpandKey(row, index);
+		if (expandedRows.has(key)) {
+			expandedRows.delete(key);
+		} else {
+			expandedRows.add(key);
+		}
+	}
+
+	function isRowExpanded(row: DataRow, index: number): boolean {
+		return expandedRows.has(getRowExpandKey(row, index));
+	}
+
+	// Total column count including selectable checkbox and expandable chevron columns
+	const totalColumnCount = $derived(
+		columns.length + (selectable ? 1 : 0) + (expandable && expandedContent ? 1 : 0)
+	);
+
+	function handleSelectAll() {
+		const pageData = getPaginatedData();
+		const scopeData = selectAllScope === 'all' ? data : pageData;
+		const allSelected = scopeData.every((r) => isRowSelected(r));
+		if (allSelected) {
+			if (selectAllScope === 'all') {
+				selected = [];
+			} else {
+				selected = selected.filter(
+					(r) => !pageData.some((pr) => (rowKey ? pr[rowKey] === r[rowKey] : pr === r))
+				);
+			}
+		} else {
+			if (selectAllScope === 'all') {
+				selected = [...data];
+			} else {
+				const newSelected = [...selected];
+				for (const r of pageData) {
+					if (!isRowSelected(r)) {
+						newSelected.push(r);
+					}
+				}
+				selected = newSelected;
+			}
+		}
+		onselect(selected);
+	}
+
+	function isAllSelected(): boolean {
+		const scopeData = selectAllScope === 'all' ? data : getPaginatedData();
+		return scopeData.length > 0 && scopeData.every((r) => isRowSelected(r));
+	}
+
 	function handleRowClick(row: DataRow, index: number) {
 		onrowclick?.(row, index);
 	}
@@ -193,263 +328,7 @@
 	}
 </script>
 
-{#if hasHeader}
-	<Card>
-		{#snippet custom()}
-			<!-- Header Section -->
-			<div class="border-default-200 mb-4 border-b pb-3">
-				<div class="flex items-center justify-between">
-					<div>
-						{#if title}
-							<h2 class="text-default-900 text-lg font-semibold">{title}</h2>
-						{/if}
-						{#if subtitle}
-							<p class="text-default-500 mt-1 text-xs">{subtitle}</p>
-						{/if}
-					</div>
-					{#if headerActions}
-						<div class="flex items-center">
-							{@render headerActions()}
-						</div>
-					{/if}
-				</div>
-			</div>
-
-			<!-- Table Content -->
-			<div class={baseClasses}>
-				{#if showPaginationControls && (paginationPosition === 'top' || paginationPosition === 'both')}
-					<div class={footerClasses}>
-						<Pagination
-							currentPage={internalCurrentPage}
-							totalItems={effectiveTotalItems}
-							pageSize={internalPageSize}
-							onPageChange={handlePageChange}
-							onPageSizeChange={handlePageSizeChange}
-							{showPageSize}
-							{pageSizeOptions}
-							template={paginationTemplate === 'full' ? 'full' : 'compact'}
-							disabled={loading}
-							class={cn(paginationClasses, paginationClass)}
-						/>
-					</div>
-				{/if}
-
-				<div class={wrapperClasses}>
-					<table class={tableClasses}>
-						<thead class={theadClasses}>
-							<tr>
-								{#if selectable}
-									<th class={cn(thClasses, 'text-center')}>
-										<input
-											type="checkbox"
-											onchange={() => {
-												if (selected.length === data.length) {
-													selected = [];
-												} else {
-													selected = [...data];
-												}
-												onselect(selected);
-											}}
-											checked={selected.length === data.length && data.length > 0}
-											aria-label="Select all rows"
-										/>
-									</th>
-								{/if}
-
-								{#each columns as column (column.key)}
-									<th
-										class={cn(
-											thClasses,
-											column.align === 'center' && 'text-center',
-											column.align === 'right' && 'text-right',
-											column.class
-										)}
-										style={column.width ? `width: ${column.width}` : undefined}
-									>
-										{#if column.sortable}
-											<button
-												type="button"
-												class={sortButtonBaseClass()}
-												onclick={() => toggleSort(column.sortKey || column.key)}
-												aria-label={`Sort by ${column.header}`}
-											>
-												{column.header}
-												<span class={sortIconBaseClass()}>
-													{#if sortColumn === (column.sortKey || column.key)}
-														{#if sortDirection === 'asc'}
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="h-4 w-4"
-															>
-																<path
-																	d="M10 15a.75.75 0 01-.75-.75V7.612L6.058 10.8a.75.75 0 01-1.061-1.061l3.75-3.75a.75.75 0 011.06 0l3.75 3.75a.75.75 0 11-1.06 1.061L10.75 7.612v6.638A.75.75 0 0110 15z"
-																/>
-															</svg>
-														{:else if sortDirection === 'desc'}
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="h-4 w-4"
-															>
-																<path
-																	d="M10 5a.75.75 0 01.75.75v6.638l3.192-3.187a.75.75 0 111.06 1.061l-3.75 3.75a.75.75 0 01-1.06 0l-3.75-3.75a.75.75 0 111.06-1.061L9.25 12.389V5.75A.75.75 0 0110 5z"
-																/>
-															</svg>
-														{/if}
-													{:else}
-														<svg
-															xmlns="http://www.w3.org/2000/svg"
-															fill="none"
-															viewBox="0 0 24 24"
-															stroke-width="1.5"
-															stroke="currentColor"
-															class="h-4 w-4 opacity-40"
-														>
-															<path
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
-															/>
-														</svg>
-													{/if}
-												</span>
-											</button>
-										{:else}
-											{column.header}
-										{/if}
-									</th>
-								{/each}
-							</tr>
-						</thead>
-
-						<tbody class={tbodyClasses}>
-							{#if loading}
-								{#each Array.from({ length: Math.min(internalPageSize, 5) }, (__, i) => i) as rowIdx (rowIdx)}
-									<tr class={cn(trClass, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
-										{#if selectable}
-											<td class={cn(tdClasses, 'text-center')}>
-												<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
-											</td>
-										{/if}
-										{#each columns as column, colIdx (column.key)}
-											<td class={cn(tdClasses, column.class)}>
-												{#if colIdx === 0}
-													<div class="flex items-center gap-3">
-														<div
-															class="bg-default-200 h-8 w-8 shrink-0 animate-pulse rounded-full"
-														></div>
-														<div class="flex-1 space-y-2">
-															<div class="bg-default-200 h-3.5 w-28 animate-pulse rounded"></div>
-															<div class="bg-default-100 h-3 w-20 animate-pulse rounded"></div>
-														</div>
-													</div>
-												{:else if colIdx === columns.length - 1}
-													<div class="flex items-center justify-end gap-2">
-														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
-														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
-														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
-													</div>
-												{:else}
-													<div
-														class="bg-default-200 h-3.5 animate-pulse rounded"
-														style="width: {60 + ((rowIdx * 17 + colIdx * 31) % 40)}%"
-													></div>
-												{/if}
-											</td>
-										{/each}
-									</tr>
-								{/each}
-							{:else if getPaginatedData().length === 0}
-								<tr>
-									<td
-										colspan={selectable ? columns.length + 1 : columns.length}
-										class={emptyStateClasses}
-									>
-										No data available
-									</td>
-								</tr>
-							{:else}
-								{#each getPaginatedData() as row, rowIndex (rowIndex)}
-									<tr
-										class={cn(trClasses, rowclass(row, rowIndex), {
-											'bg-primary-100': selectable && isRowSelected(row),
-											'cursor-pointer': onrowclick
-										})}
-										onclick={() => handleRowClick(row, rowIndex)}
-										aria-selected={selectable && isRowSelected(row)}
-									>
-										{#if selectable}
-											<td class={cn(tdClasses, 'text-center')}>
-												<input
-													type="checkbox"
-													checked={isRowSelected(row)}
-													onclick={(e) => {
-														e.stopPropagation(); // Prevent row click
-														toggleRowSelection(row);
-													}}
-													aria-label={`Select row ${rowIndex + 1}`}
-												/>
-											</td>
-										{/if}
-
-										{#each columns as column (column.key)}
-											<td
-												class={cn(
-													tdClasses,
-													column.align === 'center' && 'text-center',
-													column.align === 'right' && 'text-right',
-													column.class
-												)}
-											>
-												{#if column.cell}
-													{@render column.cell(row, column.key, rowIndex)}
-												{:else if row[column.key] === undefined || row[column.key] === null}
-													<span class="text-default-300">—</span>
-												{:else}
-													{row[column.key]}
-												{/if}
-											</td>
-										{/each}
-									</tr>
-									{#if expandedContent}
-										<tr class="expandedContent-row">
-											<td
-												colspan={selectable ? columns.length + 1 : columns.length}
-												class="border-0 p-0"
-											>
-												{@render expandedContent(row)}
-											</td>
-										</tr>
-									{/if}
-								{/each}
-							{/if}
-						</tbody>
-					</table>
-				</div>
-
-				{#if showPaginationControls && (paginationPosition === 'bottom' || paginationPosition === 'both')}
-					<div class={footerClasses}>
-						<Pagination
-							currentPage={internalCurrentPage}
-							totalItems={effectiveTotalItems}
-							pageSize={internalPageSize}
-							onPageChange={handlePageChange}
-							onPageSizeChange={handlePageSizeChange}
-							{showPageSize}
-							{pageSizeOptions}
-							template={paginationTemplate === 'full' ? 'full' : 'compact'}
-							disabled={loading}
-							class={cn(paginationClasses, paginationClass)}
-						/>
-					</div>
-				{/if}
-			</div>
-		{/snippet}
-	</Card>
-{:else}
+{#snippet tableContent()}
 	<div class={baseClasses}>
 		{#if showPaginationControls && (paginationPosition === 'top' || paginationPosition === 'both')}
 			<div class={footerClasses}>
@@ -469,28 +348,25 @@
 		{/if}
 
 		<div class={wrapperClasses}>
-			<table class={tableClasses}>
-				<thead class={theadClasses}>
+			<table class={tableClasses} data-testid={buildTestId('table', undefined, testId)}>
+				<thead class={theadClasses} data-testid={buildTestId('table', 'head', testId)}>
 					<tr>
+						{#if expandable && expandedContent}
+							<th class={cn(thClasses, 'w-10')}></th>
+						{/if}
 						{#if selectable}
 							<th class={cn(thClasses, 'text-center')}>
 								<input
 									type="checkbox"
-									onchange={() => {
-										if (selected.length === data.length) {
-											selected = [];
-										} else {
-											selected = [...data];
-										}
-										onselect(selected);
-									}}
-									checked={selected.length === data.length && data.length > 0}
+									onchange={handleSelectAll}
+									checked={isAllSelected()}
 									aria-label="Select all rows"
+									data-testid={buildTestId('table', 'select-all', testId)}
 								/>
 							</th>
 						{/if}
 
-						{#each columns as column (column.key)}
+						{#each columns as column, colIndex (column.key)}
 							<th
 								class={cn(
 									thClasses,
@@ -506,6 +382,7 @@
 										class={sortButtonBaseClass()}
 										onclick={() => toggleSort(column.sortKey || column.key)}
 										aria-label={`Sort by ${column.header}`}
+										data-testid={buildTestId('table', 'sort', testId, colIndex)}
 									>
 										{column.header}
 										<span class={sortIconBaseClass()}>
@@ -559,10 +436,15 @@
 					</tr>
 				</thead>
 
-				<tbody class={tbodyClasses}>
+				<tbody class={tbodyClasses} data-testid={buildTestId('table', 'body', testId)}>
 					{#if loading}
 						{#each Array.from({ length: Math.min(internalPageSize, 5) }, (__, i) => i) as rowIdx (rowIdx)}
-							<tr class={cn(trClass, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
+							<tr class={cn(trClasses, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
+								{#if expandable && expandedContent}
+									<td class={cn(tdClasses, 'w-10')}>
+										<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
+									</td>
+								{/if}
 								{#if selectable}
 									<td class={cn(tdClasses, 'text-center')}>
 										<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
@@ -598,23 +480,48 @@
 						{/each}
 					{:else if getPaginatedData().length === 0}
 						<tr>
-							<td
-								colspan={selectable ? columns.length + 1 : columns.length}
-								class={emptyStateClasses}
-							>
-								No data available
-							</td>
+							<td colspan={totalColumnCount} class={emptyStateClasses}> No data available </td>
 						</tr>
 					{:else}
 						{#each getPaginatedData() as row, rowIndex (rowIndex)}
 							<tr
-								class={cn(trClasses, rowclass(row, rowIndex), {
+								class={cn(trClasses, rowClass(row, rowIndex), {
 									'bg-primary-100': selectable && isRowSelected(row),
 									'cursor-pointer': onrowclick
 								})}
 								onclick={() => handleRowClick(row, rowIndex)}
 								aria-selected={selectable && isRowSelected(row)}
+								data-testid={buildTestId('table', 'row', testId, rowIndex)}
 							>
+								{#if expandable && expandedContent}
+									<td class={cn(tdClasses, 'w-10')}>
+										<button
+											type="button"
+											class="text-default-400 hover:text-default-600 flex items-center justify-center transition-transform"
+											onclick={(e) => {
+												e.stopPropagation();
+												toggleRowExpanded(row, rowIndex);
+											}}
+											aria-label={isRowExpanded(row, rowIndex) ? 'Collapse row' : 'Expand row'}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class={cn(
+													'h-5 w-5 transition-transform',
+													isRowExpanded(row, rowIndex) && 'rotate-90'
+												)}
+											>
+												<path
+													fill-rule="evenodd"
+													d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</button>
+									</td>
+								{/if}
 								{#if selectable}
 									<td class={cn(tdClasses, 'text-center')}>
 										<input
@@ -625,6 +532,7 @@
 												toggleRowSelection(row);
 											}}
 											aria-label={`Select row ${rowIndex + 1}`}
+											data-testid={buildTestId('table', 'row-select', testId, rowIndex)}
 										/>
 									</td>
 								{/if}
@@ -648,12 +556,9 @@
 									</td>
 								{/each}
 							</tr>
-							{#if expandedContent}
+							{#if expandedContent && (!expandable || isRowExpanded(row, rowIndex))}
 								<tr class="expandedContent-row">
-									<td
-										colspan={selectable ? columns.length + 1 : columns.length}
-										class="border-0 p-0"
-									>
+									<td colspan={totalColumnCount} class="border-0 p-0">
 										{@render expandedContent(row)}
 									</td>
 								</tr>
@@ -681,4 +586,33 @@
 			</div>
 		{/if}
 	</div>
+{/snippet}
+
+{#if hasHeader}
+	<Card>
+		{#snippet custom()}
+			<!-- Header Section -->
+			<div class="border-default-200 mb-4 border-b pb-3">
+				<div class="flex items-center justify-between">
+					<div>
+						{#if title}
+							<h2 class="text-default-900 text-lg font-semibold">{title}</h2>
+						{/if}
+						{#if subtitle}
+							<p class="text-default-500 mt-1 text-xs">{subtitle}</p>
+						{/if}
+					</div>
+					{#if headerActions}
+						<div class="flex items-center">
+							{@render headerActions()}
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			{@render tableContent()}
+		{/snippet}
+	</Card>
+{:else}
+	{@render tableContent()}
 {/if}