@classic-homes/theme-svelte 1.43.0 → 1.44.0

package/dist/lib/components/DataTable.svelte

@@ -637,6 +637,8 @@
                   >
                     {#if canEdit && column.enableEditing}
                       <DataTableEditableCell {row} {column} onSave={handleCellEdit} />
+                    {:else if column.cell}
+                      {@render column.cell(value, row.original)}
                     {:else}
                       {table.getFormattedCellValue(row.original, column)}
                     {/if}

package/dist/lib/components/data-table/DataTableEditableCell.svelte

@@ -146,12 +146,20 @@
     onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && startEditing()}
   >
     <span class="border-b border-dashed border-transparent hover:border-primary">
-      {displayValue}
+      {#if column.cell}
+        {@render column.cell(getColumnValue(row.original, column), row.original)}
+      {:else}
+        {displayValue}
+      {/if}
     </span>
     <span class="sr-only">(double-click to edit)</span>
   </button>
 {:else}
   <span class={cn('relative', className)}>
-    {displayValue}
+    {#if column.cell}
+      {@render column.cell(getColumnValue(row.original, column), row.original)}
+    {:else}
+      {displayValue}
+    {/if}
   </span>
 {/if}

package/dist/lib/components/data-table/DataTableVirtual.svelte

@@ -243,7 +243,11 @@
               style={column.width ? `width: ${column.width}` : 'flex: 1'}
               role="cell"
             >
-              {table.getFormattedCellValue(row.original, column)}
+              {#if column.cell}
+                {@render column.cell(getColumnValue(row.original, column), row.original)}
+              {:else}
+                {table.getFormattedCellValue(row.original, column)}
+              {/if}
             </div>
           {/each}
         </div>

package/dist/lib/types/components.d.ts

@@ -4,6 +4,7 @@
  * These types are exported from components but need to be
  * re-exported from a TypeScript file for proper type inference.
  */
+import type { Snippet } from 'svelte';
 import type { IconName } from '../components/Icon.svelte';
 /**
  * Dropdown Menu Types
@@ -102,8 +103,18 @@ export interface DataTableColumn<T = object> {
      * mirror the guard themselves so cell counts stay in sync.
      */
     hideBelow?: 'sm' | 'md' | 'lg';
-    /** Custom cell render function returning string */
+    /**
+     * Custom cell text. Global search matches it, and it stays the cell's text
+     * (e.g. for `getFormattedCellValue` and exports) when `cell` renders it.
+     */
     format?: (value: unknown, row: T) => string;
+    /**
+     * Custom cell content (e.g. a value with its change underneath). Rendered
+     * in place of the formatted text whenever the cell is not being edited
+     * (editable cells still edit the raw value); `format` still supplies the
+     * cell's text for search and exports.
+     */
+    cell?: Snippet<[value: unknown, row: T]>;
     /** Filter function type or custom filter function */
     filterFn?: DataTableFilterFn<T>;
     /** Options for select/faceted filters */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",