@iyulab/flex-table 0.53.0 → 0.54.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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>`;
   }
 }

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/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-DUAMhXCS.js";
+import { t as e } from "./flex-table-DlvIBu4z.js";
 import { a as t, t as n } from "./source-CwbD-6ea.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";

package/package.json

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

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

@@ -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>`;
   }
 }