@shotleybuilder/svelte-table-kit 0.6.0 → 0.12.0

package/README.md

@@ -26,11 +26,16 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - 📋 **Column context menu** - Quick access to sort, filter, group, and hide actions
 
 **Advanced Filtering:**
-- 12 filter operators: equals, contains, starts with, greater than, etc.
+- 14 filter operators: equals, contains, starts with, greater than, is_before, is_after, etc.
 - AND/OR logic between conditions
 - Collapsible FilterBar UI (space-efficient)
 - Active filter count badge
 - Real-time filtering as you type
+- **Column order modes** - Cycle between Default, Table Order, and A-Z sorting in field picker (v0.7.0+)
+- **Fuzzy search** - Type to quickly find columns in large tables with highlighted matches (v0.8.0+)
+- **Value suggestions** - Autocomplete dropdown shows existing column values as you type (v0.10.0+)
+- **Numeric range hints** - Numeric columns display min/max range in the value input (v0.10.0+)
+- **Data type awareness** - Operators and value inputs adapt based on column data type (v0.11.0+)
 
 **Sorting Options:**
 - **Column header mode** (default) - Click headers to sort with ↑↓↕ indicators
@@ -55,6 +60,13 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - Actions conditionally shown based on feature flags
 - Seamlessly integrates with existing controls
 
+**Cell Context Menu (v0.9.0+):**
+- Right-click any cell to open context menu
+- **Filter by value** - Instantly filter to show rows matching cell value
+- **Exclude value** - Filter to hide rows with this value
+- **Greater/Less than** - Numeric columns get comparison options
+- Auto-expands FilterBar when filter is created
+
 **Developer Experience:**
 - 🎨 Headless design - style it your way
 - 📦 Built on TanStack Table v8 (battle-tested, powerful)

package/dist/TableKit.svelte

@@ -25,6 +25,7 @@ import FilterBar from "./components/FilterBar.svelte";
 import GroupBar from "./components/GroupBar.svelte";
 import SortBar from "./components/SortBar.svelte";
 import ColumnMenu from "./components/ColumnMenu.svelte";
+import CellContextMenu from "./components/CellContextMenu.svelte";
 export let data = [];
 export let columns = [];
 export let config = void 0;
@@ -46,6 +47,9 @@ export let features = {
 export let onRowClick = void 0;
 export let onRowSelect = void 0;
 export let onStateChange = void 0;
+function getColumnId(col) {
+  return col.accessorKey || col.id || "";
+}
 let sorting = writable([]);
 let columnVisibility = writable({});
 let columnSizing = writable({});
@@ -59,6 +63,15 @@ let configInitialized = false;
 let grouping = writable([]);
 let expanded = writable(true);
 let groupBarExpanded = false;
+let cellContextMenu = {
+  show: false,
+  x: 0,
+  y: 0,
+  value: null,
+  columnId: "",
+  columnHeader: "",
+  isNumeric: false
+};
 $: {
   const configChanged = config?.id && config.id !== previousConfigId;
   const hasConfig = config !== void 0 && config !== null;
@@ -69,7 +82,7 @@ $: {
     if (config.defaultVisibleColumns && columns.length > 0) {
       const visibilityMap = {};
       columns.forEach((col) => {
-        const colId = col.accessorKey || col.id;
+        const colId = getColumnId(col);
         if (config && config.defaultVisibleColumns) {
           visibilityMap[colId] = config.defaultVisibleColumns.includes(colId);
         }
@@ -283,7 +296,38 @@ function handleDrop(targetColumnId) {
   draggedColumnId = null;
 }
 $: if ($columnOrder.length === 0 && columns.length > 0) {
-  columnOrder.set(columns.map((col) => col.accessorKey || col.id));
+  columnOrder.set(columns.map((col) => getColumnId(col)));
+}
+function showCellContextMenu(event, cell) {
+  if (features.filtering === false) return;
+  event.preventDefault();
+  const value = cell.getValue();
+  const columnId = cell.column.id;
+  const columnHeader = String(cell.column.columnDef.header || columnId);
+  const isNumeric = typeof value === "number" || !isNaN(parseFloat(value));
+  cellContextMenu = {
+    show: true,
+    x: event.clientX,
+    y: event.clientY,
+    value,
+    columnId,
+    columnHeader,
+    isNumeric
+  };
+}
+function closeCellContextMenu() {
+  cellContextMenu = { ...cellContextMenu, show: false };
+}
+function addFilterFromCell(columnId, operator, value) {
+  const newCondition = {
+    id: generateFilterId(),
+    field: columnId,
+    operator,
+    value: String(value ?? "")
+  };
+  filterConditions.update((conditions) => [...conditions, newCondition]);
+  filterBarExpanded = true;
+  closeCellContextMenu();
 }
 $: hasActiveFilters = $filterConditions.length > 0;
 $: totalTableWidth = $table.getVisibleLeafColumns().reduce((sum, col) => sum + col.getSize(), 0);
@@ -292,8 +336,8 @@ $: if (onStateChange) {
     columnVisibility: $columnVisibility,
     columnOrder: $columnOrder,
     columnSizing: $columnSizing,
-    columnFilters: $columnFilters,
-    sorting: $sorting,
+    columnFilters: $filterConditions,
+    sorting: $sorting.map((s) => ({ columnId: s.id, direction: s.desc ? "desc" : "asc" })),
     pagination: $table.getState().pagination
   });
 }
@@ -313,6 +357,9 @@ $: if (onStateChange) {
 				<div class="table-kit-filters">
 					<FilterBar
 						{columns}
+						{data}
+						columnOrder={$columnOrder}
+						{storageKey}
 						conditions={$filterConditions}
 						onConditionsChange={(newConditions) => filterConditions.set(newConditions)}
 						logic={$filterLogic}
@@ -595,8 +642,10 @@ $: if (onStateChange) {
 								>
 									{#if !header.isPlaceholder}
 										<div class="th-wrapper">
+											<!-- svelte-ignore a11y-no-static-element-interactions -->
 											<div
 												class="th-content"
+												role={features.columnReordering !== false ? 'button' : undefined}
 												style="padding: {verticalPadding}rem {horizontalPadding}rem; cursor: {features.columnReordering !==
 												false
 													? 'grab'
@@ -616,10 +665,7 @@ $: if (onStateChange) {
 															/>
 														</span>
 														<span class="sort-icon">
-															{{
-																asc: '↑',
-																desc: '↓'
-															}[header.column.getIsSorted()] ?? '↕'}
+															{header.column.getIsSorted() === 'asc' ? '↑' : header.column.getIsSorted() === 'desc' ? '↓' : '↕'}
 														</span>
 													</button>
 												{:else}
@@ -766,7 +812,11 @@ $: if (onStateChange) {
 										<!-- Placeholder cell - empty -->
 									{:else}
 										<!-- Normal cell -->
-										<div class="cell-content">
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div
+											class="cell-content"
+											on:contextmenu={(e) => showCellContextMenu(e, cell)}
+										>
 											<slot name="cell" {cell} column={cell.column.id}>
 												<svelte:component
 													this={flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -841,6 +891,23 @@ $: if (onStateChange) {
 	{/if}
 </div>
 
+<!-- Cell Context Menu -->
+{#if cellContextMenu.show}
+	<CellContextMenu
+		x={cellContextMenu.x}
+		y={cellContextMenu.y}
+		value={cellContextMenu.value}
+		columnId={cellContextMenu.columnId}
+		columnHeader={cellContextMenu.columnHeader}
+		isNumeric={cellContextMenu.isNumeric}
+		on:filterEquals={(e) => addFilterFromCell(e.detail.columnId, 'equals', e.detail.value)}
+		on:filterNotEquals={(e) => addFilterFromCell(e.detail.columnId, 'not_equals', e.detail.value)}
+		on:filterGreaterThan={(e) => addFilterFromCell(e.detail.columnId, 'greater_than', e.detail.value)}
+		on:filterLessThan={(e) => addFilterFromCell(e.detail.columnId, 'less_than', e.detail.value)}
+		on:close={closeCellContextMenu}
+	/>
+{/if}
+
 <style>
 	/* Container */
 	.table-kit-container {

package/dist/TableKit.svelte.d.ts

@@ -1,19 +1,19 @@
 import { SvelteComponent } from "svelte";
 import { type ColumnDef } from '@tanstack/svelte-table';
 import type { TableKitProps } from './types';
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<T extends Record<string, unknown>> {
     props(): {
         data?: T[] | undefined;
         columns?: ColumnDef<T>[] | undefined;
         config?: TableKitProps<T_1>["config"];
-        storageKey?: TableKitProps<T_1>["storageKey"];
+        storageKey?: NonNullable<TableKitProps<T_1>["storageKey"]>;
         persistState?: TableKitProps<T_1>["persistState"];
         align?: TableKitProps<T_1>["align"];
         rowHeight?: TableKitProps<T_1>["rowHeight"];
         columnSpacing?: TableKitProps<T_1>["columnSpacing"];
-        features?: TableKitProps<T_1>["features"];
+        features?: NonNullable<TableKitProps<T_1>["features"]>;
         onRowClick?: ((row: T) => void) | undefined;
-        onRowSelect?: ((rows: T[]) => void) | undefined;
+        /** @deprecated Row selection not yet implemented - reserved for future use */ onRowSelect?: ((rows: T[]) => void) | undefined;
         onStateChange?: TableKitProps<T_1>["onStateChange"];
     };
     events(): {} & {
@@ -28,9 +28,9 @@ declare class __sveltets_Render<T> {
         };
     };
 }
-export type TableKitProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TableKitEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TableKitSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TableKit<T> extends SvelteComponent<TableKitProps_<T>, TableKitEvents<T>, TableKitSlots<T>> {
+export type TableKitProps_<T extends Record<string, unknown>> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableKitEvents<T extends Record<string, unknown>> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableKitSlots<T extends Record<string, unknown>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TableKit<T extends Record<string, unknown>> extends SvelteComponent<TableKitProps_<T>, TableKitEvents<T>, TableKitSlots<T>> {
 }
 export {};

package/dist/components/CellContextMenu.svelte

@@ -0,0 +1,208 @@
+<script>import { onMount, createEventDispatcher } from "svelte";
+export let x;
+export let y;
+export let value;
+export let columnId;
+export let columnHeader;
+export let isNumeric = false;
+const dispatch = createEventDispatcher();
+let menuRef;
+$: displayValue = (() => {
+  const str = String(value ?? "");
+  if (str.length > 30) {
+    return str.substring(0, 27) + "...";
+  }
+  return str;
+})();
+$: adjustedPosition = (() => {
+  let adjustedX = x;
+  let adjustedY = y;
+  if (typeof window !== "undefined") {
+    const menuWidth = 220;
+    const menuHeight = isNumeric ? 180 : 100;
+    if (x + menuWidth > window.innerWidth) {
+      adjustedX = window.innerWidth - menuWidth - 10;
+    }
+    if (y + menuHeight > window.innerHeight) {
+      adjustedY = window.innerHeight - menuHeight - 10;
+    }
+  }
+  return { x: adjustedX, y: adjustedY };
+})();
+function handleFilterEquals() {
+  dispatch("filterEquals", { columnId, value });
+  dispatch("close");
+}
+function handleFilterNotEquals() {
+  dispatch("filterNotEquals", { columnId, value });
+  dispatch("close");
+}
+function handleFilterGreaterThan() {
+  dispatch("filterGreaterThan", { columnId, value });
+  dispatch("close");
+}
+function handleFilterLessThan() {
+  dispatch("filterLessThan", { columnId, value });
+  dispatch("close");
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    dispatch("close");
+  }
+}
+function handleClickOutside(event) {
+  if (menuRef && !menuRef.contains(event.target)) {
+    dispatch("close");
+  }
+}
+onMount(() => {
+  document.addEventListener("click", handleClickOutside);
+  document.addEventListener("keydown", handleKeydown);
+  menuRef?.focus();
+  return () => {
+    document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  };
+});
+</script>
+
+<div
+	bind:this={menuRef}
+	class="cell-context-menu"
+	style="top: {adjustedPosition.y}px; left: {adjustedPosition.x}px;"
+	role="menu"
+	tabindex="-1"
+>
+	<div class="menu-header">
+		<span class="column-name">{columnHeader}</span>
+	</div>
+
+	<button class="menu-item" on:click={handleFilterEquals} role="menuitem">
+		<svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+			/>
+		</svg>
+		<span>Filter by "<strong>{displayValue}</strong>"</span>
+	</button>
+
+	<button class="menu-item" on:click={handleFilterNotEquals} role="menuitem">
+		<svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+			/>
+		</svg>
+		<span>Exclude "<strong>{displayValue}</strong>"</span>
+	</button>
+
+	{#if isNumeric}
+		<div class="menu-divider"></div>
+
+		<button class="menu-item" on:click={handleFilterGreaterThan} role="menuitem">
+			<svg class="menu-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>
+			<span>Greater than <strong>{displayValue}</strong></span>
+		</button>
+
+		<button class="menu-item" on:click={handleFilterLessThan} role="menuitem">
+			<svg class="menu-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>
+			<span>Less than <strong>{displayValue}</strong></span>
+		</button>
+	{/if}
+</div>
+
+<style>
+	.cell-context-menu {
+		position: fixed;
+		z-index: 1000;
+		min-width: 200px;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		padding: 0.25rem 0;
+		outline: none;
+	}
+
+	.menu-header {
+		padding: 0.5rem 0.75rem;
+		border-bottom: 1px solid #e5e7eb;
+		margin-bottom: 0.25rem;
+	}
+
+	.column-name {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+	}
+
+	.menu-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		text-align: left;
+		background: none;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.1s;
+	}
+
+	.menu-item:hover {
+		background: #f3f4f6;
+	}
+
+	.menu-item:focus {
+		outline: none;
+		background: #e5e7eb;
+	}
+
+	.menu-item span {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.menu-item strong {
+		color: #1f2937;
+	}
+
+	.menu-icon {
+		width: 1rem;
+		height: 1rem;
+		color: #6b7280;
+		flex-shrink: 0;
+	}
+
+	.menu-divider {
+		height: 1px;
+		background: #e5e7eb;
+		margin: 0.25rem 0;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        x: number;
+        y: number;
+        value: any;
+        columnId: string;
+        columnHeader: string;
+        isNumeric?: boolean;
+    };
+    events: {
+        filterEquals: CustomEvent<{
+            columnId: string;
+            value: any;
+        }>;
+        filterNotEquals: CustomEvent<{
+            columnId: string;
+            value: any;
+        }>;
+        filterGreaterThan: CustomEvent<{
+            columnId: string;
+            value: any;
+        }>;
+        filterLessThan: CustomEvent<{
+            columnId: string;
+            value: any;
+        }>;
+        close: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CellContextMenuProps = typeof __propDef.props;
+export type CellContextMenuEvents = typeof __propDef.events;
+export type CellContextMenuSlots = typeof __propDef.slots;
+export default class CellContextMenu extends SvelteComponent<CellContextMenuProps, CellContextMenuEvents, CellContextMenuSlots> {
+}
+export {};

package/dist/components/ColumnMenu.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import { browser } from "$app/environment";
+import { isBrowser } from "../stores/persistence";
 export let column;
 export let isOpen = false;
 export let canSort = true;
@@ -42,7 +42,7 @@ function handleKeydown(event) {
   }
 }
 $: {
-  if (browser) {
+  if (isBrowser) {
     if (isOpen) {
       setTimeout(() => {
         document.addEventListener("mousedown", handleClickOutside);
@@ -55,7 +55,7 @@ $: {
   }
 }
 onDestroy(() => {
-  if (browser) {
+  if (isBrowser) {
     document.removeEventListener("mousedown", handleClickOutside);
     document.removeEventListener("keydown", handleKeydown);
   }

package/dist/components/FilterBar.svelte

@@ -1,11 +1,83 @@
 <script>import FilterConditionComponent from "./FilterCondition.svelte";
 export let columns;
+export let data = [];
+export let columnOrder = [];
+export let storageKey = "table-kit";
 export let conditions = [];
 export let onConditionsChange;
 export let logic = "and";
 export let onLogicChange;
 export let isExpanded = false;
 export let onExpandedChange = void 0;
+let columnValuesCache = /* @__PURE__ */ new Map();
+let numericRangeCache = /* @__PURE__ */ new Map();
+let lastDataLength = 0;
+function isNumericColumn(columnId) {
+  if (!columnId || !data || data.length === 0) return false;
+  let numericCount = 0;
+  let sampleCount = 0;
+  const sampleSize = Math.min(10, data.length);
+  for (const row of data) {
+    if (sampleCount >= sampleSize) break;
+    const val = row[columnId];
+    if (val !== null && val !== void 0 && val !== "") {
+      sampleCount++;
+      if (typeof val === "number" || typeof val === "string" && !isNaN(Number(val))) {
+        numericCount++;
+      }
+    }
+  }
+  return sampleCount > 0 && numericCount / sampleCount >= 0.8;
+}
+function getNumericRange(columnId) {
+  if (!columnId || !data || data.length === 0) return null;
+  if (data.length !== lastDataLength) {
+    numericRangeCache.clear();
+  }
+  if (numericRangeCache.has(columnId)) {
+    return numericRangeCache.get(columnId);
+  }
+  if (!isNumericColumn(columnId)) {
+    numericRangeCache.set(columnId, null);
+    return null;
+  }
+  let min = Infinity;
+  let max = -Infinity;
+  for (const row of data) {
+    const val = row[columnId];
+    if (val !== null && val !== void 0 && val !== "") {
+      const num = typeof val === "number" ? val : Number(val);
+      if (!isNaN(num)) {
+        min = Math.min(min, num);
+        max = Math.max(max, num);
+      }
+    }
+  }
+  const range = min !== Infinity ? { min, max } : null;
+  numericRangeCache.set(columnId, range);
+  return range;
+}
+function getColumnValues(columnId) {
+  if (!columnId || !data || data.length === 0) return [];
+  if (data.length !== lastDataLength) {
+    columnValuesCache.clear();
+    numericRangeCache.clear();
+    lastDataLength = data.length;
+  }
+  if (columnValuesCache.has(columnId)) {
+    return columnValuesCache.get(columnId);
+  }
+  const values = /* @__PURE__ */ new Set();
+  for (const row of data) {
+    const val = row[columnId];
+    if (val !== null && val !== void 0 && val !== "") {
+      values.add(String(val));
+    }
+  }
+  const sortedValues = Array.from(values).sort((a, b) => a.localeCompare(b));
+  columnValuesCache.set(columnId, sortedValues);
+  return sortedValues;
+}
 function generateId() {
   return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -99,6 +171,10 @@ $: filterCount = conditions.filter(
 								<FilterConditionComponent
 									{condition}
 									{columns}
+									{columnOrder}
+									{storageKey}
+									columnValues={getColumnValues(condition.field)}
+									numericRange={getNumericRange(condition.field)}
 									onUpdate={(updated) => updateCondition(index, updated)}
 									onRemove={() => removeCondition(index)}
 								/>

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

@@ -4,6 +4,9 @@ import type { FilterCondition, FilterLogic } from '../types';
 declare const __propDef: {
     props: {
         columns: ColumnDef<any>[];
+        data?: any[];
+        columnOrder?: string[];
+        storageKey?: string;
         conditions?: FilterCondition[];
         onConditionsChange: (conditions: FilterCondition[]) => void;
         logic?: FilterLogic;