@iyulab/flex-table 0.18.0 → 0.19.0

package/README.md

@@ -144,6 +144,14 @@ The `validator` callback returns `null` if valid, or an error message string. On
 | `deselectAll()` | `void` | Deselect all rows |
 | `getSelectedRows()` | `{ selectedIndices, selectedRows }` | Get selected row data |
 
+Row selection is index-based (there is no row-key concept), so replacing `data` with a same-length but different set of rows leaves the selection pointing at the new rows occupying the old indices. If selection drives a bulk action (status changes, bulk delete, etc.), set `clear-selection-on-data-change` so a `data` swap always resets selection and re-fires `selection-change` with an empty selection:
+
+```html
+<flex-table selectable clear-selection-on-data-change></flex-table>
+```
+
+Default is `false`, matching `clear-undo-on-data-change`.
+
 ### Filtering
 
 | Method | Returns | Description |
@@ -304,6 +312,29 @@ function App() {
 
 All `<flex-table>` properties are available as React props, and all custom events are mapped to `on*` callbacks (e.g., `cell-edit-commit` → `onCellEditCommit`).
 
+#### Typed rows (generics)
+
+`FlexTableReact` and `ColumnDefinition` are generic over your row type — no `as unknown as` casts needed in `data`, `columns`, or callbacks:
+
+```tsx
+import { FlexTableReact, type ColumnDefinition } from '@iyulab/flex-table/react';
+
+interface Order {
+  id: string;
+  total: number;
+  currency: string;
+}
+
+const columns: ColumnDefinition<Order>[] = [
+  { key: 'id', header: 'ID' },
+  { key: 'total', header: 'Total', renderer: (_value, row) => `${row.total} ${row.currency}` },
+];
+
+<FlexTableReact<Order> data={orders} columns={columns} />
+```
+
+Omitting the type argument defaults to the previous `DataRow` (`Record<string, unknown>`) behavior — fully backward compatible.
+
 ### Custom Editor
 
 The `editor` callback lets you provide a fully custom editing UI. The component reads `.value` from the element with class `ft-editor` when committing.
@@ -409,6 +440,31 @@ table.addEventListener('sort-change', (e) => {
 });
 ```
 
+### OData Source Hook (React)
+
+`useODataSource(url, options)` fetches paginated/sorted/filtered data from an OData v4 endpoint and returns props ready to bind to `<FlexTableReact dataMode="server" ...>`.
+
+```tsx
+import { useODataSource } from '@iyulab/flex-table/odata';
+
+const source = useODataSource('/api/orders', {
+  pageSize: 20,
+  fetcher: httpClient.fetch,          // custom transport, e.g. an HttpClient instance
+  onUnauthorized: () => navigate('/login'),
+});
+```
+
+| Option | Default | Description |
+|---|---|---|
+| `pageSize` | `20` | Rows per page |
+| `defaultOrderBy` | — | Initial `$orderby` (e.g. `'name asc'`) |
+| `fixedFilter` | — | Filter always applied in addition to search |
+| `baseUrl` | `window.location.origin` | Override the request origin (proxy/BFF setups) |
+| `fetcher` | global `fetch` | Custom transport — pass a wrapper that injects auth headers |
+| `onUnauthorized` | — | Called on `401`/`403` responses, before the generic error is set |
+
+`fetcher`/`onUnauthorized` should be stable references (e.g. wrap in `useCallback`) — they are intentionally excluded from the hook's internal effect dependencies to avoid refetch loops on every render.
+
 ## Development
 
 ```bash

package/dist/{flex-table-DPEaaiUQ.js → flex-table-BQc2PU5u.js}

@@ -1480,7 +1480,7 @@ var Y = {
 	lte: "≤"
 }, X = 120, Z = 40, xe = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.rowHeight = xe, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, 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._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._onCommentPopupOutsideClick = () => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this.rowHeight = xe, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, 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._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._onCommentPopupOutsideClick = () => {
 			this._commitCommentPopup();
 		}, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
 	}
@@ -1492,7 +1492,7 @@ var Y = {
 	}
 	set data(e) {
 		let t = this._data;
-		this._data = e, this.clearUndoOnDataChange && !this._inUndoRedo && this._undo.clear(), this.requestUpdate("data", t);
+		this._data = e, this.clearUndoOnDataChange && !this._inUndoRedo && this._undo.clear(), this.clearSelectionOnDataChange && !this._inUndoRedo && this._rowSelection.selectedCount > 0 && (this._rowSelection.deselectAll(), this._rowSelectionVersion++, this._dispatchRowSelectionEvent()), this.requestUpdate("data", t);
 	}
 	set selectionMode(e) {
 		this._rowSelection.mode = e, this.requestUpdate();
@@ -2053,7 +2053,9 @@ var Y = {
 		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length), this._rowSelection.setRowCount(this._visibleRowCount);
 	}
 	updated(e) {
-		if (this._focusEditor(), this._adjustFilterDropdown(), this.setAttribute("aria-rowcount", String(this._visibleRowCount)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), e.has("_commentPopup") && this._commentPopup) {
+		this._focusEditor(), this._adjustFilterDropdown();
+		let t = String(this._visibleRowCount), n = String(this.visibleColumns.length);
+		if (this.getAttribute("aria-rowcount") !== t && this.setAttribute("aria-rowcount", t), this.getAttribute("aria-colcount") !== n && this.setAttribute("aria-colcount", n), e.has("_commentPopup") && this._commentPopup) {
 			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
 			e && (e.value = this.getComment(this._commentPopup.dataIndex, this._commentPopup.colKey) ?? "", e.focus(), e.select());
 		}
@@ -3920,6 +3922,9 @@ J([a({ type: Array })], $.prototype, "columns", void 0), J([a({
 	type: Boolean,
 	attribute: "clear-undo-on-data-change"
 })], $.prototype, "clearUndoOnDataChange", void 0), J([a({
+	type: Boolean,
+	attribute: "clear-selection-on-data-change"
+})], $.prototype, "clearSelectionOnDataChange", void 0), J([a({
 	type: Number,
 	attribute: "row-height"
 })], $.prototype, "rowHeight", void 0), J([a({

package/dist/flex-table.d.ts

@@ -23,6 +23,18 @@ export declare class FlexTable extends LitElement {
      * Default: false. Internal undo/redo operations are never affected.
      */
     clearUndoOnDataChange: boolean;
+    /**
+     * When true, replacing `data` externally automatically clears row selection
+     * (checkbox selection) and re-dispatches `selection-change` with an empty selection.
+     * Default: false, for consistency with `clearUndoOnDataChange`. Internal undo/redo
+     * operations are never affected.
+     *
+     * Row selection is index-based (no row-key concept), so a full `data` replacement can
+     * leave selection pointing at different underlying rows at the same indices —
+     * recommended for any `selectable` grid whose selection drives bulk actions
+     * (e.g. server-mode grids refreshed via `useODataSource`).
+     */
+    clearSelectionOnDataChange: boolean;
     rowHeight: number;
     showRowNumbers: boolean;
     theme: 'light' | 'dark' | undefined;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-DPEaaiUQ.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-BQc2PU5u.js";
 export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/models/types.d.ts

@@ -14,17 +14,17 @@ export interface SelectOption {
  * Receives the cell value, the full row data, and the column definition.
  * Returns either a Lit TemplateResult or a plain string.
  */
-export type CellRenderer = (value: unknown, row: DataRow, col: ColumnDefinition) => TemplateResult | string;
+export type CellRenderer<T = DataRow> = (value: unknown, row: T, col: ColumnDefinition<T>) => TemplateResult | string;
 /**
  * Custom cell editor function.
  * Receives the cell value, the full row data, and the column definition.
  * Should return a Lit TemplateResult containing an input element with class "ft-editor".
  */
-export type CellEditor = (value: unknown, row: DataRow, col: ColumnDefinition) => TemplateResult;
+export type CellEditor<T = DataRow> = (value: unknown, row: T, col: ColumnDefinition<T>) => TemplateResult;
 /**
  * Cell validator function. Returns null/undefined if valid, or an error message string.
  */
-export type CellValidator = (value: unknown, row: DataRow, col: ColumnDefinition) => string | null | undefined;
+export type CellValidator<T = DataRow> = (value: unknown, row: T, col: ColumnDefinition<T>) => string | null | undefined;
 /**
  * Row selection mode.
  */
@@ -37,8 +37,14 @@ export type SelectionMode = 'single' | 'multi';
 export type DataMode = 'client' | 'server';
 /**
  * Definition of a single column in the table.
+ *
+ * `T` is the consumer's row type (defaults to the schema-agnostic `DataRow`).
+ * Internally, `FlexTable` (the registered custom element) always operates on
+ * `ColumnDefinition<DataRow>` — a custom element cannot itself be generic across
+ * instances, so `FlexTableReact<T>` performs a single internal cast at the
+ * React boundary instead of requiring consumers to cast at every callback.
  */
-export interface ColumnDefinition {
+export interface ColumnDefinition<T = DataRow> {
     /** Unique key matching data property names */
     key: string;
     /** Display header text */
@@ -54,15 +60,15 @@ export interface ColumnDefinition {
     /** Whether the column is sortable (default: true) */
     sortable?: boolean;
     /** Custom cell renderer — overrides built-in type rendering */
-    renderer?: CellRenderer;
+    renderer?: CellRenderer<T>;
     /** Whether the column is editable (default: true — follows global editable setting) */
     editable?: boolean;
     /** Custom cell editor — overrides built-in type editing */
-    editor?: CellEditor;
+    editor?: CellEditor<T>;
     /** Pin the column to one side during horizontal scroll */
     pinned?: 'left' | 'right';
     /** Cell validator — called before committing edits */
-    validator?: CellValidator;
+    validator?: CellValidator<T>;
     /** Allowed values for select columns (strings or label/value pairs) */
     options?: string[] | SelectOption[];
     /**
@@ -76,9 +82,9 @@ export interface ColumnDefinition {
      * - String: number format pattern (e.g. '#,##0.00', '0.00%', '$#,##0') or date pattern (e.g. 'yyyy-MM-dd')
      * - Function: custom formatter receiving (value, row, col)
      */
-    format?: string | ((value: unknown, row: DataRow, col: ColumnDefinition) => string);
+    format?: string | ((value: unknown, row: T, col: ColumnDefinition<T>) => string);
     /** Per-column conditional formatting rules applied during cell rendering */
-    conditionalRules?: ConditionalRule[];
+    conditionalRules?: ConditionalRule<T>[];
 }
 /** Style applied to a cell by a conditional formatting rule */
 export interface CellStyle {
@@ -88,9 +94,9 @@ export interface CellStyle {
     fontStyle?: 'italic' | 'normal';
 }
 /** A single conditional formatting rule */
-export interface ConditionalRule {
+export interface ConditionalRule<T = DataRow> {
     /** Returns true when this rule's style should be applied */
-    when: (value: unknown, row: DataRow, col: ColumnDefinition) => boolean;
+    when: (value: unknown, row: T, col: ColumnDefinition<T>) => boolean;
     style: CellStyle;
 }
 /**

package/dist/odata/index.js

@@ -2,27 +2,28 @@ import { useCallback as e, useEffect as t, useRef as n, useState as r } from "re
 import i from "odata-query";
 //#region src/odata/use-odata-source.ts
 function a(a, s = {}) {
-	let { pageSize: c = 20, defaultOrderBy: l, fixedFilter: u } = s, d = u ? JSON.stringify(u) : "", [f, p] = r([]), [m, h] = r(0), [g, _] = r(!1), [v, y] = r(null), [b, x] = r(0), [S, C] = r(() => l ? o(l) : []), [w, T] = r(""), [E, D] = r(0), O = n(null), k = e(() => {
-		D((e) => e + 1);
-	}, []), A = e((e) => {
-		T(e), x(0);
-	}, []), j = e((e) => {
+	let { pageSize: c = 20, defaultOrderBy: l, fixedFilter: u, baseUrl: d, fetcher: f = fetch, onUnauthorized: p } = s, m = u ? JSON.stringify(u) : "", [h, g] = r([]), [_, v] = r(0), [y, b] = r(!1), [x, S] = r(null), [C, w] = r(0), [T, E] = r(() => l ? o(l) : []), [D, O] = r(""), [k, A] = r(0), j = n(null), M = e(() => {
+		A((e) => e + 1);
+	}, []), N = e((e) => {
+		O(e), w(0);
+	}, []), P = e((e) => {
 		let t = e.detail?.criteria;
-		t && (C(t), x(0));
+		t && (E(t), w(0));
 	}, []);
 	return t(() => {
-		O.current?.abort();
+		j.current?.abort();
 		let e = new AbortController();
-		O.current = e, _(!0), y(null);
-		let t = S.length > 0 ? S.map((e) => `${e.key} ${e.direction}`).join(", ") : l, n = {
+		j.current = e, b(!0), S(null);
+		let t = T.length > 0 ? T.map((e) => `${e.key} ${e.direction}`).join(", ") : l, n = {
 			top: c,
-			skip: b * c,
+			skip: C * c,
 			count: !0
 		};
-		t && (n.orderBy = t), u && (n.filter = u), w && (n.search = w);
-		let r = i(n), o = `${window.location.origin}${a}${r}`;
-		return fetch(o, { signal: e.signal }).then(async (e) => {
+		t && (n.orderBy = t), u && (n.filter = u), D && (n.search = D);
+		let r = i(n);
+		return f(`${d ?? window.location.origin}${a}${r}`, { signal: e.signal }).then(async (e) => {
 			if (!e.ok) {
+				(e.status === 401 || e.status === 403) && p && p(e);
 				let t = await e.text().catch(() => ""), n = `요청 실패 (${e.status})`;
 				try {
 					let e = JSON.parse(t);
@@ -32,33 +33,34 @@ function a(a, s = {}) {
 			}
 			return e.json();
 		}).then((t) => {
-			e.signal.aborted || (p(t.value ?? t), h(t["@odata.count"] ?? 0), y(null));
+			e.signal.aborted || (g(t.value ?? t), v(t["@odata.count"] ?? 0), S(null));
 		}).catch((t) => {
-			e.signal.aborted || t.name !== "AbortError" && (y(t.message), p([]), h(0));
+			e.signal.aborted || t.name !== "AbortError" && (S(t.message), g([]), v(0));
 		}).finally(() => {
-			e.signal.aborted || _(!1);
+			e.signal.aborted || b(!1);
 		}), () => e.abort();
 	}, [
 		a,
-		b,
+		C,
 		c,
-		S,
-		w,
-		d,
+		T,
+		D,
+		m,
 		l,
-		E
+		k,
+		d
 	]), {
-		data: f,
-		totalCount: m,
-		loading: g,
-		error: v,
-		page: b,
-		setPage: x,
-		sortCriteria: S,
-		onSortChange: j,
-		search: w,
-		setSearch: A,
-		refresh: k
+		data: h,
+		totalCount: _,
+		loading: y,
+		error: x,
+		page: C,
+		setPage: w,
+		sortCriteria: T,
+		onSortChange: P,
+		search: D,
+		setSearch: N,
+		refresh: M
 	};
 }
 function o(e) {

package/dist/odata/types.d.ts

@@ -3,6 +3,12 @@ export interface UseODataSourceOptions {
     pageSize?: number;
     defaultOrderBy?: string;
     fixedFilter?: Record<string, unknown>;
+    /** 기본값: `window.location.origin`. 프록시/BFF 등 다른 origin으로 요청해야 할 때 지정. */
+    baseUrl?: string;
+    /** 커스텀 fetch transport(예: 인증 헤더를 주입하는 `HttpClient` 래퍼). 기본값: 전역 `fetch`. */
+    fetcher?: (input: string, init: RequestInit) => Promise<Response>;
+    /** 응답이 401/403일 때 호출(세션 만료 리다이렉트 등). 호출 후에도 기존 에러 처리는 계속 진행된다. */
+    onUnauthorized?: (response: Response) => void;
 }
 export interface UseODataSourceResult<T> {
     data: T[];

package/dist/react.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 import { type EventName } from '@lit/react';
 import { FlexTable } from './flex-table.js';
-export declare const FlexTableReact: import("@lit/react").ReactWebComponent<FlexTable, {
+import type { ColumnDefinition, DataRow } from './models/types.js';
+declare const FlexTableReactBase: import("@lit/react").ReactWebComponent<FlexTable, {
     onCellSelect: EventName<CustomEvent>;
     onCellEditCommit: EventName<CustomEvent>;
     onCellEditCancel: EventName<CustomEvent>;
@@ -25,5 +27,33 @@ export declare const FlexTableReact: import("@lit/react").ReactWebComponent<Flex
     onContextMenu: EventName<CustomEvent>;
     onFilterError: EventName<CustomEvent>;
 }>;
+type BaseProps = React.ComponentProps<typeof FlexTableReactBase>;
+/**
+ * Props for {@link FlexTableReact}, parameterized on the consumer's row type `T`
+ * (defaults to `DataRow` — identical to the previous non-generic behavior).
+ */
+export type FlexTableReactProps<T = DataRow> = Omit<BaseProps, 'data' | 'columns'> & {
+    data?: T[];
+    columns?: ColumnDefinition<T>[];
+};
+/**
+ * React wrapper for the `<flex-table>` custom element, generic over the row type `T`.
+ *
+ * The underlying custom element (`FlexTable`) is a single registered class and cannot
+ * itself be generic across instances — the DOM has no notion of `FlexTable<Order>` vs
+ * `FlexTable<Consumer>`. `FlexTableReact<T>` performs one internal cast at this boundary
+ * so consumers get end-to-end type safety (`data`, `columns`, `renderer`/`editor`/`validator`
+ * callbacks) without casting at every call site.
+ *
+ * @example
+ * ```tsx
+ * const columns: ColumnDefinition<Order>[] = [
+ *   { key: 'id', header: 'ID' },
+ *   { key: 'total', header: 'Total', renderer: (v, row) => `${row.total} ${row.currency}` },
+ * ];
+ * <FlexTableReact<Order> data={orders} columns={columns} />
+ * ```
+ */
+export declare const FlexTableReact: <T = DataRow>(props: FlexTableReactProps<T> & React.RefAttributes<FlexTable>) => React.ReactElement | null;
 export type { FlexTable };
-export type { ColumnDefinition, DataRow, ColumnType, CellRenderer, CellEditor, CellValidator, SelectionMode, DataMode } from './models/types.js';
+export type { ColumnDefinition, DataRow, ColumnType, CellRenderer, CellEditor, CellValidator, ConditionalRule, SelectionMode, DataMode } from './models/types.js';

package/dist/react.js

@@ -1,7 +1,6 @@
-import { t as e } from "./flex-table-DPEaaiUQ.js";
+import { t as e } from "./flex-table-BQc2PU5u.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
-//#region src/react.ts
 var r = n({
 	tagName: "flex-table",
 	elementClass: e,

package/package.json

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