@spaethtech/svelte-ui 0.21.1-dev.111.c0572e9 → 0.21.1-dev.113.5a2e853

package/dist/components/DataTable.svelte

@@ -148,6 +148,10 @@
   const pageCount = $derived(Math.max(1, Math.ceil(total / grid.perPage)));
   // "Settled" = a result came back AND we're not fetching — only then is empty genuinely "No results".
   const settled = $derived(!!result.current && !result.loading);
+  // A fetch error → shown in the empty-state row (styled) instead of "No results" / spinner. A string
+  // is used as-is, an Error's `.message`, anything else falls back to the localized `loadFailed`.
+  const errorText = (e: unknown): string =>
+    typeof e === "string" ? e : e instanceof Error ? e.message : i18n.messages.loadFailed;
   $effect(() => {
     grid.loading = result.loading;
     if (result.current) {
@@ -358,11 +362,13 @@
           </div>
         {/if}
         <div class="grow self-center text-center {subtle}">
-          {#if settled}
+          {#if result.error}
+            <span class="[color:var(--ui-color-error)]">{errorText(result.error)}</span>
+          {:else if settled}
             {i18n.messages.noResults}.
           {:else}
             <span class="inline-flex items-center gap-2"
-              ><IconLoading class="w-[1em] h-[1em] animate-spin" /> Loading…</span
+              ><IconLoading class="w-[1em] h-[1em] animate-spin" /> {i18n.messages.loading}</span
             >
           {/if}
         </div>

package/dist/data/table/local.d.ts

@@ -6,6 +6,12 @@ export interface LocalFetchOptions<T> {
     caseInsensitive?: boolean;
     /** Instant for resolving `now()` in the query. Called per fetch. Default: `new Date()`. */
     now?: () => Date;
+    /** True while `source` is still arriving (an async load not yet resolved). The table shows its
+     *  Loading row instead of "No results". Called per fetch. Default: `false` (data is ready). */
+    loading?: () => boolean;
+    /** A load failure. Surfaced in the table's empty-state row (styled as an error) instead of
+     *  "No results"; if any rows are present they still render. Called per fetch. Default: none. */
+    error?: () => string | null | undefined;
 }
 /**
  * Build a `FetchFn` that runs entirely in memory over `source`.

package/dist/data/table/local.js

@@ -58,6 +58,10 @@ export function localFetch(source, columns, opts = {}) {
         const total = filtered.length;
         const start = (state.page - 1) * state.perPage;
         const rows = filtered.slice(start, start + state.perPage);
-        return { current: { rows, total }, loading: false, error: undefined };
+        return {
+            current: { rows, total },
+            loading: opts.loading?.() ?? false,
+            error: opts.error?.() ?? undefined,
+        };
     };
 }

package/dist/i18n.d.ts

@@ -15,6 +15,10 @@ export type UiMessages = {
     copyToClipboard: Msg;
     done: Msg;
     noResults: Msg;
+    /** DataTable empty-state while the source is still arriving. */
+    loading: Msg;
+    /** DataTable empty-state when the fetch result carries a non-string error. */
+    loadFailed: Msg;
     previous: Msg;
     next: Msg;
     first: Msg;

package/dist/i18n.js

@@ -16,6 +16,8 @@ export const defaultUiMessages = {
     copyToClipboard: "Copy to clipboard",
     done: "Done",
     noResults: "No results",
+    loading: "Loading…",
+    loadFailed: "Failed to load",
     previous: "Previous",
     next: "Next",
     first: "First",

package/docs/components.md

@@ -433,6 +433,23 @@ Config-driven, responsive 12-column data table over a `DataGrid`.
   whole cell). The cell is a flex box, so a plain inline `<a>text</a>` is text-width — the rest of the
   cell stays an expand/collapse target. Row-click already ignores clicks on `a`/`button`/`input`/…, so
   a link navigates without toggling expand; don't stretch the anchor with `block`/`w-full`.
+- **Empty-state row (Loading → rows | No results | error)**: with no rows the table renders one
+  standard-height row reflecting the fetch result — a **spinner + "Loading…"** while `result.loading`,
+  **"No results"** once settled and empty, or the **error** (styled `--ui-color-error`) when
+  `result.error` is set (a string as-is, an `Error`'s `.message`, else the localized `loadFailed`). An
+  errored result never spins, and the row keeps its height across all three states — so you don't need
+  a separate page banner that contradicts a "No results" table. With `localFetch`, drive this by
+  passing `loading`/`error` getters (below); a remote `query()` that exposes `.error` gets it for free.
+  (`DataGrid.error` is the query-*parse* error surfaced by `<Query>` — a bad filter — which is distinct
+  from this fetch/load error.)
+- **`localFetch(rows, columns, opts?)`** options now include **`loading?: () => boolean`** (show the
+  Loading row instead of "No results" while the source is still arriving) and **`error?: () => string
+  | null | undefined`** (surface a load failure in the empty-state row; rows still render if present).
+  State both once beside the data source:
+  ```ts
+  const fetch = localFetch(() => rows, columns, { getValue: valueOf, loading: () => !loaded, error: () => loadError });
+  const grid = createGrid({ columns, getRowId: (r) => r.id, fetch });
+  ```
 
 ### Query
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.111.c0572e9",
+  "version": "0.21.1-dev.113.5a2e853",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"