@lavalogic/scoria 0.37.10 → 0.37.12

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

@@ -205,6 +205,7 @@
 .virtual-spacer {
   display: block;
   border: none;
-  background: transparent;
   pointer-events: none;
+  --row-stripe-height: var(--height, 3rem);
+  background-image: repeating-linear-gradient(to bottom, #ffffff 0, #ffffff var(--row-stripe-height), #f4f7f9 var(--row-stripe-height), #f4f7f9 calc(2 * var(--row-stripe-height)));
 }</style>

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

@@ -100,7 +100,14 @@ function commonProps(opts, kind) {
     const defaultWidth = KIND_DEFAULT_WIDTHS[kind];
     return {
         header: opts.header,
-        minSize: opts.minWidth,
+        // Set minSize from the per-kind default too so
+        // `TableContext.registerDefs` does NOT run the canvas-based
+        // `measureHeaderWidth` fallback. That fallback floors every
+        // accessor column to ~130px when quick-filtering is enabled
+        // (it returns max(headerWidth, "Lorem Ipsum Dolor" width)),
+        // which equalises every accessor column width and erases the
+        // per-kind differentiation the factory just put in place.
+        minSize: opts.minWidth ?? defaultWidth,
         width: opts.width ?? defaultWidth,
         allowSorting: opts.allowSorting,
         allowFiltering: opts.allowFiltering,
@@ -249,9 +256,27 @@ export function createColumnFactory() {
             const normalisedOptions = opts.getOptions
                 ? normaliseOptionsLoader(opts.getOptions)
                 : undefined;
+            // Display columns have no intrinsic kind (the value comes from an
+            // arbitrary `value: (row) => ...` thunk) so the generic 'display'
+            // default (150px) is the fallback. When the consumer DOES pass a
+            // `filterValueType`, treat it as a hint about the rendered shape
+            // of the column and pick the matching per-kind default so a table
+            // full of `col.display` columns ends up visually differentiated
+            // instead of every column collapsing to the same 150px floor.
+            const inferredKind = opts.filterValueType === 'Number'
+                ? 'number'
+                : opts.filterValueType === 'Date'
+                    ? 'date'
+                    : opts.filterValueType === 'Bool'
+                        ? 'checkbox'
+                        : opts.filterValueType === 'Select'
+                            ? 'select'
+                            : opts.filterValueType === 'String'
+                                ? 'text'
+                                : 'display';
             const def = new DisplayDef({
                 id,
-                ...commonProps(opts, 'display'),
+                ...commonProps(opts, inferredKind),
                 accessorFn: opts.value,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
@@ -307,7 +332,7 @@ export function createColumnFactory() {
             const def = new ValidityDef({
                 id,
                 header: opts?.header ?? '',
-                minSize: opts?.minWidth,
+                minSize: opts?.minWidth ?? KIND_DEFAULT_WIDTHS.validity,
                 width: opts?.width ?? KIND_DEFAULT_WIDTHS.validity,
                 defaultHidden: opts?.defaultHidden,
                 resizable: opts?.resizable ?? false,

package/dist/Components/Table/Table.svelte

@@ -356,17 +356,20 @@
 	//   20px to match the existing visual).
 	// - Each other track uses one of two strategies based on the
 	//   column's `userResized` flag:
-	//   - `userResized = false` (default): `minmax(width, 1fr)`. The
-	//     column flexes to share the row's remaining horizontal space
-	//     so the grid fills the container, and it automatically takes
-	//     back any space a sibling column gives up when shrunk - this
-	//     means the table never ends up narrower than its container
-	//     while any column is still in the flexible set.
+	//   - `userResized = false` (default): `minmax(width, max-content)`.
+	//     The column is at least `width` wide (the per-kind default
+	//     set by the column factory, or any explicit `width` the caller
+	//     supplied) and grows up to its content's natural width. This
+	//     mirrors the legacy `<table>` element's auto-layout: columns
+	//     visually differentiate by content rather than collapsing to
+	//     equal `1fr` shares of leftover space. The grid container
+	//     (`.datatable-grid`) has `min-width: max-content` and the
+	//     scroll host (`.datatable`) has `overflow-x: auto`, so when
+	//     the summed track widths exceed the viewport the table
+	//     scrolls horizontally rather than crushing every column down.
 	//   - `userResized = true`: `${width}px` (fixed). The column sits
 	//     at exactly the size the user dragged it to, and dragging the
-	//     handle again only changes this column - other user-resized
-	//     columns keep their explicit widths and non-resized columns
-	//     just adjust their flex share.
+	//     handle again only changes this column.
 	// - Pinned and centre columns use the same per-column rule so
 	//   toggling a column's pin state does not change its width.
 	// - Sticky-cell offsets are read from `_columnRenderedWidths`
@@ -377,7 +380,7 @@
 		const track = (col: { columnDef: { width: number; userResized: boolean } }) =>
 			col.columnDef.userResized
 				? `${col.columnDef.width}px`
-				: `minmax(${col.columnDef.width}px, 1fr)`;
+				: `minmax(${col.columnDef.width}px, max-content)`;
 		const tracks: Array<string> = ['20px'];
 		for (const col of leftColumns) {
 			tracks.push(track(col));

package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js

@@ -50,7 +50,17 @@ export class VirtualisationState {
     constructor(deps, options = {}) {
         this._deps = deps;
         this._virtualisationThreshold = options.threshold ?? 100;
-        this._overscan = options.overscan ?? 10;
+        // Overscan controls how many rows above/below the viewport are
+        // kept rendered so a fast wheel-scroll does not surface an empty
+        // grey band before the next paint. The previous default of 10
+        // was too tight on tables with hundreds of rows: a single wheel
+        // flick easily moves the viewport past the overscan band before
+        // the `$derived` chain reschedules and re-renders the visible
+        // slice. 30 rows is enough to absorb a typical wheel flick at
+        // 60Hz while still keeping the rendered cell count bounded
+        // (~52 rows for a 600px viewport at the default 28-48px row
+        // height: 12 visible + 30 below + 10 above = 52).
+        this._overscan = options.overscan ?? 30;
     }
     get virtualisationThreshold() {
         return this._virtualisationThreshold;

package/dist/Components/Table/Types/Public/CreateTableOptions.d.ts

@@ -3,6 +3,7 @@ import type { AnyEditEvent } from './AnyEditEvent.js';
 import type { ColumnFactory } from './ColumnFactory.js';
 import type { ColumnSpec } from './ColumnSpec.js';
 import type { LiteralRowIdKey } from './KeyConstraints.js';
+import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
 import type { RowSource } from './RowSource.js';
 import type { SelectionOptions } from './SelectionOptions.js';
 import type { TableInitialState } from './TableInitialState.js';
@@ -35,6 +36,16 @@ export interface CreateTableOptions<TRow extends object, TRowId extends Primitiv
     /** Column declarations. The closure receives a typed `ColumnFactory<TRow>`;
      *  return the column specs in memory order. */
     columns: (col: ColumnFactory<TRow>) => ReadonlyArray<ColumnSpec<TRow>>;
+    /** Optional registry of custom server-driven filters, keyed by column id.
+     *  Each entry provides the metadata the advanced filter panel needs to
+     *  render an input for a column that does not have a built-in `filterFn`
+     *  (such as `col.filterOnly(...)` chips or nested-path display columns).
+     *
+     *  Passed as a thunk so the caller can return a `SvelteMap` whose
+     *  reactive identity is preserved across re-renders. The same map is
+     *  typically also handed to `createRemoteRowSource({ remoteFilters })`
+     *  so the server query and the filter UI agree on the available keys. */
+    remoteFilters?: () => CustomRemoteFilters<unknown> | undefined;
     /** Selection. Defaults to `{ mode: 'multiple' }` with internal map ownership. */
     selection?: SelectionOptions<TRow, TRowId>;
     /** Persistence. Defaults to all layers enabled. Pass `false` to disable

package/dist/Components/Table/Types/Public/RowSource.d.ts

@@ -1,6 +1,7 @@
 import type { RefWrapper } from '../../../../Types/Internal/RefWrapper.js';
 import type { ColumnFiltersState } from '../Filtering/ColumnFiltersState.js';
 import type { SortingState } from '../DataRepository/SortingState.js';
+import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
 /**
  * Data source for a Table. One of three variants:
  *
@@ -71,6 +72,14 @@ export interface CustomRowSource<TRow extends object> {
      *  `AbortSignal` so consumers can cancel an in-flight request when its
      *  result is superseded. */
     fetch: (request: RowFetchRequest) => Promise<RowFetchResponse<TRow>>;
+    /** Optional registry of server-driven filters keyed by column id. When
+     *  set, the table's advanced filter panel will render a chip for each
+     *  entry alongside the standard column-derived chips. Typically the
+     *  custom-rows factory (e.g. `createRemoteRowSource`) populates this
+     *  from the same map it uses to build the request URL, so the UI and
+     *  the server query stay in sync without the caller having to wire the
+     *  map twice. */
+    remoteFilters?: CustomRemoteFilters<unknown>;
 }
 /** Argument passed to `CustomRowSource.fetch`. */
 export interface RowFetchRequest {

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

@@ -69,7 +69,15 @@ export function createTable(options) {
         }
         return internal.def;
     });
-    const defsWrapper = { defs };
+    // remoteFilters resolution order:
+    //   1. Explicit `options.remoteFilters` thunk on createTable.
+    //   2. `kind: 'custom'` row source's `remoteFilters` field (set by
+    //      `createRemoteRowSource` from its own option of the same name).
+    // This means a caller can hand the same `SvelteMap` to the custom
+    // row-source factory once and the filter panel picks it up for free.
+    const remoteFilters = options.remoteFilters?.() ??
+        (options.rows.kind === 'custom' ? options.rows.remoteFilters : undefined);
+    const defsWrapper = remoteFilters ? { defs, remoteFilters } : { defs };
     // ── 3. Construct the repository for the chosen row source ──────
     const repository = makeRepository(options.name, options.rows, options.getUserId);
     // ── 4. Build the `onEditCell` wrapper ──────────────────────────

package/package.json

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