@shotleybuilder/svelte-table-kit 0.4.0 → 0.5.1

package/README.md

@@ -66,6 +66,7 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 **AI-Ready:**
 - 🤖 JSON-schema driven configuration
 - 🧠 AI agents can generate table configs from natural language
+- ⚡ **Reactive config prop** - Update table state dynamically without remounting (v0.5.0+)
 - 📋 Preset configurations for common use cases
 - 🔧 Programmatic table setup and state management
 
@@ -135,9 +136,18 @@ Customize initial table state programmatically:
   {data}
   {columns}
   config={{
-    defaultColumnOrder: ['name', 'role', 'age', 'id'],  // Set initial column order
-    defaultColumnSizing: { name: 200, role: 150 },      // Set initial column widths
-    defaultVisibleColumns: ['name', 'role', 'age']      // Hide 'id' column initially
+    id: 'my-view-v1',
+    version: '1.0',
+    defaultColumnOrder: ['name', 'role', 'age', 'id'],
+    defaultColumnSizing: { name: 200, role: 150 },
+    defaultVisibleColumns: ['name', 'role', 'age'],
+    defaultFilters: [
+      { id: 'f1', field: 'role', operator: 'equals', value: 'Developer' }
+    ],
+    defaultSorting: [
+      { columnId: 'name', direction: 'asc' }
+    ],
+    filterLogic: 'and'
   }}
   features={{
     columnVisibility: true,
@@ -148,6 +158,66 @@ Customize initial table state programmatically:
 />
 ```
 
+### Reactive Configuration (v0.5.0+)
+
+**The `config` prop is fully reactive** - update it dynamically to change table state without remounting:
+
+```svelte
+<script>
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
+
+  let tableConfig = $state({
+    id: 'query-1',
+    version: '1.0',
+    defaultFilters: [
+      { id: 'f1', field: 'status', operator: 'equals', value: 'active' }
+    ]
+  });
+
+  // Update config - table reacts automatically
+  function showPendingItems() {
+    tableConfig = {
+      id: 'query-2',  // New ID triggers update
+      version: '1.0',
+      defaultFilters: [
+        { id: 'f1', field: 'status', operator: 'equals', value: 'pending' }
+      ]
+    };
+  }
+</script>
+
+<button on:click={showPendingItems}>Show Pending</button>
+<TableKit {data} {columns} config={tableConfig} persistState={false} />
+```
+
+**Perfect for AI-driven tables:**
+
+```svelte
+<script>
+  let aiConfig = $state(undefined);
+
+  async function askAI(question) {
+    const response = await fetch('/api/nl-query', {
+      method: 'POST',
+      body: JSON.stringify({ question })
+    });
+    aiConfig = await response.json();  // Table updates automatically
+  }
+</script>
+
+<input
+  placeholder="Ask a question about the data..."
+  on:submit={(e) => askAI(e.target.value)}
+/>
+<TableKit {data} {columns} config={aiConfig} persistState={false} />
+```
+
+**Key Points:**
+- Config changes detected by comparing `config.id`
+- Set `persistState={false}` to prevent localStorage conflicts
+- When config is active, localStorage is automatically ignored
+- No `{#key}` blocks needed - updates are smooth and instant
+
 ### Feature Flags
 
 Control which features are enabled:
@@ -225,10 +295,10 @@ TableKit is headless by default. You can:
 |------|------|---------|-------------|
 | `data` | `T[]` | `[]` | Table data array |
 | `columns` | `ColumnDef<T>[]` | `[]` | Column definitions |
-| `config` | `TableConfig` | `undefined` | AI-generated or preset config |
+| `config` | `TableConfig` | `undefined` | Reactive table configuration (requires `id` and `version`) |
 | `features` | `TableFeatures` | All enabled | Feature flags |
 | `storageKey` | `string` | `undefined` | LocalStorage key for persistence |
-| `persistState` | `boolean` | `true` | Enable state persistence |
+| `persistState` | `boolean` | `true` | Enable state persistence (auto-disabled when config is active) |
 | `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Theme mode |
 | `align` | `'left' \| 'center' \| 'right'` | `'left'` | Column text alignment |
 | `rowHeight` | `'short' \| 'medium' \| 'tall' \| 'extra_tall'` | `'medium'` | Row height preset |
@@ -237,6 +307,25 @@ TableKit is headless by default. You can:
 | `onRowSelect` | `(rows: T[]) => void` | `undefined` | Row selection handler |
 | `onStateChange` | `(state: TableState) => void` | `undefined` | State change handler |
 
+### TableConfig Type
+
+```typescript
+interface TableConfig {
+  id: string;                              // Required: Unique identifier for change detection
+  version: string;                         // Required: Config version
+  defaultColumnOrder?: string[];           // Column IDs in display order
+  defaultColumnSizing?: Record<string, number>;  // Column widths in pixels
+  defaultVisibleColumns?: string[];        // Visible column IDs (others hidden)
+  defaultFilters?: FilterCondition[];      // Initial filter conditions
+  defaultSorting?: SortConfig[];           // Initial sort configuration
+  filterLogic?: 'and' | 'or';              // Filter combination logic
+  pagination?: {
+    pageSize: number;
+    pageSizeOptions?: number[];
+  };
+}
+```
+
 ---
 
 ## 🎯 Use Cases

package/dist/TableKit.svelte

@@ -47,32 +47,75 @@ 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) : config?.defaultColumnOrder || []
-);
+let columnVisibility = writable({});
+let columnSizing = writable({});
+let columnFilters = writable([]);
+let columnOrder = writable([]);
 let filterConditions = writable([]);
 let filterLogic = writable("and");
 let filterBarExpanded = false;
+let previousConfigId = config?.id;
+let configInitialized = false;
 let grouping = writable([]);
 let expanded = writable(true);
 let groupBarExpanded = false;
+$: {
+  const configChanged = config?.id && config.id !== previousConfigId;
+  const hasConfig = config !== void 0 && config !== null;
+  if (hasConfig && config && (configChanged || !configInitialized)) {
+    if (config.defaultColumnOrder && config.defaultColumnOrder.length > 0) {
+      columnOrder.set(config.defaultColumnOrder);
+    }
+    if (config.defaultVisibleColumns && columns.length > 0) {
+      const visibilityMap = {};
+      columns.forEach((col) => {
+        const colId = col.accessorKey || col.id;
+        if (config && config.defaultVisibleColumns) {
+          visibilityMap[colId] = config.defaultVisibleColumns.includes(colId);
+        }
+      });
+      columnVisibility.set(visibilityMap);
+    }
+    if (config.defaultSorting) {
+      const tanstackSorting = config.defaultSorting.map((sort) => ({
+        id: sort.columnId,
+        desc: sort.direction === "desc"
+      }));
+      sorting.set(tanstackSorting);
+    }
+    if (config.defaultFilters) {
+      filterConditions.set(config.defaultFilters);
+    }
+    if (config.filterLogic) {
+      filterLogic.set(config.filterLogic);
+    }
+    if (config.defaultColumnSizing) {
+      columnSizing.set(config.defaultColumnSizing);
+    }
+    previousConfigId = config.id;
+    configInitialized = true;
+  } else if (!hasConfig && persistState && storageKey && !configInitialized) {
+    columnOrder.set(loadColumnOrder(storageKey) || []);
+    columnVisibility.set(loadColumnVisibility(storageKey) || {});
+    columnSizing.set(loadColumnSizing(storageKey) || {});
+    columnFilters.set(loadColumnFilters(storageKey) || []);
+    configInitialized = true;
+  } else if (!hasConfig && !configInitialized) {
+    configInitialized = true;
+  }
+}
 $: horizontalPadding = columnSpacing === "narrow" ? 0.5 : columnSpacing === "wide" ? 2 : 1;
 $: verticalPadding = rowHeight === "short" ? 0.375 : rowHeight === "tall" ? 1 : rowHeight === "extra_tall" ? 1.5 : 0.75;
 $: filteredData = applyFilters(data, $filterConditions, $filterLogic);
-$: if (persistState && storageKey && isBrowser) {
-  saveColumnVisibility(storageKey, $columnVisibility);
-  saveColumnSizing(storageKey, $columnSizing);
-  saveColumnFilters(storageKey, $columnFilters);
-  saveColumnOrder(storageKey, $columnOrder);
+$: {
+  const hasActiveConfig = config !== void 0 && config !== null;
+  const shouldPersist = persistState && !hasActiveConfig && storageKey && isBrowser;
+  if (shouldPersist) {
+    saveColumnVisibility(storageKey, $columnVisibility);
+    saveColumnSizing(storageKey, $columnSizing);
+    saveColumnFilters(storageKey, $columnFilters);
+    saveColumnOrder(storageKey, $columnOrder);
+  }
 }
 let showColumnPicker = false;
 let columnPickerButton = null;

package/dist/types.d.ts

@@ -38,6 +38,7 @@ export interface TableConfig {
         right?: string[];
     };
     defaultFilters?: FilterCondition[];
+    filterLogic?: FilterLogic;
     defaultSorting?: SortConfig[];
     pagination?: {
         pageSize: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotleybuilder/svelte-table-kit",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
   "author": "Sertantai",
   "license": "MIT",