@lavalogic/scoria 0.37.18 → 0.37.19

package/dist/Components/Table/Body/TableBody.svelte

@@ -183,6 +183,11 @@
   font-size: 0.875rem;
 }
 
+.datatable-row.quick-filter-row > .cell {
+  border-right: solid 1px #cbd4da;
+  box-sizing: border-box;
+}
+
 .datatable-row.quick-filter-row {
   transition: line-height 0.2s ease, height 0.2s ease;
   height: 61px;

package/dist/Components/Table/ColumnFactory.svelte.d.ts

@@ -28,16 +28,4 @@ export interface ColumnSpecInternals<TRow extends object> {
  *  spec was not produced by `createColumnFactory(...)` (defensive; the
  *  public type's `_scoriaColumnSpec` brand prevents this at compile time). */
 export declare function unwrapColumnSpec<TRow extends object>(spec: ColumnSpec<TRow>): ColumnSpecInternals<TRow>;
-/**
- * Construct a `ColumnFactory<TRow>` for use inside the `columns:` closure of
- * `createTable({ ... })`. Each method on the returned object is a typed
- * builder that wraps the matching internal `<Name>Def` constructor and
- * returns a public `ColumnSpec` whose internal payload is hidden behind a
- * symbol-keyed property.
- *
- * Consumers do not call this directly. It is exported so the `createTable`
- * implementation can instantiate it inside the user-supplied closure and so
- * tests can exercise individual factory methods without round-tripping
- * through a full `createTable(...)` call.
- */
 export declare function createColumnFactory<TRow extends object>(): ColumnFactory<TRow>;

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -178,6 +178,30 @@ function normaliseOptionsLoader(options) {
  * tests can exercise individual factory methods without round-tripping
  * through a full `createTable(...)` call.
  */
+/** Format a Date or ISO-8601 date string for display using the browser
+ *  locale. Returns null / empty input unchanged. Used by `col.display` when
+ *  the column declares `filterValueType: 'Date'` so backend timestamps
+ *  surface as a properly localised date+time string instead of the raw
+ *  ISO payload (`2026-04-16T09:44:11+01:00`). */
+function formatLocaleDate(value) {
+    if (value == null || value === '') {
+        return value;
+    }
+    let d;
+    if (value instanceof Date) {
+        d = value;
+    }
+    else if (typeof value === 'string' || typeof value === 'number') {
+        const parsed = new Date(value);
+        if (!Number.isNaN(parsed.getTime())) {
+            d = parsed;
+        }
+    }
+    if (d == null) {
+        return value;
+    }
+    return d.toLocaleString();
+}
 export function createColumnFactory() {
     const factory = {
         // ─── Accessor kinds ─────────────────────────────────────────
@@ -301,10 +325,26 @@ export function createColumnFactory() {
                             : opts.filterValueType === 'String'
                                 ? 'text'
                                 : 'display';
+            // When the consumer flagged the column as a Date filter, auto-
+            // format the displayed value via `toLocaleString` so timestamps
+            // surface in the user's locale rather than the raw ISO 8601
+            // payload returned by the server. Promise / scalar / null
+            // inputs are all handled. Filter / sort logic still operates
+            // on the raw accessor value below.
+            const rawValue = opts.value;
+            const valueAccessor = opts.filterValueType === 'Date'
+                ? (row, index) => {
+                    const v = rawValue(row, index);
+                    if (v instanceof Promise) {
+                        return v.then(formatLocaleDate);
+                    }
+                    return formatLocaleDate(v);
+                }
+                : rawValue;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
-                accessorFn: opts.value,
+                accessorFn: valueAccessor,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
                 // typed kinds where the factory pins one based on the

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -35,6 +35,24 @@
 
 	const customFilter = $derived(customFilters?.get(def.id));
 
+	/** Human-readable label used by every inner input (QuerySelect /
+	 *  MultiSelect / SingleSelect / etc.). Priority:
+	 *  1. The column's `header` (when it is a plain string, which is the
+	 *     usual case in flowms migrations).
+	 *  2. The customFilter's `label` (set on the remoteFilters entry).
+	 *  3. The raw `customFilter.id` (last-ditch fallback).
+	 *  Avoids surfacing dotted-path / camelCase IDs like
+	 *  `orderLines.allowSplitFulfilment` as the visible label. */
+	const displayLabel: string = $derived.by(() => {
+		if (typeof def.header === 'string' && def.header.length > 0) {
+			return def.header;
+		}
+		if (customFilter?.label) {
+			return customFilter.label;
+		}
+		return customFilter?.id ?? def.id;
+	});
+
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 
 	let value: unknown = $state(null);
@@ -263,7 +281,7 @@
 {#if isSearchable}
 	<!-- TODO remove this check once datePicker is supported -->
 	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{def.header}</label>
+		<label for={inputId}>{displayLabel}</label>
 	{/if}
 	<div class="row">
 		{#if def instanceof DateInputDef}
@@ -353,7 +371,7 @@
 				{#await options then options}
 					{#if hasQuery(customFilter)}
 						{#if customFilter.valueAsObject !== true}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -370,7 +388,7 @@
 								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -389,7 +407,7 @@
 						{/if}
 					{:else}
 						<MultiSelect
-							label={customFilter.id}
+							label={displayLabel}
 							labelProp="label"
 							valueProp="value"
 							name={customFilter.objectName ?? 'Item'}

package/dist/Components/Table/NestedTable.svelte

@@ -28,7 +28,12 @@
 	> = Object.freeze({
 		allowCopy: false,
 		enableResize: false,
-		allowColumnReordering: false,
+		// Was `false`; flipped to `true` so nested-table columns can be
+		// reordered and pinned by default like the outer table. The
+		// `inner.allowReorder` option on `col.expand` (and the matching
+		// `allowReorder` on top-level `createTable`) still lets callers
+		// opt out per inner table when they want to lock the layout.
+		allowColumnReordering: true,
 		allowQuickFiltering: true,
 		allowAdvancedFiltering: true,
 		toolbar: ToolbarPosition.None,

package/dist/Components/Table/Table.svelte

@@ -129,10 +129,21 @@
 				}
 
 				element?.focus({ preventScroll: true });
+				// Same pinned-cell horizontal-scroll skip as the focusEnd
+				// effect below. Sticky-pinned cells are always visually
+				// in view, but their underlying layout position is at
+				// their real column track, so an unconditional
+				// `inline: 'nearest'` here scrolls the table sideways
+				// every time focus lands inside a pinned column (e.g.
+				// every click on a right-pinned Actions button).
+				const startCell = element?.closest('[role="cell"]');
+				const isStartPinned =
+					startCell?.classList.contains('pinned-left') ||
+					startCell?.classList.contains('pinned-right');
 				element?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest',
+					inline: isStartPinned ? undefined : 'nearest',
 				});
 			}
 		});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.18",
+  "version": "0.37.19",
   "publishConfig": {
     "access": "restricted"
   },