@shotleybuilder/svelte-table-kit 0.10.1 → 0.12.0

package/README.md

@@ -26,7 +26,7 @@ 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
@@ -35,6 +35,7 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - **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

package/dist/TableKit.svelte

@@ -47,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({});
@@ -79,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);
         }
@@ -293,7 +296,7 @@ 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;
@@ -333,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
   });
 }
@@ -639,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'
@@ -660,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}

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(): {} & {
@@ -23,14 +23,14 @@ declare class __sveltets_Render<T> {
         'toolbar-left': {};
         empty: {};
         cell: {
-            cell: import("@tanstack/table-core").Cell<Record<string, any>, unknown>;
+            cell: import("@tanstack/table-core").Cell<T, unknown>;
             column: string;
         };
     };
 }
-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/FilterCondition.svelte

@@ -1,5 +1,6 @@
 <script>import { loadFilterColumnOrderMode, saveFilterColumnOrderMode } from "../stores/persistence";
 import { fuzzyMatch, highlightMatches } from "../utils/fuzzy";
+import { getOperatorsForType } from "../utils/filters";
 import { onMount, tick } from "svelte";
 export let condition;
 export let columns;
@@ -131,25 +132,30 @@ $: filteredColumns = (() => {
 $: if (filteredColumns) {
   highlightedIndex = 0;
 }
+$: selectedColumn = condition.field ? columns.find((c) => getColumnId(c) === condition.field) : null;
 $: selectedColumnLabel = (() => {
   if (!condition.field) return "";
-  const col = columns.find((c) => getColumnId(c) === condition.field);
-  return col ? getColumnLabel(col) : condition.field;
+  return selectedColumn ? getColumnLabel(selectedColumn) : condition.field;
 })();
-const operatorOptions = [
-  { 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: "<=" }
-];
+$: columnDataType = (() => {
+  if (!selectedColumn) return "text";
+  const meta = selectedColumn.meta;
+  return meta?.dataType || "text";
+})();
+$: selectOptions = (() => {
+  if (!selectedColumn) return [];
+  const meta = selectedColumn.meta;
+  return meta?.selectOptions || [];
+})();
+$: operatorOptions = getOperatorsForType(columnDataType);
+$: {
+  if (condition.field && operatorOptions.length > 0) {
+    const currentOperatorValid = operatorOptions.some((op) => op.value === condition.operator);
+    if (!currentOperatorValid) {
+      onUpdate({ ...condition, operator: "equals" });
+    }
+  }
+}
 function selectColumn(col) {
   const field = getColumnId(col);
   onUpdate({ ...condition, field });
@@ -339,54 +345,102 @@ $: valueDisabled = condition.operator === "is_empty" || condition.operator === "
 	</select>
 
 	<div class="value-input-wrapper" bind:this={valueSuggestionsRef}>
-		<input
-			bind:this={valueInputRef}
-			type="text"
-			class="value-input"
-			value={condition.value || ''}
-			on:input={handleValueChange}
-			on:focus={handleValueFocus}
-			on:keydown={handleValueKeydown}
-			disabled={valueDisabled}
-			placeholder={valueDisabled ? 'N/A' : numericRange ? `${numericRange.min} - ${numericRange.max}` : 'Enter value...'}
-			autocomplete="off"
-		/>
-
-		{#if numericRange && !valueDisabled}
-			<div class="numeric-range-hint">
-				Range: {numericRange.min} - {numericRange.max}
-			</div>
-		{/if}
-
-		{#if showValueSuggestions && filteredValueSuggestions.length > 0 && !numericRange}
-			<div class="value-suggestions">
-				{#each filteredValueSuggestions as { value, matchedIndices }, i}
-					<button
-						class="suggestion-option"
-						class:highlighted={i === valueSuggestionIndex}
-						on:click={() => selectValueSuggestion(value)}
-						on:mouseenter={() => (valueSuggestionIndex = i)}
-						type="button"
-					>
-						{#if matchedIndices.length > 0}
-							{#each highlightMatches(value, matchedIndices) as segment}
-								{#if segment.isMatch}
-									<mark class="match-highlight">{segment.text}</mark>
-								{:else}
-									{segment.text}
-								{/if}
-							{/each}
-						{:else}
-							{value}
-						{/if}
-					</button>
+		{#if columnDataType === 'boolean'}
+			<!-- Boolean: dropdown with true/false -->
+			<select
+				class="value-input"
+				value={condition.value || ''}
+				on:change={handleValueChange}
+				disabled={valueDisabled}
+			>
+				<option value="">Select...</option>
+				<option value="true">True</option>
+				<option value="false">False</option>
+			</select>
+		{:else if columnDataType === 'select' && selectOptions.length > 0}
+			<!-- Select: dropdown with options from meta -->
+			<select
+				class="value-input"
+				value={condition.value || ''}
+				on:change={handleValueChange}
+				disabled={valueDisabled}
+			>
+				<option value="">Select...</option>
+				{#each selectOptions as opt}
+					<option value={opt.value}>{opt.label}</option>
 				{/each}
-				{#if columnValues.length > 50}
-					<div class="suggestions-overflow">
-						and {columnValues.length - 50} more...
-					</div>
-				{/if}
-			</div>
+			</select>
+		{:else if columnDataType === 'date'}
+			<!-- Date: date input -->
+			<input
+				bind:this={valueInputRef}
+				type="date"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				disabled={valueDisabled}
+			/>
+		{:else if columnDataType === 'number'}
+			<!-- Number: number input with range hint -->
+			<input
+				bind:this={valueInputRef}
+				type="number"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				disabled={valueDisabled}
+				placeholder={valueDisabled ? 'N/A' : numericRange ? `${numericRange.min} - ${numericRange.max}` : 'Enter number...'}
+			/>
+			{#if numericRange && !valueDisabled}
+				<div class="numeric-range-hint">
+					Range: {numericRange.min} - {numericRange.max}
+				</div>
+			{/if}
+		{:else}
+			<!-- Text: text input with autocomplete suggestions -->
+			<input
+				bind:this={valueInputRef}
+				type="text"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				on:focus={handleValueFocus}
+				on:keydown={handleValueKeydown}
+				disabled={valueDisabled}
+				placeholder={valueDisabled ? 'N/A' : 'Enter value...'}
+				autocomplete="off"
+			/>
+
+			{#if showValueSuggestions && filteredValueSuggestions.length > 0}
+				<div class="value-suggestions">
+					{#each filteredValueSuggestions as { value, matchedIndices }, i}
+						<button
+							class="suggestion-option"
+							class:highlighted={i === valueSuggestionIndex}
+							on:click={() => selectValueSuggestion(value)}
+							on:mouseenter={() => (valueSuggestionIndex = i)}
+							type="button"
+						>
+							{#if matchedIndices.length > 0}
+								{#each highlightMatches(value, matchedIndices) as segment}
+									{#if segment.isMatch}
+										<mark class="match-highlight">{segment.text}</mark>
+									{:else}
+										{segment.text}
+									{/if}
+								{/each}
+							{:else}
+								{value}
+							{/if}
+						</button>
+					{/each}
+					{#if columnValues.length > 50}
+						<div class="suggestions-overflow">
+							and {columnValues.length - 50} more...
+						</div>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>
 

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

@@ -3,10 +3,11 @@ export { default as FilterBar } from './components/FilterBar.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';
-export type { TableKitProps, TableConfig, ViewPreset, FilterCondition, FilterOperator, FilterLogic, ColumnOrderMode, SortConfig, ClassNameMap, TableFeatures, TableState } from './types';
+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

@@ -11,7 +11,7 @@ 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

package/dist/types.d.ts

@@ -55,6 +55,25 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@shotleybuilder/svelte-table-kit",
-	"version": "0.10.1",
+	"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",