@shotleybuilder/svelte-table-kit 0.5.1 → 0.10.1

package/README.md

@@ -31,6 +31,10 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - 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+)
 
 **Sorting Options:**
 - **Column header mode** (default) - Click headers to sort with ↑↓↕ indicators
@@ -55,11 +59,19 @@ 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)
 - 🔒 Full TypeScript support
 - 🎛️ Feature flags for granular control
+- 🔌 **Toolbar slot** - Add custom controls to the toolbar (v0.6.0+)
 - 🚀 Zero external dependencies (except TanStack Table)
 - ♿ Accessible and keyboard-friendly
 
@@ -258,6 +270,36 @@ Listen to table events:
 />
 ```
 
+### Custom Toolbar Controls (v0.6.0+)
+
+Add custom controls to the left side of the toolbar using the `toolbar-left` slot:
+
+```svelte
+<script>
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
+  import ViewSelector from './ViewSelector.svelte';
+</script>
+
+<TableKit {data} {columns}>
+  <!-- Add custom controls to the toolbar -->
+  <svelte:fragment slot="toolbar-left">
+    <ViewSelector on:viewSelected={handleViewSelected} />
+    <button on:click={saveView} class="btn-primary">
+      Save View
+    </button>
+  </svelte:fragment>
+</TableKit>
+```
+
+**Use Cases:**
+- View management controls (save/load table configurations)
+- Custom filter presets
+- Quick action buttons
+- Export/import controls
+- Any custom toolbar buttons that should appear alongside table controls
+
+The `toolbar-left` slot is positioned on the left side of the toolbar, while the built-in table controls (Filter, Sort, Group, Columns) automatically align to the right. All controls appear on the same row, creating a unified control bar.
+
 ---
 
 ## 🎨 Styling

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;
@@ -59,6 +60,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;
@@ -285,6 +295,37 @@ function handleDrop(targetColumnId) {
 $: if ($columnOrder.length === 0 && columns.length > 0) {
   columnOrder.set(columns.map((col) => col.accessorKey || col.id));
 }
+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);
 $: if (onStateChange) {
@@ -303,11 +344,19 @@ $: if (onStateChange) {
 	<!-- Filters and Controls -->
 	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false || (features.sorting !== false && features.sortingMode === 'control')}
 		<div class="table-kit-toolbar">
+			<!-- Slot for custom left-side controls (e.g., view selector, save buttons) -->
+			<div class="table-kit-custom-controls">
+				<slot name="toolbar-left" />
+			</div>
+
 			<!-- Filter Controls -->
 			{#if features.filtering !== false}
 				<div class="table-kit-filters">
 					<FilterBar
 						{columns}
+						{data}
+						columnOrder={$columnOrder}
+						{storageKey}
 						conditions={$filterConditions}
 						onConditionsChange={(newConditions) => filterConditions.set(newConditions)}
 						logic={$filterLogic}
@@ -761,7 +810,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())}
@@ -836,6 +889,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 {
@@ -850,6 +920,16 @@ $: if (onStateChange) {
 		justify-content: space-between;
 		gap: 1rem;
 		margin-bottom: 1rem;
+		flex-wrap: wrap;
+	}
+
+	/* Custom controls slot (left side) */
+	.table-kit-custom-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+		margin-right: auto;
 	}
 
 	.table-kit-filters {

package/dist/TableKit.svelte.d.ts

@@ -20,9 +20,10 @@ declare class __sveltets_Render<T> {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {
+        'toolbar-left': {};
         empty: {};
         cell: {
-            cell: import("@tanstack/table-core").Cell<T, unknown>;
+            cell: import("@tanstack/table-core").Cell<Record<string, any>, unknown>;
             column: string;
         };
     };

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;