@iyulab/flex-table 0.53.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.55.0] - 2026-10-07
+
+### Added
+
+- **`createArraySource(rows, options)`** and **`ArraySourceController`** (`@iyulab/flex-table/array`) — the in-memory
+  source without React, with the members of `createODataSource` (`getState`, `subscribe`, `setPage`, `setSort`,
+  `setSearch`, `refresh`) plus `update(rows, options)`. A custom-element screen can now switch between a server and
+  an in-memory source the way a React screen switches between `useODataSource` and `useArraySource`.
+
+## [0.54.0] - 2026-10-07
+
+### Added
+
+- **`error`** property — the last load failure (`{ message }`, so a data source's `SourceError` goes in as is). While
+  set, the grid shows `error.message` as an alert where the rows or the empty state would be; a failed query used to
+  look like "No data" unless the app drew its own message beside the grid.
+
 ## [0.53.0] - 2026-10-07
 
 ### Added

package/README.md

@@ -113,6 +113,7 @@ guarantee about a *constrained* host. `height-model.browser.test.ts` pins both s
 | `footerData` | `footer-data` | `Record<string, string \| TemplateResult> \| null` | `null` | Footer/summary row data (keys match column keys) |
 | `emptyMessage` | `empty-message` | `string` | `'No data'` | Shown when `data` is empty |
 | `noMatchingMessage` | `no-matching-message` | `string` | `'No matching data'` | Shown when `data` has rows but every one is hidden by an active column filter |
+| `error` | — | `{ message: string } \| null` | `null` | The last load failure. While set, `error.message` is shown as an alert where the rows or the empty state would be, so a failed query does not look like "no data". Pass a data source's `error` as is |
 | `stylesheets` | — | `CSSStyleSheet[]` | `[]` | Constructable stylesheets adopted into the shadow root alongside the grid's own styles — the escape hatch for styling content a `render` function inserts, since document CSS doesn't cross the shadow boundary. Reassigning swaps the previous set, it doesn't accumulate |
 
 ### Read-only Properties
@@ -816,7 +817,7 @@ The hook returns:
 |---|---|
 | `data` / `totalCount` | Current page rows and the server's total (`@odata.count`). When the server pages its response (`@odata.nextLink`, e.g. a page size smaller than `pageSize`), the hook follows the link until the page is filled; a link outside the request's origin, or one that returns to a page already read, is reported through `error` instead of showing a short page |
 | `loading` | A request is in flight, or none has answered yet (true from the first render until the first response settles, and while `enabled: false`) |
-| `error` | The last failed request, or `null`: `{ message, status?, code?, details?, body? }`. **Render `error.message`** — a failed request otherwise leaves the grid silently empty. Branch on `status` (HTTP), `code` (the server's rejection code, OData `error.code`) and `details` (OData `error.details`); `body` is the parsed response (or its text). A failure with no response — a network error, or a `@odata.nextLink` the hook refused — has a `message` only |
+| `error` | The last failed request, or `null`: `{ message, status?, code?, details?, body? }`. **Pass it to the table** (`error={source.error}`) or render `error.message` yourself — a failed request otherwise leaves the grid silently empty. Branch on `status` (HTTP), `code` (the server's rejection code, OData `error.code`) and `details` (OData `error.details`); `body` is the parsed response (or its text). A failure with no response — a network error, or a `@odata.nextLink` the hook refused — has a `message` only |
 | `page` / `setPage` | Zero-based page index |
 | `sortCriteria` / `onSortChange` | Bind `onSortChange` to the table's `sort-change` event |
 | `search` / `setSearch` | Current search term and its setter (resets to page 0) |
@@ -888,8 +889,7 @@ class OrdersPage extends LitElement {
   render() {
     const { data, loading, error } = this.orders.state;
     return html`
-      ${error ? html`<p role="alert">${error.message}</p>` : ''}
-      <flex-table data-mode="server" .data=${data} .loading=${loading}
+      <flex-table data-mode="server" .data=${data} .loading=${loading} .error=${error}
         @sort-change=${(e: CustomEvent) => this.orders.source.setSort(e.detail.criteria)}></flex-table>`;
   }
 }
@@ -939,6 +939,19 @@ count after search (not a server-reported total), and `loading`/`error` are alwa
 `false`/`null` — there's no request to fail. `refresh` is a no-op kept only so a
 "refresh" button wired unconditionally against either hook doesn't need a branch.
 
+Without React, `createArraySource(rows, options)` (`@iyulab/flex-table/array`) is the same source with the same
+members as `createODataSource` — `getState()`, `subscribe()`, `setPage`, `setSort`, `setSearch`, `refresh` (no-op) —
+plus `update(rows, options)` when the rows change. `ArraySourceController` binds it to a Lit element:
+
+```ts
+import { ArraySourceController } from '@iyulab/flex-table/array';
+
+class PricesPanel extends LitElement {
+  private prices = new ArraySourceController(this, [], { pageSize: 20 });
+  set rows(rows: DataRow[]) { this.prices.source.update(rows, { pageSize: 20 }); }
+}
+```
+
 ## Development
 
 ```bash

package/dist/array/index.d.ts

@@ -1,2 +1,4 @@
 export { computeArrayView } from './view.js';
 export type { ComputeArrayViewOptions } from './view.js';
+export { createArraySource, ArraySourceController } from './source.js';
+export type { ArraySource, ArraySourceOptions } from './source.js';

package/dist/array/index.js

@@ -1,2 +1,71 @@
-import { t as e } from "../view-DiLr-TdY.js";
-export { e as computeArrayView };
+import { i as e } from "../query-Dw4iO0ir.js";
+import { t } from "../view-DiLr-TdY.js";
+//#region src/array/source.ts
+function n(n, r = {}) {
+	let i = n, a = r, o = e({
+		defaultOrderBy: r.defaultOrderBy,
+		initialPage: r.initialPage ?? 0,
+		initialSearch: r.initialSearch ?? "",
+		initialSort: r.initialSort
+	}), s = o.page, c = o.sortCriteria, l = o.search, u = f(), d = /* @__PURE__ */ new Set();
+	function f() {
+		let e = a.pageSize ?? 20, n = t(i, {
+			search: l,
+			sortCriteria: c,
+			page: s,
+			pageSize: e,
+			columns: a.columns,
+			searchFields: a.searchFields
+		}), r = n.totalCount === 0 ? 0 : Math.ceil(n.totalCount / e) - 1;
+		return s > r && (s = r), {
+			data: n.data,
+			totalCount: n.totalCount,
+			loading: !1,
+			error: null,
+			page: s,
+			sortCriteria: c,
+			search: l
+		};
+	}
+	function p() {
+		u = f();
+		for (let e of [...d]) e();
+	}
+	return {
+		getState: () => u,
+		subscribe(e) {
+			return d.add(e), () => {
+				d.delete(e);
+			};
+		},
+		setPage(e) {
+			s = e, p();
+		},
+		setSort(e) {
+			c = e, s = 0, p();
+		},
+		setSearch(e) {
+			l = e, s = 0, p();
+		},
+		refresh() {},
+		update(e, t = {}) {
+			i = e, a = t, p();
+		}
+	};
+}
+var r = class {
+	constructor(e, t, r = {}) {
+		this.host = e, this.source = n(t, r), e.addController(this);
+	}
+	get state() {
+		return this.source.getState();
+	}
+	hostConnected() {
+		this.unsubscribe ??= this.source.subscribe(() => this.host.requestUpdate());
+	}
+	hostDisconnected() {
+		this.unsubscribe?.(), this.unsubscribe = void 0;
+	}
+};
+//#endregion
+export { r as ArraySourceController, t as computeArrayView, n as createArraySource };

package/dist/array/source.d.ts

@@ -0,0 +1,43 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SortCriteria } from '../core/sorting.js';
+import type { DataRow } from '../models/types.js';
+import type { ODataSourceState } from '../odata/source.js';
+import type { UseArraySourceOptions } from './types.js';
+/** 메모리 소스의 설정 — `useArraySource` 의 옵션과 같다(`initial*` 은 만들 때만 읽는다). */
+export type ArraySourceOptions<T> = UseArraySourceOptions<T>;
+/** 메모리 소스 — `createODataSource` 와 같은 상태·조작 모양이라 같은 표 배선이 두 소스에서 돈다. */
+export interface ArraySource<T> {
+    /** 현재 상태(`loading` 은 늘 `false`, `error` 는 늘 `null`). 바뀌지 않았으면 같은 객체다. */
+    getState(): ODataSourceState<T>;
+    /** 상태가 바뀔 때마다 부른다. 해지 함수를 돌려준다. */
+    subscribe(listener: () => void): () => void;
+    /** 0-based 페이지로 옮긴다(범위를 넘으면 마지막 페이지). */
+    setPage(page: number): void;
+    /** 정렬을 바꾸고 첫 장으로 간다. */
+    setSort(criteria: SortCriteria[]): void;
+    /** 검색어를 바꾸고 첫 장으로 간다. */
+    setSearch(term: string): void;
+    /** 아무 일도 하지 않는다 — 다시 불러올 원격 상태가 없다(OData 소스와 같은 자리에 이어도 안전하다). */
+    refresh(): void;
+    /** 행이나 설정이 바뀌었다 — 다시 계산한다. 결과가 줄어 지금 페이지가 없어지면 마지막 페이지로 내려온다. */
+    update(data: T[], options?: ArraySourceOptions<T>): void;
+}
+/**
+ * 이미 메모리에 있는 행의 데이터 소스 — 검색·정렬·페이지 나누기를 로컬에서 한다(`computeArrayView`). React 없이 쓴다;
+ * React 는 `useArraySource`, Lit 은 `ArraySourceController`.
+ */
+export declare function createArraySource<T extends DataRow = DataRow>(data: T[], options?: ArraySourceOptions<T>): ArraySource<T>;
+/**
+ * Lit 어댑터 — 메모리 소스를 호스트에 묶는다. 상태가 바뀌면 호스트를 다시 그린다. 행이 바뀌면 `source.update(rows)`.
+ */
+export declare class ArraySourceController<T extends DataRow = DataRow> implements ReactiveController {
+    private readonly host;
+    /** 소스 — 조작(`setPage`·`setSort`·`setSearch`·`update`)은 이것으로 한다. */
+    readonly source: ArraySource<T>;
+    private unsubscribe?;
+    constructor(host: ReactiveControllerHost, data: T[], options?: ArraySourceOptions<T>);
+    /** 현재 상태. */
+    get state(): ODataSourceState<T>;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/{flex-table-DUAMhXCS.js → flex-table-DlvIBu4z.js}

@@ -392,6 +392,10 @@ var S = i`
     color: var(--ft-empty-color);
   }
 
+  .ft-error {
+    color: var(--ft-invalid-color);
+  }
+
   .ft-has-comment {
     position: relative;
   }
@@ -1752,7 +1756,7 @@ var K = {
 	lte: "≤"
 }, q = 120, J = 40, Y = 20, X = 32, Z = 5, Xe = 200, Q = class extends r {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._focusedCellEl = null, this._editingCell = null, this._sortCriteria = [], this._selection = new oe(), this._editing = new se(), this._rowSelection = new k(), this._undo = new A(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.error = null, this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._focusedCellEl = null, this._editingCell = null, this._sortCriteria = [], this._selection = new oe(), this._editing = new se(), this._rowSelection = new k(), this._undo = new A(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
 			e.composedPath()[0] !== this || this._activeCell || this._headerCol !== null || this.visibleColumns.length !== 0 && this.matches(":focus-visible") && (this._visibleRowCount > 0 ? (this._selection.setActive(0, 0), this._syncActiveCell()) : this._headerCol = 0);
 		}, this._onFocusIn = (e) => {
 			let t = e.composedPath()[0];
@@ -4153,8 +4157,8 @@ var K = {
 		for (let e of u) h.push(this._renderHeaderCell(t[e], e));
 		for (let e = c; e < l; e++) h.push(this._renderHeaderCell(t[e], e));
 		let g = this._colDragIndicatorLeft == null ? "" : a`<div class="ft-drop-indicator" style="left:${this._colDragIndicatorLeft}px"></div>`;
-		if (this.data.length === 0 || this._visibleRowCount === 0) {
-			let e = this.data.length === 0 ? this.emptyMessage : this.noMatchingMessage;
+		if (this.error || this.data.length === 0 || this._visibleRowCount === 0) {
+			let e = this.error ? a`<div class="ft-empty ft-error" role="alert">${this.error.message}</div>` : a`<div class="ft-empty">${this.data.length === 0 ? this.emptyMessage : this.noMatchingMessage}</div>`;
 			return a`
         ${r}
         <div class="ft-header" role="row" aria-rowindex="1" style="width: ${s}px; height: ${i}px;">
@@ -4162,7 +4166,7 @@ var K = {
           ${h}
           ${g}
         </div>
-        <div class="ft-empty">${e}</div>
+        ${e}
       `;
 		}
 		let { start: _, end: v } = this.visibleRange, y = this._frozenRowCount, b = [];
@@ -4449,7 +4453,7 @@ G([c({ type: Array })], Q.prototype, "columns", void 0), G([c({
 })], Q.prototype, "emptyMessage", void 0), G([c({
 	type: String,
 	attribute: "no-matching-message"
-})], Q.prototype, "noMatchingMessage", void 0), G([c({
+})], Q.prototype, "noMatchingMessage", void 0), G([c({ attribute: !1 })], Q.prototype, "error", void 0), G([c({
 	type: Boolean,
 	reflect: !0
 })], Q.prototype, "loading", void 0), G([c({

package/dist/flex-table.d.ts

@@ -72,6 +72,14 @@ export declare class FlexTable extends LitElement {
      * column filters (0 visible rows, non-empty `data`). Default: 'No matching data'.
      */
     noMatchingMessage: string;
+    /**
+     * The last load failure, or `null`. While set, the grid shows `error.message` in an alert where rows or the empty
+     * state would be — a failed query otherwise looks like "no data". Takes a data source's `error` as is
+     * (`useODataSource`/`createODataSource`, a `SourceError`): any `{ message }`.
+     */
+    error: {
+        message: string;
+    } | null;
     /**
      * True일 때 그리드 위에 로딩 오버레이를 표시하고 host에 `aria-busy="true"`를 반영한다.
      * `useODataSource()`가 반환하는 `loading`과 자연 연동하도록 설계됨:

package/dist/flex-table.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-DUAMhXCS.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-DlvIBu4z.js";
 import { t as o } from "./locale-B1SiVDS1.js";
 export { a as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, o as flexTableLocale, r as renderCell };

package/dist/odata/index.js

@@ -1,4 +1,5 @@
-import { i as e, n as t, r as n, t as r } from "../source-CwbD-6ea.js";
+import { n as e, r as t, t as n } from "../query-Dw4iO0ir.js";
+import { t as r } from "../source-r2Pv6Pvo.js";
 //#region src/odata/controller.ts
 var i = class {
 	constructor(e, t, n = {}) {
@@ -15,4 +16,4 @@ var i = class {
 	}
 };
 //#endregion
-export { i as ODataSourceController, t as buildODataQuery, n as buildSearchExpression, r as createODataSource, e as parseOrderBy };
+export { i as ODataSourceController, n as buildODataQuery, e as buildSearchExpression, r as createODataSource, t as parseOrderBy };

package/dist/query-Dw4iO0ir.js

@@ -0,0 +1,37 @@
+import e from "odata-query";
+//#region src/odata/query.ts
+function t(e) {
+	let t = e.split(/\s+/).map((e) => e.replace(/"/g, "")).filter((e) => e.length > 0);
+	if (t.length !== 0) return t.map((e) => `"${e}"`).join(" AND ");
+}
+function n(e) {
+	let { defaultOrderBy: t, initialPage: n = 0, initialSearch: i = "", initialSort: a } = e;
+	return {
+		page: n,
+		search: i,
+		sortCriteria: a ?? (t ? r(t) : [])
+	};
+}
+function r(e) {
+	return e.split(",").map((e) => {
+		let t = e.trim().split(/\s+/);
+		return {
+			key: t[0],
+			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
+		};
+	});
+}
+function i(n) {
+	let { page: r, pageSize: i, sortCriteria: a = [], defaultOrderBy: o, search: s, fixedFilter: c } = n, l = a.length > 0 ? a.map((e) => `${e.key} ${e.direction}`).join(", ") : o, u = {
+		top: i,
+		skip: r * i,
+		count: !0
+	};
+	if (l && (u.orderBy = l), c && (u.filter = c), s) {
+		let e = t(s);
+		e && (u.search = e);
+	}
+	return e(u);
+}
+//#endregion
+export { n as i, t as n, r, i as t };

package/dist/react.js

@@ -1,5 +1,6 @@
-import { t as e } from "./flex-table-DUAMhXCS.js";
-import { a as t, t as n } from "./source-CwbD-6ea.js";
+import { t as e } from "./flex-table-DlvIBu4z.js";
+import { i as t } from "./query-Dw4iO0ir.js";
+import { t as n } from "./source-r2Pv6Pvo.js";
 import { t as r } from "./view-DiLr-TdY.js";
 import i, { useCallback as a, useEffect as o, useMemo as s, useState as c, useSyncExternalStore as l } from "react";
 import { createComponent as u } from "@lit/react";

package/dist/{source-CwbD-6ea.js → source-r2Pv6Pvo.js}

@@ -1,58 +1,23 @@
 import { n as e } from "./locale-B1SiVDS1.js";
-import t from "odata-query";
-//#region src/odata/query.ts
-function n(e) {
-	let t = e.split(/\s+/).map((e) => e.replace(/"/g, "")).filter((e) => e.length > 0);
-	if (t.length !== 0) return t.map((e) => `"${e}"`).join(" AND ");
-}
-function r(e) {
-	let { defaultOrderBy: t, initialPage: n = 0, initialSearch: r = "", initialSort: a } = e;
-	return {
-		page: n,
-		search: r,
-		sortCriteria: a ?? (t ? i(t) : [])
-	};
-}
-function i(e) {
-	return e.split(",").map((e) => {
-		let t = e.trim().split(/\s+/);
-		return {
-			key: t[0],
-			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
-		};
-	});
-}
-function a(e) {
-	let { page: r, pageSize: i, sortCriteria: a = [], defaultOrderBy: o, search: s, fixedFilter: c } = e, l = a.length > 0 ? a.map((e) => `${e.key} ${e.direction}`).join(", ") : o, u = {
-		top: i,
-		skip: r * i,
-		count: !0
-	};
-	if (l && (u.orderBy = l), c && (u.filter = c), s) {
-		let e = n(s);
-		e && (u.search = e);
-	}
-	return t(u);
-}
-//#endregion
+import { i as t, t as n } from "./query-Dw4iO0ir.js";
 //#region src/core/source-error.ts
-async function o(t) {
+async function r(t) {
 	let n = await t.text().catch(() => ""), r = {
 		message: e("requestFailed", { status: t.status }),
 		status: t.status
 	};
 	if (!n) return r;
-	let i = n;
+	let a = n;
 	try {
-		i = JSON.parse(n);
+		a = JSON.parse(n);
 	} catch {}
-	if (r.body = i, !i || typeof i != "object") return r;
-	let a = i, o = a.error && typeof a.error == "object" ? a.error : a;
-	typeof o.message == "string" && o.message ? r.message = o.message : typeof a.message == "string" && a.message && (r.message = a.message), typeof o.code == "string" && o.code && (r.code = o.code);
-	let c = s(o.details);
+	if (r.body = a, !a || typeof a != "object") return r;
+	let o = a, s = o.error && typeof o.error == "object" ? o.error : o;
+	typeof s.message == "string" && s.message ? r.message = s.message : typeof o.message == "string" && o.message && (r.message = o.message), typeof s.code == "string" && s.code && (r.code = s.code);
+	let c = i(s.details);
 	return c && (r.details = c), r;
 }
-function s(e) {
+function i(e) {
 	if (!Array.isArray(e)) return;
 	let t = e.filter((e) => {
 		if (!e || typeof e != "object") return !1;
@@ -61,42 +26,42 @@ function s(e) {
 	});
 	return t.length > 0 ? t : void 0;
 }
-var c = class extends Error {
+var a = class extends Error {
 	constructor(e) {
 		super(e.message), this.name = "SourceRequestError", this.failure = e;
 	}
 };
-function l(t) {
-	return new c({
+function o(t) {
+	return new a({
 		message: e("networkFailed"),
 		cause: t
 	});
 }
-function u(e) {
-	return e instanceof c ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
+function s(e) {
+	return e instanceof a ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
 }
 //#endregion
 //#region src/odata/source.ts
-function d(e, t = {}) {
-	let n = e, i = t, s = f(t.fixedFilter), d = r({
-		defaultOrderBy: t.defaultOrderBy,
-		initialPage: t.initialPage ?? 0,
-		initialSearch: t.initialSearch ?? "",
-		initialSort: t.initialSort
+function c(e, i = {}) {
+	let c = e, u = i, d = l(i.fixedFilter), f = t({
+		defaultOrderBy: i.defaultOrderBy,
+		initialPage: i.initialPage ?? 0,
+		initialSearch: i.initialSearch ?? "",
+		initialSort: i.initialSort
 	}), p = {
 		data: [],
 		totalCount: 0,
 		loading: !0,
 		error: null,
-		page: d.page,
-		sortCriteria: d.sortCriteria,
-		search: d.search
+		page: f.page,
+		sortCriteria: f.sortCriteria,
+		search: f.search
 	}, m = x(), h = /* @__PURE__ */ new Set(), g = null, _ = !1, v = null;
 	function y() {
-		return i.enabled ?? !0;
+		return u.enabled ?? !0;
 	}
 	function b() {
-		return i.pageSize ?? 20;
+		return u.pageSize ?? 20;
 	}
 	function x() {
 		return {
@@ -119,11 +84,11 @@ function d(e, t = {}) {
 	}
 	function w() {
 		return JSON.stringify([
-			n,
-			i.baseUrl,
+			c,
+			u.baseUrl,
 			b(),
-			i.defaultOrderBy,
-			s,
+			u.defaultOrderBy,
+			d,
 			p.page,
 			p.sortCriteria,
 			p.search
@@ -147,26 +112,26 @@ function d(e, t = {}) {
 		g?.abort();
 		let e = new AbortController();
 		g = e;
-		let { page: t, sortCriteria: r, search: s } = p, d = b(), f = i.fetcher ?? fetch, m = i.onUnauthorized;
+		let { page: t, sortCriteria: i, search: l } = p, d = b(), f = u.fetcher ?? fetch, m = u.onUnauthorized;
 		S({
 			loading: !0,
 			error: null
 		});
-		let h = a({
+		let h = n({
 			page: t,
 			pageSize: d,
-			sortCriteria: r,
-			defaultOrderBy: i.defaultOrderBy,
-			search: s,
-			fixedFilter: i.fixedFilter
-		}), _ = `${i.baseUrl ?? window.location.origin}${n}${h}`, v = async (t) => {
+			sortCriteria: i,
+			defaultOrderBy: u.defaultOrderBy,
+			search: l,
+			fixedFilter: u.fixedFilter
+		}), _ = `${u.baseUrl ?? window.location.origin}${c}${h}`, v = async (t) => {
 			let n;
 			try {
 				n = await f(t, { signal: e.signal });
 			} catch (e) {
-				throw e?.name === "AbortError" ? e : l(e);
+				throw e?.name === "AbortError" ? e : o(e);
 			}
-			if (!n.ok) throw n.status === 401 && m && m(n), new c(await o(n));
+			if (!n.ok) throw n.status === 401 && m && m(n), new a(await r(n));
 			return n.json();
 		};
 		(async () => {
@@ -198,7 +163,7 @@ function d(e, t = {}) {
 			});
 		}).catch((t) => {
 			e.signal.aborted || t?.name !== "AbortError" && S({
-				error: u(t),
+				error: s(t),
 				data: [],
 				totalCount: 0
 			});
@@ -232,16 +197,16 @@ function d(e, t = {}) {
 			y() && (v = null, T());
 		},
 		update(e, t = {}) {
-			let r = f(t.fixedFilter), a = r !== s;
-			n = e, i = t, s = r, a && (p = {
+			let n = l(t.fixedFilter), r = n !== d;
+			c = e, u = t, d = n, r && (p = {
 				...p,
 				page: 0
 			}), C(), T();
 		}
 	};
 }
-function f(e) {
+function l(e) {
 	return e ? JSON.stringify(e) : "";
 }
 //#endregion
-export { r as a, i, a as n, n as r, d as t };
+export { c as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/SKILL.md

@@ -28,7 +28,7 @@ npm install @lit/react react
 | `@iyulab/flex-table` | Registers `<flex-table>`; exports `FlexTable`, types, `exportData`, `renderCell`, `flexTableLocale`, `RowSelectionState`, `UndoStack`, `effectiveAlign` |
 | `@iyulab/flex-table/react` | `FlexTableReact`, `useODataSource`, `useArraySource` |
 | `@iyulab/flex-table/odata` | No React: `createODataSource` (the source `useODataSource` adapts), `ODataSourceController` (Lit), `buildODataQuery`, `buildSearchExpression`, `parseOrderBy` |
-| `@iyulab/flex-table/array` | Pure helper, no React: `computeArrayView` |
+| `@iyulab/flex-table/array` | No React: `createArraySource` (same members as `createODataSource`, plus `update(rows)`), `ArraySourceController` (Lit), `computeArrayView` |
 
 ## Quick start
 
@@ -126,7 +126,7 @@ Server paging from OData or an in-memory array uses the same binding — see `re
 - `--ft-row-height` is read once at first render; change row height later via `rowHeight` / `row-height`.
 - Styles for elements returned by `render` must be passed through the `stylesheets` property
   (constructable `CSSStyleSheet[]`); document CSS does not cross the shadow boundary.
-- Always render `error.message` from `useODataSource`; a failed request otherwise leaves the grid empty. Branch on `error.status` / `error.code` rather than parsing the message.
+- Always show `error` from `useODataSource` — pass it to the table (`error={source.error}`); a failed request otherwise leaves the grid empty. Branch on `error.status` / `error.code` rather than parsing the message.
 
 ## References
 

package/skills/iyulab-flex-table/references/api.md

@@ -23,6 +23,7 @@ All names below are members of the `FlexTable` class (`<flex-table>`).
 | `footerData` | `footer-data` | `Record<string, string \| TemplateResult> \| null` | `null` | Summary row keyed by column key |
 | `emptyMessage` | `empty-message` | `string` | `'No data'` | |
 | `noMatchingMessage` | `no-matching-message` | `string` | `'No matching data'` | All rows hidden by filters |
+| `error` | — | `{ message: string } \| null` | `null` | Load failure shown as an alert instead of rows / empty state (a source's `error` as is) |
 | `loading` | `loading` | `boolean` | `false` | Loading overlay + `aria-busy` |
 | `importEnabled` | `import-enabled` | `boolean` | `false` | Drag-and-drop `.xlsx` / `.csv` import |
 | `clearUndoOnDataChange` | `clear-undo-on-data-change` | `boolean` | `false` | Replacing `data` clears undo history |

package/skills/iyulab-flex-table/references/react.md

@@ -71,12 +71,12 @@ function Orders() {
   return (
     <>
       <input value={source.search} onChange={(e) => source.setSearch(e.target.value)} />
-      {source.error && <p role="alert">{source.error.message}</p>}
       <FlexTableReact<Order>
         dataMode="server"
         columns={columns}
         data={source.data}
         loading={source.loading}
+        error={source.error}
         onSortChange={source.onSortChange}
         clearSelectionOnDataChange
       />
@@ -109,7 +109,7 @@ function Orders() {
 |---|---|
 | `data`, `totalCount` | Current page and `@odata.count`; `@odata.nextLink` is followed to fill a page |
 | `loading` | Request in flight, or no answer yet (true from the first render until the first response settles, and while `enabled: false`) — so `!loading && totalCount === 0` means "no results" |
-| `error` | `SourceError \| null` — `{ message, status?, code?, details?, body?, cause? }`; render `error.message`, branch on `status` / `code` (OData `error.code`). `message` is the server's sentence when it sent one; otherwise this package's, in the `flexTableLocale` language — `requestFailed` (`Request failed ({status})`) when a response came back, `networkFailed` when none did (the transport's exception is in `cause`) |
+| `error` | `SourceError \| null` — `{ message, status?, code?, details?, body?, cause? }`; pass it to the table (`error`) or render `error.message`; branch on `status` / `code` (OData `error.code`). `message` is the server's sentence when it sent one; otherwise this package's, in the `flexTableLocale` language — `requestFailed` (`Request failed ({status})`) when a response came back, `networkFailed` when none did (the transport's exception is in `cause`) |
 | `page`, `setPage` | Zero-based |
 | `sortCriteria`, `onSortChange` | Pass `onSortChange` to the table's `sort-change` (resets to page 0) |
 | `search`, `setSearch` | Literal text (resets to page 0) |
@@ -170,8 +170,7 @@ class OrdersPage extends LitElement {
   private orders = new ODataSourceController<Order>(this, '/api/orders', { pageSize: 20 });
   render() {
     const { data, loading, error } = this.orders.state;
-    return html`${error ? html`<p role="alert">${error.message}</p>` : ''}
-      <flex-table data-mode="server" .data=${data} .loading=${loading}
+    return html`<flex-table data-mode="server" .data=${data} .loading=${loading} .error=${error}
         @sort-change=${(e: CustomEvent) => this.orders.source.setSort(e.detail.criteria)}></flex-table>`;
   }
 }
@@ -182,6 +181,7 @@ Pure helpers:
 ```ts
 import { buildODataQuery, buildSearchExpression, parseOrderBy } from '@iyulab/flex-table/odata';
 import { computeArrayView } from '@iyulab/flex-table/array';
+// createArraySource / ArraySourceController: the in-memory source with createODataSource's members + update(rows)
 
 buildSearchExpression('red shirt'); // '"red" AND "shirt"'  ('' → undefined)
 parseOrderBy('name desc');          // [{ key: 'name', direction: 'desc' }]