@makolabs/ripple 1.2.2 → 1.2.4

package/dist/layout/table/Table.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
-	import type { TableProps, SortDirection, SortState } from '../../index.js';
+	import type { TableProps, SortDirection, SortState, DataRow } from '../../index.js';
+	import Pagination from '../../elements/pagination/Pagination.svelte';
+	import Card from '../../layout/card/Card.svelte';
 
 	let {
 		data = [],
 		columns = [],
-		bordered = true,
+		bordered: externalBordered,
 		striped = false,
 		pageSize = 10,
 		currentPage: externalCurrentPage,
@@ -36,9 +38,23 @@
 		showPageSize = false,
 		pageSizeOptions = [5, 10, 25, 50, 100],
 		paginationPosition = 'bottom',
-		paginationTemplate = 'full'
+		paginationTemplate = 'full',
+		title,
+		subtitle,
+		headerActions
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
 
+	// Determine if we should use Card wrapper
+	const hasHeader = $derived(title !== undefined || subtitle !== undefined);
+
+	// Border logic:
+	// - If title/subtitle provided: force bordered=false (no borders when in Card)
+	// - If no title/subtitle: use externalBordered prop, defaulting to true
+	const bordered = $derived(
+		hasHeader ? false : externalBordered !== undefined ? externalBordered : true
+	);
+
 	let sortColumn = $state('');
 	let sortDirection = $state<SortDirection>(null);
 	let internalCurrentPage = $state(externalCurrentPage || 1);
@@ -55,12 +71,11 @@
 	const showPaginationControls = $derived(
 		pagination &&
 			showPagination &&
-			(data.length > internalPageSize || totalItems > internalPageSize)
+			(data.length > internalPageSize || (totalItems ?? 0) > internalPageSize)
 	);
 
 	// Calculate total items and pages
 	const effectiveTotalItems = $derived(totalItems !== undefined ? totalItems : data.length);
-	const totalPages = $derived(Math.ceil(effectiveTotalItems / internalPageSize));
 
 	const {
 		base: baseClass,
@@ -139,7 +154,7 @@
 		onsort(newSortState);
 	}
 
-	function toggleRowSelection(row: any) {
+	function toggleRowSelection(row: DataRow) {
 		if (!selectable) return;
 
 		const index = selected.findIndex((r) => r === row);
@@ -152,639 +167,507 @@
 		onselect(selected);
 	}
 
-	function isRowSelected(row: any) {
+	function isRowSelected(row: DataRow) {
 		return selected.includes(row);
 	}
 
-	function handleRowClick(row: any, index: number) {
+	function handleRowClick(row: DataRow, index: number) {
 		onrowclick?.(row, index);
 	}
 
-	function goToFirstPage() {
-		if (internalCurrentPage !== 1) {
-			internalCurrentPage = 1;
-			onpagechange?.(internalCurrentPage);
-		}
-	}
-
-	function goToLastPage() {
-		if (internalCurrentPage !== totalPages) {
-			internalCurrentPage = totalPages;
-			onpagechange?.(internalCurrentPage);
-		}
-	}
-
-	function nextPage() {
-		if (internalCurrentPage < totalPages) {
-			internalCurrentPage++;
-			onpagechange?.(internalCurrentPage);
-		}
-	}
-
-	function prevPage() {
-		if (internalCurrentPage > 1) {
-			internalCurrentPage--;
-			onpagechange?.(internalCurrentPage);
-		}
+	function handlePageChange(page: number) {
+		internalCurrentPage = page;
+		onpagechange?.(page);
 	}
 
-	function goToPage(page: number) {
-		if (page >= 1 && page <= totalPages && page !== internalCurrentPage) {
-			internalCurrentPage = page;
-			onpagechange?.(internalCurrentPage);
-		}
-	}
-
-	function handlePageSizeChange(event: Event) {
-		const select = event.target as HTMLSelectElement;
-		const newPageSize = parseInt(select.value, 10);
+	function handlePageSizeChange(newPageSize: number) {
 		internalPageSize = newPageSize;
 
 		// Adjust current page if it would exceed the new total pages
 		const newTotalPages = Math.ceil(effectiveTotalItems / newPageSize);
 		if (internalCurrentPage > newTotalPages) {
 			internalCurrentPage = newTotalPages || 1;
+			onpagechange?.(internalCurrentPage);
 		}
 
 		onpagesizechange?.(newPageSize);
-		onpagechange?.(internalCurrentPage);
-	}
-
-	function getPageNumbers(): number[] {
-		const pages: number[] = [];
-		const maxPages = 5;
-		const halfMax = Math.floor(maxPages / 2);
-
-		let start = Math.max(1, internalCurrentPage - halfMax);
-		let end = Math.min(totalPages, start + maxPages - 1);
-
-		if (end - start + 1 < maxPages) {
-			start = Math.max(1, end - maxPages + 1);
-		}
-
-		for (let i = start; i <= end; i++) {
-			pages.push(i);
-		}
-
-		return pages;
 	}
 </script>
 
-<div class={baseClasses}>
-	{#if showPaginationControls && (paginationPosition === 'top' || paginationPosition === 'both')}
-		<div class={footerClasses}>
-			<div class={paginationClasses}>
-				<div class="flex items-center gap-2">
-					{#if showPageSize}
-						<div class="flex items-center gap-2">
-							<label for="table-page-size" class="text-default-500 text-sm">Show</label>
-							<select
-								id="table-page-size"
-								class="border-default-200 rounded-md border px-2 py-1 text-sm"
-								value={internalPageSize}
-								onchange={handlePageSizeChange}
-							>
-								{#each pageSizeOptions as option}
-									<option value={option}>{option}</option>
-								{/each}
-							</select>
-							<span class="text-default-500 text-sm">entries</span>
+{#if hasHeader}
+	<Card>
+		{#snippet custom()}
+			<!-- Header Section -->
+			<div class="mb-4 border-b border-gray-200 pb-3">
+				<div class="flex items-center justify-between">
+					<div>
+						{#if title}
+							<h2 class="text-lg font-semibold text-gray-900">{title}</h2>
+						{/if}
+						{#if subtitle}
+							<p class="mt-1 text-xs text-gray-500">{subtitle}</p>
+						{/if}
+					</div>
+					{#if headerActions}
+						<div class="flex items-center">
+							{@render headerActions()}
 						</div>
 					{/if}
-					<span class="text-default-500 text-sm">
-						Showing {Math.min(
-							(internalCurrentPage - 1) * internalPageSize + 1,
-							effectiveTotalItems
-						)}
-						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
-						entries
-					</span>
-				</div>
-
-				<div class="flex items-center gap-1">
-					{#if paginationTemplate === 'full'}
-						<!-- First page button -->
-						<button
-							type="button"
-							class={cn(
-								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-								internalCurrentPage === 1
-									? 'text-default-300 cursor-not-allowed'
-									: 'text-default-700 hover:bg-default-100'
-							)}
-							onclick={goToFirstPage}
-							disabled={internalCurrentPage === 1}
-							aria-label="First page"
-						>
-							<!-- Double Chevron Left SVG -->
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="h-4 w-4"
-							>
-								<path d="m11 17-5-5 5-5"></path>
-								<path d="m18 17-5-5 5-5"></path>
-							</svg>
-						</button>
-					{/if}
-
-					<!-- Previous page button -->
-					<button
-						type="button"
-						class={cn(
-							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							internalCurrentPage === 1
-								? 'text-default-300 cursor-not-allowed'
-								: 'text-default-700 hover:bg-default-100'
-						)}
-						onclick={prevPage}
-						disabled={internalCurrentPage === 1}
-						aria-label="Previous page"
-					>
-						<!-- Chevron Left SVG -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="h-4 w-4"
-						>
-							<path d="m15 18-6-6 6-6"></path>
-						</svg>
-					</button>
-
-					<!-- Page numbers -->
-					{#if paginationTemplate === 'full'}
-						{#each getPageNumbers() as pageNum}
-							<button
-								type="button"
-								class={cn(
-									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
-									internalCurrentPage === pageNum
-										? 'bg-primary-100 text-primary-700'
-										: 'text-default-700 hover:bg-default-100'
-								)}
-								onclick={() => goToPage(pageNum)}
-								aria-label={`Page ${pageNum}`}
-								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
-							>
-								{pageNum}
-							</button>
-						{/each}
-					{:else}
-						<span class="text-default-500 px-2 text-sm">
-							Page {internalCurrentPage} of {totalPages}
-						</span>
-					{/if}
-
-					<!-- Next page button -->
-					<button
-						type="button"
-						class={cn(
-							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							internalCurrentPage === totalPages
-								? 'text-default-300 cursor-not-allowed'
-								: 'text-default-700 hover:bg-default-100'
-						)}
-						onclick={nextPage}
-						disabled={internalCurrentPage === totalPages}
-						aria-label="Next page"
-					>
-						<!-- Chevron Right SVG -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="h-4 w-4"
-						>
-							<path d="m9 18 6-6-6-6"></path>
-						</svg>
-					</button>
-
-					{#if paginationTemplate === 'full'}
-						<!-- Last page button -->
-						<button
-							type="button"
-							class={cn(
-								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-								internalCurrentPage === totalPages
-									? 'text-default-300 cursor-not-allowed'
-									: 'text-default-700 hover:bg-default-100'
-							)}
-							onclick={goToLastPage}
-							disabled={internalCurrentPage === totalPages}
-							aria-label="Last page"
-						>
-							<!-- Double Chevron Right SVG -->
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="h-4 w-4"
-							>
-								<path d="m13 17 5-5-5-5"></path>
-								<path d="m6 17 5-5-5-5"></path>
-							</svg>
-						</button>
-					{/if}
 				</div>
 			</div>
-		</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}
+			<!-- 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}
+								<tr>
+									<td
+										colspan={selectable ? columns.length + 1 : columns.length}
+										class={cn(tdClasses, 'py-8 text-center')}
+									>
+										<div class="flex justify-center">
 											<svg
+												class="text-default-500 h-6 w-6 animate-spin"
 												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"
 											>
+												<circle
+													class="opacity-25"
+													cx="12"
+													cy="12"
+													r="10"
+													stroke="currentColor"
+													stroke-width="4"
+												></circle>
 												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
-												/>
+													class="opacity-75"
+													fill="currentColor"
+													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+												></path>
 											</svg>
-										{/if}
-									</span>
-								</button>
+										</div>
+									</td>
+								</tr>
+							{:else if getPaginatedData().length === 0}
+								<tr>
+									<td
+										colspan={selectable ? columns.length + 1 : columns.length}
+										class={emptyStateClasses}
+									>
+										No data available
+									</td>
+								</tr>
 							{:else}
-								{column.header}
-							{/if}
-						</th>
-					{/each}
-				</tr>
-			</thead>
-
-			<tbody class={tbodyClasses}>
-				{#if loading}
-					<tr>
-						<td
-							colspan={selectable ? columns.length + 1 : columns.length}
-							class={cn(tdClasses, 'py-8 text-center')}
-						>
-							<div class="flex justify-center">
-								<svg
-									class="text-default-500 h-6 w-6 animate-spin"
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-								>
-									<circle
-										class="opacity-25"
-										cx="12"
-										cy="12"
-										r="10"
-										stroke="currentColor"
-										stroke-width="4"
-									></circle>
-									<path
-										class="opacity-75"
-										fill="currentColor"
-										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-									></path>
-								</svg>
-							</div>
-						</td>
-					</tr>
-				{: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}
-						<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 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]}
+										{#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}
-								</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}>
-			<div class={paginationClasses}>
-				<div class="flex items-center gap-2">
-					{#if showPageSize}
-						<div class="flex items-center gap-2">
-							<label for="table-page-size-bottom" class="text-default-500 text-sm">Show</label>
-							<select
-								id="table-page-size-bottom"
-								class="border-default-200 rounded-md border px-2 py-1 text-sm"
-								value={internalPageSize}
-								onchange={handlePageSizeChange}
-							>
-								{#each pageSizeOptions as option}
-									<option value={option}>{option}</option>
 								{/each}
-							</select>
-							<span class="text-default-500 text-sm">entries</span>
-						</div>
-					{/if}
-					<span class="text-default-500 text-sm">
-						Showing {Math.min(
-							(internalCurrentPage - 1) * internalPageSize + 1,
-							effectiveTotalItems
-						)}
-						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
-						entries
-					</span>
+							{/if}
+						</tbody>
+					</table>
 				</div>
 
-				<div class="flex items-center gap-1">
-					{#if paginationTemplate === 'full'}
-						<!-- First page button -->
-						<button
-							type="button"
-							class={cn(
-								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-								internalCurrentPage === 1
-									? 'text-default-300 cursor-not-allowed'
-									: 'text-default-700 hover:bg-default-100'
-							)}
-							onclick={goToFirstPage}
-							disabled={internalCurrentPage === 1}
-							aria-label="First page"
-						>
-							<!-- Double Chevron Left SVG -->
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="h-4 w-4"
-							>
-								<path d="m11 17-5-5 5-5"></path>
-								<path d="m18 17-5-5 5-5"></path>
-							</svg>
-						</button>
-					{/if}
+				{#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}
+	<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}
 
-					<!-- Previous page button -->
-					<button
-						type="button"
-						class={cn(
-							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							internalCurrentPage === 1
-								? 'text-default-300 cursor-not-allowed'
-								: 'text-default-700 hover:bg-default-100'
-						)}
-						onclick={prevPage}
-						disabled={internalCurrentPage === 1}
-						aria-label="Previous page"
-					>
-						<!-- Chevron Left SVG -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="h-4 w-4"
-						>
-							<path d="m15 18-6-6 6-6"></path>
-						</svg>
-					</button>
-
-					<!-- Page numbers -->
-					{#if paginationTemplate === 'full'}
-						{#each getPageNumbers() as pageNum}
-							<button
-								type="button"
+						{#each columns as column (column.key)}
+							<th
 								class={cn(
-									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
-									internalCurrentPage === pageNum
-										? 'bg-primary-100 text-primary-700'
-										: 'text-default-700 hover:bg-default-100'
+									thClasses,
+									column.align === 'center' && 'text-center',
+									column.align === 'right' && 'text-right',
+									column.class
 								)}
-								onclick={() => goToPage(pageNum)}
-								aria-label={`Page ${pageNum}`}
-								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
+								style={column.width ? `width: ${column.width}` : undefined}
 							>
-								{pageNum}
-							</button>
+								{#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}
+						<tr>
+							<td
+								colspan={selectable ? columns.length + 1 : columns.length}
+								class={cn(tdClasses, 'py-8 text-center')}
+							>
+								<div class="flex justify-center">
+									<svg
+										class="text-default-500 h-6 w-6 animate-spin"
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<circle
+											class="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											stroke-width="4"
+										></circle>
+										<path
+											class="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
+									</svg>
+								</div>
+							</td>
+						</tr>
+					{:else if getPaginatedData().length === 0}
+						<tr>
+							<td
+								colspan={selectable ? columns.length + 1 : columns.length}
+								class={emptyStateClasses}
+							>
+								No data available
+							</td>
+						</tr>
 					{:else}
-						<span class="text-default-500 px-2 text-sm">
-							Page {internalCurrentPage} of {totalPages}
-						</span>
-					{/if}
-
-					<!-- Next page button -->
-					<button
-						type="button"
-						class={cn(
-							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							internalCurrentPage === totalPages
-								? 'text-default-300 cursor-not-allowed'
-								: 'text-default-700 hover:bg-default-100'
-						)}
-						onclick={nextPage}
-						disabled={internalCurrentPage === totalPages}
-						aria-label="Next page"
-					>
-						<!-- Chevron Right SVG -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="h-4 w-4"
-						>
-							<path d="m9 18 6-6-6-6"></path>
-						</svg>
-					</button>
-
-					{#if paginationTemplate === 'full'}
-						<!-- Last page button -->
-						<button
-							type="button"
-							class={cn(
-								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-								internalCurrentPage === totalPages
-									? 'text-default-300 cursor-not-allowed'
-									: 'text-default-700 hover:bg-default-100'
-							)}
-							onclick={goToLastPage}
-							disabled={internalCurrentPage === totalPages}
-							aria-label="Last page"
-						>
-							<!-- Double Chevron Right SVG -->
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="h-4 w-4"
+						{#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)}
 							>
-								<path d="m13 17 5-5-5-5"></path>
-								<path d="m6 17 5-5-5-5"></path>
-							</svg>
-						</button>
+								{#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}
-				</div>
-			</div>
+				</tbody>
+			</table>
 		</div>
-	{/if}
-</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>
+{/if}