@shotleybuilder/svelte-table-kit 0.6.0 → 0.12.0

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

@@ -5,6 +5,13 @@ declare const __propDef: {
     props: {
         condition: FilterCondition;
         columns: ColumnDef<any>[];
+        columnOrder?: string[];
+        storageKey?: string;
+        columnValues?: string[];
+        numericRange?: {
+            min: number;
+            max: number;
+        } | null;
         onUpdate: (condition: FilterCondition) => void;
         onRemove: () => void;
     };

package/dist/components/GroupBar.svelte

@@ -31,8 +31,11 @@ function clearAllGroups() {
   onGroupingChange([]);
   setExpanded(false);
 }
+function getColumnId(col) {
+  return col.accessorKey || col.id || "";
+}
 $: availableColumns = columns.filter((col) => {
-  const columnId = col.accessorKey || col.id;
+  const columnId = getColumnId(col);
   return columnId && col.enableGrouping !== false;
 });
 $: hasGroups = grouping.length > 0;
@@ -85,7 +88,7 @@ $: canAddMore = grouping.length < MAX_LEVELS;
 							>
 								<option value="">Select field...</option>
 								{#each availableColumns as column}
-									{@const columnId = column.accessorKey || column.id}
+									{@const columnId = getColumnId(column)}
 									<option value={columnId}>
 										{column.header || columnId}
 									</option>

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 export { default as TableKit } from './TableKit.svelte';
 export { default as FilterBar } from './components/FilterBar.svelte';
-export { default as FilterCondition } from './components/FilterCondition.svelte';
+export { default as FilterConditionEditor } from './components/FilterCondition.svelte';
 export { default as GroupBar } from './components/GroupBar.svelte';
-export type { TableKitProps, TableConfig, ViewPreset, FilterCondition, FilterOperator, FilterLogic, SortConfig, ClassNameMap, TableFeatures, TableState } from './types';
+export { default as CellContextMenu } from './components/CellContextMenu.svelte';
+export type { TableKitProps, TableConfig, ViewPreset, FilterCondition, FilterOperator, FilterLogic, ColumnOrderMode, ColumnDataType, ColumnMeta, SortConfig, ClassNameMap, TableFeatures, TableState } from './types';
 export { presets } from './presets';
 export { generateTableConfig, validateTableConfig, mergeConfigs } from './utils/config';
-export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters } from './utils/filters';
+export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters, getOperatorsForType } from './utils/filters';
+export type { OperatorOption } from './utils/filters';
 export { formatDate, formatCurrency, formatNumber, formatPercent } from './utils/formatters';
+export { fuzzyMatch, fuzzySearch, highlightMatches } from './utils/fuzzy';
+export type { FuzzyMatch } from './utils/fuzzy';

package/dist/index.js

@@ -3,13 +3,16 @@
 export { default as TableKit } from './TableKit.svelte';
 // Sub-components
 export { default as FilterBar } from './components/FilterBar.svelte';
-export { default as FilterCondition } from './components/FilterCondition.svelte';
+export { default as FilterConditionEditor } from './components/FilterCondition.svelte';
 export { default as GroupBar } from './components/GroupBar.svelte';
+export { default as CellContextMenu } from './components/CellContextMenu.svelte';
 // Presets
 export { presets } from './presets';
 // Utilities for AI configuration
 export { generateTableConfig, validateTableConfig, mergeConfigs } from './utils/config';
 // Filter utilities
-export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters } from './utils/filters';
+export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters, getOperatorsForType } from './utils/filters';
 // Formatters
 export { formatDate, formatCurrency, formatNumber, formatPercent } from './utils/formatters';
+// Fuzzy search utilities
+export { fuzzyMatch, fuzzySearch, highlightMatches } from './utils/fuzzy';

package/dist/stores/persistence.d.ts

@@ -1,7 +1,8 @@
 import type { VisibilityState, ColumnSizingState, ColumnFiltersState, ColumnOrderState, SortingState, PaginationState } from '@tanstack/svelte-table';
+import type { ColumnOrderMode } from '../types';
 /**
  * Check if we're in a browser environment
- * Note: In SvelteKit apps, import from '$app/environment'
+ * Uses cross-bundler compatible check instead of SvelteKit-specific imports
  */
 export declare const isBrowser: boolean;
 /**
@@ -52,6 +53,14 @@ export declare function loadPagination(storageKey: string, defaultPageSize?: num
  * Save pagination state to localStorage
  */
 export declare function savePagination(storageKey: string, state: PaginationState): void;
+/**
+ * Load filter column order mode from localStorage
+ */
+export declare function loadFilterColumnOrderMode(storageKey: string): ColumnOrderMode;
+/**
+ * Save filter column order mode to localStorage
+ */
+export declare function saveFilterColumnOrderMode(storageKey: string, mode: ColumnOrderMode): void;
 /**
  * Clear all table state from localStorage
  */

package/dist/stores/persistence.js

@@ -1,7 +1,7 @@
 // LocalStorage persistence utilities
 /**
  * Check if we're in a browser environment
- * Note: In SvelteKit apps, import from '$app/environment'
+ * Uses cross-bundler compatible check instead of SvelteKit-specific imports
  */
 export const isBrowser = typeof window !== 'undefined' && typeof localStorage !== 'undefined';
 /**
@@ -107,6 +107,18 @@ export function loadPagination(storageKey, defaultPageSize = 10) {
 export function savePagination(storageKey, state) {
     saveToStorage(`${storageKey}_pagination`, state);
 }
+/**
+ * Load filter column order mode from localStorage
+ */
+export function loadFilterColumnOrderMode(storageKey) {
+    return loadFromStorage(`${storageKey}_filter_column_order_mode`, 'definition');
+}
+/**
+ * Save filter column order mode to localStorage
+ */
+export function saveFilterColumnOrderMode(storageKey, mode) {
+    saveToStorage(`${storageKey}_filter_column_order_mode`, mode);
+}
 /**
  * Clear all table state from localStorage
  */
@@ -120,6 +132,7 @@ export function clearTableState(storageKey) {
         localStorage.removeItem(`${storageKey}_column_order`);
         localStorage.removeItem(`${storageKey}_sorting`);
         localStorage.removeItem(`${storageKey}_pagination`);
+        localStorage.removeItem(`${storageKey}_filter_column_order_mode`);
     }
     catch (error) {
         console.error('Failed to clear table state:', error);

package/dist/types.d.ts

@@ -54,6 +54,26 @@ export interface ViewPreset {
 }
 export type FilterOperator = 'equals' | 'not_equals' | 'contains' | 'not_contains' | 'starts_with' | 'ends_with' | 'is_empty' | 'is_not_empty' | 'greater_than' | 'less_than' | 'greater_or_equal' | 'less_or_equal' | 'is_before' | 'is_after';
 export type FilterLogic = 'and' | 'or';
+export type ColumnOrderMode = 'definition' | 'ui' | 'alphabetical';
+/**
+ * Column data type for filter operator adaptation
+ */
+export type ColumnDataType = 'text' | 'number' | 'date' | 'boolean' | 'select';
+/**
+ * Extended column meta for data type awareness
+ * Use in column definitions: { meta: { dataType: 'number', selectOptions: [...] } }
+ */
+export interface ColumnMeta {
+    /** Data type for filter operator adaptation */
+    dataType?: ColumnDataType;
+    /** Options for 'select' type columns */
+    selectOptions?: {
+        value: string;
+        label: string;
+    }[];
+    /** Column group for grouped picker (future feature) */
+    group?: string;
+}
 export interface FilterCondition {
     id: string;
     field: string;

package/dist/utils/filters.d.ts

@@ -1,4 +1,15 @@
-import type { FilterCondition, FilterLogic } from '../types';
+import type { FilterCondition, FilterOperator, FilterLogic, ColumnDataType } from '../types';
+/**
+ * Operator option for UI display
+ */
+export interface OperatorOption {
+    value: FilterOperator;
+    label: string;
+}
+/**
+ * Get operators available for a specific data type
+ */
+export declare function getOperatorsForType(dataType?: ColumnDataType): OperatorOption[];
 /**
  * Evaluate a single filter condition against a row value
  */
@@ -6,7 +17,7 @@ export declare function evaluateCondition(condition: FilterCondition, rowValue:
 /**
  * Filter data array by multiple conditions with AND or OR logic
  */
-export declare function applyFilters<T extends Record<string, any>>(data: T[], conditions: FilterCondition[], logic?: FilterLogic): T[];
+export declare function applyFilters<T extends Record<string, unknown>>(data: T[], conditions: FilterCondition[], logic?: FilterLogic): T[];
 /**
  * Create a text filter configuration
  */

package/dist/utils/filters.js

@@ -1,4 +1,69 @@
 // Filter creation and evaluation utilities
+/**
+ * All available operators with labels
+ */
+const ALL_OPERATORS = [
+    { value: 'equals', label: 'equals' },
+    { value: 'not_equals', label: 'does not equal' },
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is_empty', label: 'is empty' },
+    { value: 'is_not_empty', label: 'is not empty' },
+    { value: 'greater_than', label: '>' },
+    { value: 'less_than', label: '<' },
+    { value: 'greater_or_equal', label: '>=' },
+    { value: 'less_or_equal', label: '<=' },
+    { value: 'is_before', label: 'is before' },
+    { value: 'is_after', label: 'is after' }
+];
+/**
+ * Get operators available for a specific data type
+ */
+export function getOperatorsForType(dataType = 'text') {
+    switch (dataType) {
+        case 'text':
+            return ALL_OPERATORS.filter((op) => [
+                'equals',
+                'not_equals',
+                'contains',
+                'not_contains',
+                'starts_with',
+                'ends_with',
+                'is_empty',
+                'is_not_empty'
+            ].includes(op.value));
+        case 'number':
+            return ALL_OPERATORS.filter((op) => [
+                'equals',
+                'not_equals',
+                'greater_than',
+                'less_than',
+                'greater_or_equal',
+                'less_or_equal',
+                'is_empty',
+                'is_not_empty'
+            ].includes(op.value));
+        case 'date':
+            return ALL_OPERATORS.filter((op) => ['equals', 'not_equals', 'is_before', 'is_after', 'is_empty', 'is_not_empty'].includes(op.value));
+        case 'boolean':
+            return ALL_OPERATORS.filter((op) => ['equals', 'is_empty', 'is_not_empty'].includes(op.value));
+        case 'select':
+            return ALL_OPERATORS.filter((op) => ['equals', 'not_equals', 'is_empty', 'is_not_empty'].includes(op.value));
+        default:
+            return ALL_OPERATORS.filter((op) => [
+                'equals',
+                'not_equals',
+                'contains',
+                'not_contains',
+                'starts_with',
+                'ends_with',
+                'is_empty',
+                'is_not_empty'
+            ].includes(op.value));
+    }
+}
 /**
  * Evaluate a single filter condition against a row value
  */
@@ -32,6 +97,16 @@ export function evaluateCondition(condition, rowValue) {
             return Number(rowValue) >= Number(value);
         case 'less_or_equal':
             return Number(rowValue) <= Number(value);
+        case 'is_before': {
+            const rowDate = new Date(rowValue);
+            const filterDate = new Date(value);
+            return !isNaN(rowDate.getTime()) && !isNaN(filterDate.getTime()) && rowDate < filterDate;
+        }
+        case 'is_after': {
+            const rowDate = new Date(rowValue);
+            const filterDate = new Date(value);
+            return !isNaN(rowDate.getTime()) && !isNaN(filterDate.getTime()) && rowDate > filterDate;
+        }
         default:
             return true;
     }

package/dist/utils/fuzzy.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Fuzzy search utilities for column/field picker
+ */
+export interface FuzzyMatch {
+    /** The original string that was matched */
+    text: string;
+    /** The match score (higher = better match) */
+    score: number;
+    /** Indices of characters that matched in the original string */
+    matchedIndices: number[];
+}
+/**
+ * Perform fuzzy matching of a search pattern against a target string.
+ * Returns null if no match, or a FuzzyMatch object with score and matched indices.
+ *
+ * Scoring:
+ * - Consecutive matches score higher
+ * - Matches at word boundaries score higher
+ * - Matches at the start of the string score higher
+ * - Case-insensitive matching
+ *
+ * @param pattern - The search pattern (e.g., "cdt" to find "Created Date")
+ * @param target - The target string to search in
+ * @returns FuzzyMatch object or null if no match
+ */
+export declare function fuzzyMatch(pattern: string, target: string): FuzzyMatch | null;
+/**
+ * Search through an array of strings and return matches sorted by score.
+ *
+ * @param pattern - The search pattern
+ * @param items - Array of strings to search
+ * @param limit - Maximum number of results to return (default: all)
+ * @returns Array of FuzzyMatch objects sorted by score (highest first)
+ */
+export declare function fuzzySearch(pattern: string, items: string[], limit?: number): FuzzyMatch[];
+/**
+ * Highlight matched characters in a string by wrapping them in a specified tag.
+ * Returns an array of segments with matched/unmatched flags for rendering.
+ *
+ * @param text - The original text
+ * @param matchedIndices - Array of indices that matched
+ * @returns Array of text segments with isMatch flag
+ */
+export declare function highlightMatches(text: string, matchedIndices: number[]): {
+    text: string;
+    isMatch: boolean;
+}[];

package/dist/utils/fuzzy.js

@@ -0,0 +1,142 @@
+/**
+ * Fuzzy search utilities for column/field picker
+ */
+/**
+ * Perform fuzzy matching of a search pattern against a target string.
+ * Returns null if no match, or a FuzzyMatch object with score and matched indices.
+ *
+ * Scoring:
+ * - Consecutive matches score higher
+ * - Matches at word boundaries score higher
+ * - Matches at the start of the string score higher
+ * - Case-insensitive matching
+ *
+ * @param pattern - The search pattern (e.g., "cdt" to find "Created Date")
+ * @param target - The target string to search in
+ * @returns FuzzyMatch object or null if no match
+ */
+export function fuzzyMatch(pattern, target) {
+    if (!pattern) {
+        return { text: target, score: 0, matchedIndices: [] };
+    }
+    const patternLower = pattern.toLowerCase();
+    const targetLower = target.toLowerCase();
+    // Quick check: all pattern characters must exist in target
+    let patternIdx = 0;
+    for (let i = 0; i < targetLower.length && patternIdx < patternLower.length; i++) {
+        if (targetLower[i] === patternLower[patternIdx]) {
+            patternIdx++;
+        }
+    }
+    if (patternIdx !== patternLower.length) {
+        return null; // Not all pattern characters found
+    }
+    // Find optimal match positions using greedy algorithm
+    const matchedIndices = [];
+    let score = 0;
+    patternIdx = 0;
+    let lastMatchIdx = -1;
+    let consecutiveCount = 0;
+    for (let i = 0; i < targetLower.length && patternIdx < patternLower.length; i++) {
+        if (targetLower[i] === patternLower[patternIdx]) {
+            matchedIndices.push(i);
+            // Base score for match
+            score += 1;
+            // Bonus for consecutive matches
+            if (lastMatchIdx === i - 1) {
+                consecutiveCount++;
+                score += consecutiveCount * 2;
+            }
+            else {
+                consecutiveCount = 0;
+            }
+            // Bonus for match at start of string
+            if (i === 0) {
+                score += 10;
+            }
+            // Bonus for match at word boundary (after space, underscore, or uppercase)
+            if (i > 0) {
+                const prevChar = target[i - 1];
+                const currChar = target[i];
+                if (prevChar === ' ' || prevChar === '_' || prevChar === '-') {
+                    score += 5;
+                }
+                else if (currChar === currChar.toUpperCase() && currChar !== currChar.toLowerCase()) {
+                    // CamelCase boundary
+                    score += 3;
+                }
+            }
+            lastMatchIdx = i;
+            patternIdx++;
+        }
+    }
+    // Bonus for shorter target strings (prefer more specific matches)
+    score += Math.max(0, 20 - target.length);
+    // Bonus if pattern matches significant portion of target
+    const coverageRatio = pattern.length / target.length;
+    score += Math.floor(coverageRatio * 10);
+    return {
+        text: target,
+        score,
+        matchedIndices
+    };
+}
+/**
+ * Search through an array of strings and return matches sorted by score.
+ *
+ * @param pattern - The search pattern
+ * @param items - Array of strings to search
+ * @param limit - Maximum number of results to return (default: all)
+ * @returns Array of FuzzyMatch objects sorted by score (highest first)
+ */
+export function fuzzySearch(pattern, items, limit) {
+    if (!pattern) {
+        // Return all items with zero score when no pattern
+        const results = items.map((text) => ({ text, score: 0, matchedIndices: [] }));
+        return limit ? results.slice(0, limit) : results;
+    }
+    const matches = [];
+    for (const item of items) {
+        const match = fuzzyMatch(pattern, item);
+        if (match) {
+            matches.push(match);
+        }
+    }
+    // Sort by score descending
+    matches.sort((a, b) => b.score - a.score);
+    return limit ? matches.slice(0, limit) : matches;
+}
+/**
+ * Highlight matched characters in a string by wrapping them in a specified tag.
+ * Returns an array of segments with matched/unmatched flags for rendering.
+ *
+ * @param text - The original text
+ * @param matchedIndices - Array of indices that matched
+ * @returns Array of text segments with isMatch flag
+ */
+export function highlightMatches(text, matchedIndices) {
+    if (!matchedIndices.length) {
+        return [{ text, isMatch: false }];
+    }
+    const matchSet = new Set(matchedIndices);
+    const segments = [];
+    let currentSegment = '';
+    let currentIsMatch = matchSet.has(0);
+    for (let i = 0; i < text.length; i++) {
+        const isMatch = matchSet.has(i);
+        if (isMatch === currentIsMatch) {
+            currentSegment += text[i];
+        }
+        else {
+            if (currentSegment) {
+                segments.push({ text: currentSegment, isMatch: currentIsMatch });
+            }
+            currentSegment = text[i];
+            currentIsMatch = isMatch;
+        }
+    }
+    if (currentSegment) {
+        segments.push({ text: currentSegment, isMatch: currentIsMatch });
+    }
+    return segments;
+}

package/package.json

@@ -1,78 +1,78 @@
 {
-  "name": "@shotleybuilder/svelte-table-kit",
-  "version": "0.6.0",
-  "description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
-  "author": "Sertantai",
-  "license": "MIT",
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "table",
-    "datagrid",
-    "tanstack",
-    "data-table",
-    "airtable",
-    "headless",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/shotleybuilder/svelte-table-kit.git"
-  },
-  "bugs": {
-    "url": "https://github.com/shotleybuilder/svelte-table-kit/issues"
-  },
-  "homepage": "https://github.com/shotleybuilder/svelte-table-kit#readme",
-  "type": "module",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./styles": "./dist/styles/table-kit.css"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:run": "vitest run",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0",
-    "@tanstack/svelte-table": "^8.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@tanstack/svelte-table": "^8.21.3",
-    "@types/eslint": "^9.6.0",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "publint": "^0.1.9",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.11",
-    "vitest": "^2.0.0"
-  }
+	"name": "@shotleybuilder/svelte-table-kit",
+	"version": "0.12.0",
+	"description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
+	"author": "Sertantai",
+	"license": "MIT",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"table",
+		"datagrid",
+		"tanstack",
+		"data-table",
+		"airtable",
+		"headless",
+		"typescript"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/shotleybuilder/svelte-table-kit.git"
+	},
+	"bugs": {
+		"url": "https://github.com/shotleybuilder/svelte-table-kit/issues"
+	},
+	"homepage": "https://github.com/shotleybuilder/svelte-table-kit#readme",
+	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./styles": "./dist/styles/table-kit.css"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"test:run": "vitest run",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0 || ^5.0.0",
+		"@tanstack/svelte-table": "^8.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tanstack/svelte-table": "^8.21.3",
+		"@types/eslint": "^9.6.0",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.11",
+		"vitest": "^2.0.0"
+	}
 }