@shotleybuilder/svelte-table-kit 0.1.0

package/dist/TableKit.svelte

@@ -0,0 +1,838 @@
+<script>import { writable } from "svelte/store";
+import {
+  createSvelteTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getExpandedRowModel,
+  flexRender
+} from "@tanstack/svelte-table";
+import {
+  loadColumnVisibility,
+  saveColumnVisibility,
+  loadColumnSizing,
+  saveColumnSizing,
+  loadColumnFilters,
+  saveColumnFilters,
+  loadColumnOrder,
+  saveColumnOrder,
+  isBrowser
+} from "./stores/persistence";
+import { applyFilters } from "./utils/filters";
+import FilterBar from "./components/FilterBar.svelte";
+import GroupBar from "./components/GroupBar.svelte";
+export let data = [];
+export let columns = [];
+export let storageKey = "table-kit";
+export let persistState = true;
+export let features = {
+  columnVisibility: true,
+  columnResizing: true,
+  columnReordering: true,
+  filtering: true,
+  sorting: true,
+  pagination: true
+};
+export let onRowClick = void 0;
+export let onRowSelect = void 0;
+export let onStateChange = void 0;
+let sorting = writable([]);
+let columnVisibility = writable(
+  persistState && storageKey ? loadColumnVisibility(storageKey) : {}
+);
+let columnSizing = writable(
+  persistState && storageKey ? loadColumnSizing(storageKey) : {}
+);
+let columnFilters = writable(
+  persistState && storageKey ? loadColumnFilters(storageKey) : []
+);
+let columnOrder = writable(
+  persistState && storageKey ? loadColumnOrder(storageKey) : []
+);
+let filterConditions = writable([]);
+let filterLogic = writable("and");
+let grouping = writable([]);
+let expanded = writable(true);
+$: filteredData = applyFilters(data, $filterConditions, $filterLogic);
+$: if (persistState && storageKey && isBrowser) {
+  saveColumnVisibility(storageKey, $columnVisibility);
+  saveColumnSizing(storageKey, $columnSizing);
+  saveColumnFilters(storageKey, $columnFilters);
+  saveColumnOrder(storageKey, $columnOrder);
+}
+let showColumnPicker = false;
+let draggedColumnId = null;
+const options = writable({
+  data: filteredData,
+  columns,
+  columnResizeMode: "onChange",
+  enableColumnResizing: features.columnResizing !== false,
+  enableGrouping: features.grouping !== false,
+  state: {
+    sorting: $sorting,
+    columnVisibility: $columnVisibility,
+    columnSizing: $columnSizing,
+    columnFilters: $columnFilters,
+    columnOrder: $columnOrder,
+    grouping: $grouping,
+    expanded: $expanded
+  },
+  onSortingChange: (updater) => {
+    if (updater instanceof Function) {
+      sorting.update(updater);
+    } else {
+      sorting.set(updater);
+    }
+  },
+  onColumnVisibilityChange: (updater) => {
+    if (updater instanceof Function) {
+      columnVisibility.update(updater);
+    } else {
+      columnVisibility.set(updater);
+    }
+  },
+  onColumnSizingChange: (updater) => {
+    if (updater instanceof Function) {
+      columnSizing.update(updater);
+    } else {
+      columnSizing.set(updater);
+    }
+  },
+  onColumnFiltersChange: (updater) => {
+    if (updater instanceof Function) {
+      columnFilters.update(updater);
+    } else {
+      columnFilters.set(updater);
+    }
+  },
+  onColumnOrderChange: (updater) => {
+    if (updater instanceof Function) {
+      columnOrder.update(updater);
+    } else {
+      columnOrder.set(updater);
+    }
+  },
+  onGroupingChange: (updater) => {
+    if (updater instanceof Function) {
+      grouping.update(updater);
+    } else {
+      grouping.set(updater);
+    }
+  },
+  onExpandedChange: (updater) => {
+    if (updater instanceof Function) {
+      expanded.update(updater);
+    } else {
+      expanded.set(updater);
+    }
+  },
+  getCoreRowModel: getCoreRowModel(),
+  ...features.sorting !== false && { getSortedRowModel: getSortedRowModel() },
+  ...features.filtering !== false && { getFilteredRowModel: getFilteredRowModel() },
+  ...features.grouping !== false && { getGroupedRowModel: getGroupedRowModel() },
+  ...features.grouping !== false && { getExpandedRowModel: getExpandedRowModel() },
+  ...features.pagination !== false && { getPaginationRowModel: getPaginationRowModel() }
+});
+$: options.update((old) => ({
+  ...old,
+  data: filteredData,
+  state: {
+    sorting: $sorting,
+    columnVisibility: $columnVisibility,
+    columnSizing: $columnSizing,
+    columnFilters: $columnFilters,
+    columnOrder: $columnOrder,
+    grouping: $grouping,
+    expanded: $expanded
+  }
+}));
+const table = createSvelteTable(options);
+function toggleAllColumns(show) {
+  $table.getAllLeafColumns().forEach((column) => {
+    column.toggleVisibility(show);
+  });
+}
+function handleDragStart(columnId) {
+  if (features.columnReordering === false) return;
+  draggedColumnId = columnId;
+}
+function handleDragOver(event) {
+  if (features.columnReordering === false) return;
+  event.preventDefault();
+}
+function handleDrop(targetColumnId) {
+  if (features.columnReordering === false) return;
+  if (!draggedColumnId || draggedColumnId === targetColumnId) {
+    draggedColumnId = null;
+    return;
+  }
+  const oldIndex = $columnOrder.indexOf(draggedColumnId);
+  const newIndex = $columnOrder.indexOf(targetColumnId);
+  if (oldIndex !== -1 && newIndex !== -1) {
+    const newColumnOrder = [...$columnOrder];
+    const [movedColumn] = newColumnOrder.splice(oldIndex, 1);
+    newColumnOrder.splice(newIndex, 0, movedColumn);
+    columnOrder.set(newColumnOrder);
+  }
+  draggedColumnId = null;
+}
+$: if ($columnOrder.length === 0 && columns.length > 0) {
+  columnOrder.set(columns.map((col) => col.accessorKey || col.id));
+}
+$: hasActiveFilters = $filterConditions.length > 0;
+$: if (onStateChange) {
+  onStateChange({
+    columnVisibility: $columnVisibility,
+    columnOrder: $columnOrder,
+    columnSizing: $columnSizing,
+    columnFilters: $columnFilters,
+    sorting: $sorting,
+    pagination: $table.getState().pagination
+  });
+}
+</script>
+
+<div class="table-kit-container">
+	<!-- Filters and Controls -->
+	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false}
+		<div class="table-kit-toolbar">
+			<!-- Filter Controls -->
+			{#if features.filtering !== false}
+				<div class="table-kit-filters">
+					<FilterBar
+						{columns}
+						conditions={$filterConditions}
+						onConditionsChange={(newConditions) => filterConditions.set(newConditions)}
+						logic={$filterLogic}
+						onLogicChange={(newLogic) => filterLogic.set(newLogic)}
+					/>
+				</div>
+			{/if}
+
+			<!-- Group Controls -->
+			{#if features.grouping !== false}
+				<div class="table-kit-groups">
+					<GroupBar
+						{columns}
+						grouping={$grouping}
+						onGroupingChange={(newGrouping) => grouping.set(newGrouping)}
+					/>
+				</div>
+			{/if}
+
+			<!-- Column Picker -->
+			{#if features.columnVisibility !== false}
+				<div class="table-kit-column-picker">
+					<div class="relative">
+						<button
+							on:click={() => (showColumnPicker = !showColumnPicker)}
+							class="column-picker-btn"
+						>
+							<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+								/>
+							</svg>
+							Columns
+						</button>
+
+						{#if showColumnPicker}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div class="backdrop" on:click={() => (showColumnPicker = false)} />
+							<div class="column-picker-dropdown">
+								<div class="dropdown-header">
+									<span>Toggle Columns</span>
+									<div class="header-actions">
+										<button on:click={() => toggleAllColumns(true)} class="text-btn">
+											Show All
+										</button>
+										<span class="separator">|</span>
+										<button on:click={() => toggleAllColumns(false)} class="text-btn">
+											Hide All
+										</button>
+									</div>
+								</div>
+								<div class="column-list">
+									{#each $table.getAllLeafColumns() as column}
+										<label class="column-item">
+											<input
+												type="checkbox"
+												checked={column.getIsVisible()}
+												on:change={() => column.toggleVisibility()}
+											/>
+											<span>{column.columnDef.header}</span>
+										</label>
+									{/each}
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Table -->
+	{#if data.length === 0}
+		<div class="table-kit-empty">
+			<slot name="empty">
+				<p>No data available.</p>
+			</slot>
+		</div>
+	{:else}
+		<div class="table-kit-scroll">
+			<table class="table-kit-table">
+				<thead>
+					{#each $table.getHeaderGroups() as headerGroup}
+						<tr>
+							{#each headerGroup.headers as header}
+								<th
+									draggable={features.columnReordering !== false}
+									on:dragstart={() => handleDragStart(header.column.id)}
+									on:dragover={handleDragOver}
+									on:drop|preventDefault={() => handleDrop(header.column.id)}
+									class:dragging={draggedColumnId === header.column.id}
+									style="width: {header.getSize()}px; cursor: {features.columnReordering !==
+									false
+										? 'grab'
+										: 'default'};"
+								>
+									{#if !header.isPlaceholder}
+										<div class="th-content">
+											<button
+												class="sort-btn"
+												class:sortable={header.column.getCanSort()}
+												on:click={header.column.getToggleSortingHandler()}
+											>
+												<svelte:component
+													this={flexRender(header.column.columnDef.header, header.getContext())}
+												/>
+												{#if features.sorting !== false && header.column.getCanSort()}
+													<span class="sort-icon">
+														{{
+															asc: '↑',
+															desc: '↓'
+														}[header.column.getIsSorted()] ?? '↕'}
+													</span>
+												{/if}
+											</button>
+										</div>
+										<!-- Resize Handle -->
+										{#if features.columnResizing !== false && header.column.getCanResize()}
+											<!-- svelte-ignore a11y-no-static-element-interactions -->
+											<div
+												on:mousedown={header.getResizeHandler()}
+												on:touchstart={header.getResizeHandler()}
+												class="resize-handle"
+												class:resizing={header.column.getIsResizing()}
+											/>
+										{/if}
+									{/if}
+								</th>
+							{/each}
+						</tr>
+					{/each}
+				</thead>
+				<tbody>
+					{#each $table.getRowModel().rows as row}
+						<tr
+							class:clickable={onRowClick !== undefined && !row.getIsGrouped()}
+							class:group-row={row.getIsGrouped()}
+							on:click={() => onRowClick && !row.getIsGrouped() && onRowClick(row.original)}
+						>
+							{#each row.getVisibleCells() as cell}
+								<td style="padding-left: {row.depth * 2}rem">
+									{#if cell.getIsGrouped()}
+										<!-- Grouping column - show expand/collapse button -->
+										<div class="group-cell">
+											<button
+												class="expand-btn"
+												on:click|stopPropagation={() => row.toggleExpanded()}
+											>
+												{#if row.getIsExpanded()}
+													<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M19 9l-7 7-7-7"
+														/>
+													</svg>
+												{:else}
+													<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M9 5l7 7-7 7"
+														/>
+													</svg>
+												{/if}
+											</button>
+											<strong>
+												<svelte:component
+													this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+												/>
+											</strong>
+											<span class="group-count">({row.subRows.length})</span>
+										</div>
+									{:else if cell.getIsAggregated()}
+										<!-- Aggregated cell - show computed value -->
+										<slot name="cell" {cell} column={cell.column.id}>
+											<svelte:component
+												this={flexRender(
+													cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
+													cell.getContext()
+												)}
+											/>
+										</slot>
+									{:else if cell.getIsPlaceholder()}
+										<!-- Placeholder cell - empty -->
+									{:else}
+										<!-- Normal cell -->
+										<slot name="cell" {cell} column={cell.column.id}>
+											<svelte:component
+												this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+											/>
+										</slot>
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<!-- Pagination -->
+		{#if features.pagination !== false}
+			<div class="table-kit-pagination">
+				<div class="pagination-info">
+					<p>
+						Showing
+						<span class="font-medium">
+							{$table.getState().pagination.pageIndex * $table.getState().pagination.pageSize + 1}
+						</span>
+						to
+						<span class="font-medium">
+							{Math.min(
+								($table.getState().pagination.pageIndex + 1) * $table.getState().pagination.pageSize,
+								$table.getFilteredRowModel().rows.length
+							)}
+						</span>
+						of
+						<span class="font-medium">{$table.getFilteredRowModel().rows.length}</span>
+						results
+					</p>
+				</div>
+				<div class="pagination-controls">
+					<button
+						on:click={() => $table.previousPage()}
+						disabled={!$table.getCanPreviousPage()}
+						class="pagination-btn"
+					>
+						<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</button>
+					<span class="page-indicator">
+						Page {$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
+					</span>
+					<button
+						on:click={() => $table.nextPage()}
+						disabled={!$table.getCanNextPage()}
+						class="pagination-btn"
+					>
+						<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	/* Container */
+	.table-kit-container {
+		width: 100%;
+	}
+
+	/* Toolbar */
+	.table-kit-toolbar {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	.table-kit-filters {
+		flex: 1;
+	}
+
+	.clear-filters-btn {
+		font-size: 0.75rem;
+		color: #4f46e5;
+		cursor: pointer;
+		background: none;
+		border: none;
+		padding: 0;
+		margin-bottom: 0.25rem;
+	}
+
+	.clear-filters-btn:hover {
+		color: #4338ca;
+	}
+
+	/* Column Picker */
+	.table-kit-column-picker {
+		flex-shrink: 0;
+	}
+
+	.relative {
+		position: relative;
+	}
+
+	.column-picker-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+	}
+
+	.column-picker-btn:hover {
+		background: #f9fafb;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 10;
+	}
+
+	.column-picker-dropdown {
+		position: absolute;
+		right: 0;
+		z-index: 20;
+		margin-top: 0.5rem;
+		width: 14rem;
+		border-radius: 0.375rem;
+		background: white;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+		border: 1px solid rgba(0, 0, 0, 0.05);
+	}
+
+	.dropdown-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+		border-bottom: 1px solid #e5e7eb;
+	}
+
+	.dropdown-header span {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #111827;
+	}
+
+	.header-actions {
+		display: flex;
+		gap: 0.25rem;
+		align-items: center;
+	}
+
+	.text-btn {
+		font-size: 0.75rem;
+		color: #4f46e5;
+		cursor: pointer;
+		background: none;
+		border: none;
+		padding: 0;
+	}
+
+	.text-btn:hover {
+		color: #4338ca;
+	}
+
+	.separator {
+		color: #d1d5db;
+	}
+
+	.column-list {
+		max-height: 16rem;
+		overflow-y: auto;
+	}
+
+	.column-item {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		color: #374151;
+		cursor: pointer;
+	}
+
+	.column-item:hover {
+		background: #f9fafb;
+	}
+
+	.column-item input {
+		margin-right: 0.75rem;
+	}
+
+	/* Table */
+	.table-kit-empty {
+		padding: 2rem 1rem;
+		text-align: center;
+		color: #6b7280;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+	}
+
+	.table-kit-scroll {
+		overflow-x: auto;
+		background: white;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		border-radius: 0.5rem;
+	}
+
+	.table-kit-table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	thead {
+		background: #f9fafb;
+	}
+
+	th {
+		position: relative;
+		padding: 0.75rem 1.5rem;
+		text-align: left;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		transition: opacity 0.2s;
+	}
+
+	th.dragging {
+		opacity: 0.5;
+	}
+
+	.th-content {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.sort-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		background: none;
+		border: none;
+		padding: 0;
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
+	}
+
+	.sort-btn.sortable {
+		cursor: pointer;
+	}
+
+	.sort-btn.sortable:hover {
+		color: #374151;
+	}
+
+	.sort-icon {
+		color: #9ca3af;
+	}
+
+	.resize-handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 100%;
+		width: 0.25rem;
+		cursor: col-resize;
+		user-select: none;
+		touch-action: none;
+		background: transparent;
+		opacity: 0;
+		transition: opacity 0.2s, background 0.2s;
+	}
+
+	.resize-handle:hover,
+	.resize-handle.resizing {
+		background: #4f46e5;
+		opacity: 1;
+	}
+
+	tbody tr {
+		border-bottom: 1px solid #e5e7eb;
+	}
+
+	tbody tr:hover {
+		background: #f9fafb;
+	}
+
+	tbody tr.clickable {
+		cursor: pointer;
+	}
+
+	td {
+		padding: 1rem 1.5rem;
+		font-size: 0.875rem;
+		color: #111827;
+	}
+
+	/* Group Rows */
+	tbody tr.group-row {
+		background: #f9fafb;
+		font-weight: 500;
+	}
+
+	tbody tr.group-row:hover {
+		background: #f3f4f6;
+	}
+
+	.group-cell {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.expand-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		color: #6b7280;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.expand-btn:hover {
+		background: #e5e7eb;
+		color: #374151;
+	}
+
+	.group-count {
+		font-size: 0.75rem;
+		font-weight: 400;
+		color: #6b7280;
+	}
+
+	/* Pagination */
+	.table-kit-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 1rem;
+		background: white;
+		border-top: 1px solid #e5e7eb;
+		border-bottom-left-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+	}
+
+	.pagination-info p {
+		font-size: 0.875rem;
+		color: #374151;
+		margin: 0;
+	}
+
+	.pagination-info .font-medium {
+		font-weight: 500;
+	}
+
+	.pagination-controls {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		border-radius: 0.375rem;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+	}
+
+	.pagination-btn {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #6b7280;
+		background: white;
+		border: 1px solid #d1d5db;
+		cursor: pointer;
+	}
+
+	.pagination-btn:first-child {
+		border-top-left-radius: 0.375rem;
+		border-bottom-left-radius: 0.375rem;
+	}
+
+	.pagination-btn:last-child {
+		border-top-right-radius: 0.375rem;
+		border-bottom-right-radius: 0.375rem;
+	}
+
+	.pagination-btn:hover:not(:disabled) {
+		background: #f9fafb;
+	}
+
+	.pagination-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.page-indicator {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border-top: 1px solid #d1d5db;
+		border-bottom: 1px solid #d1d5db;
+	}
+</style>