@iyulab/flex-table 0.57.0 → 0.58.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.58.0] - 2026-10-07
+
+### Added
+
+- **Page size is source state.** `createODataSource` / `createArraySource` state (and `useODataSource` /
+  `useArraySource`) carries `pageSize`, and `setPageSize(size)` changes it and goes back to page 0 — a pager's «rows per
+  page» had no way to reach the source. An `update` (or a render) that passes the same `pageSize` option again keeps the
+  size `setPageSize` set; a changed option value takes effect.
+- **`ODataSourceController` and `ArraySourceController` take an existing source** —
+  `new ODataSourceController(this, source)` — so several elements (a table, a pager) share one source. Created from a
+  URL (or rows) as before.
+
 ## [0.57.0] - 2026-10-07
 
 ### Changed (breaking)

package/README.md

@@ -830,6 +830,7 @@ The hook returns:
 | `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? }`. **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 |
+| `pageSize` / `setPageSize` | Rows per page — starts at the `pageSize` option (20); `setPageSize` changes it and goes back to page 0. Passing the same `pageSize` option again on the next render keeps the size `setPageSize` set |
 | `sortCriteria` / `onSortChange` | Bind `onSortChange` to the table's `sort-change` event |
 | `search` / `setSearch` | Current search term and its setter (resets to page 0) |
 | `refresh` | Re-run the current request |
@@ -880,16 +881,17 @@ off();                                                          // the last unsu
 
 | Member | Description |
 |---|---|
-| `getState()` | `{ data, totalCount, loading, error, page, sortCriteria, search }` — the same fields the hook returns. A new object only when something changed |
+| `getState()` | `{ data, totalCount, loading, error, page, pageSize, sortCriteria, search }` — the same fields the hook returns. A new object only when something changed |
 | `subscribe(listener)` | Called on every change; returns the unsubscribe function. Requests go out only while someone is subscribed |
 | `setPage(page)` | Zero-based |
+| `setPageSize(size)` | Rows per page; goes back to page 0 |
 | `setSort(criteria)` / `setSearch(term)` | Change the sort or search and go back to page 0 |
 | `refresh()` | Re-read with the same conditions (nothing while `enabled: false`) |
-| `update(url, options)` | New options. Only a changed request re-reads; a changed `fixedFilter` value goes back to page 0; `initial*` are read at creation only |
+| `update(url, options)` | New options. Only a changed request re-reads; a changed `fixedFilter` value goes back to page 0; a changed `pageSize` value takes effect (page 0), the same value again keeps the size `setPageSize` set; `initial*` are read at creation only |
 
 Changes made in the same tick become one request with the final conditions, so `setSearch` followed by `setPage` does not send the intermediate one.
 
-For a Lit element, `ODataSourceController` ties a source to the element's lifecycle — it subscribes when the element connects, cancels when it disconnects, and re-renders it on every change:
+For a Lit element, `ODataSourceController` ties a source to the element's lifecycle — it subscribes when the element connects, cancels when it disconnects, and re-renders it on every change. Give it a URL to create the source, or **a source you already have** (`new ODataSourceController(this, source)`) so several elements — a table, a pager — share one:
 
 ```ts
 import { LitElement, html } from 'lit';
@@ -952,8 +954,8 @@ count after search (not a server-reported total), and `loading`/`error` are alwa
 "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:
+members as `createODataSource` — `getState()`, `subscribe()`, `setPage`, `setPageSize`, `setSort`, `setSearch`, `refresh` (no-op) —
+plus `update(rows, options)` when the rows change. `ArraySourceController` binds it to a Lit element (from rows, or an existing source):
 
 ```ts
 import { LitElement } from 'lit';

package/dist/array/index.js

@@ -7,55 +7,59 @@ function n(n, r = {}) {
 		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, {
+	}), s = o.page, c = o.sortCriteria, l = o.search, u = r.pageSize ?? 20, d = p(), f = /* @__PURE__ */ new Set();
+	function p() {
+		let e = t(i, {
 			search: l,
 			sortCriteria: c,
 			page: s,
-			pageSize: e,
+			pageSize: u,
 			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,
+		}), n = e.totalCount === 0 ? 0 : Math.ceil(e.totalCount / u) - 1;
+		return s > n && (s = n), {
+			data: e.data,
+			totalCount: e.totalCount,
 			loading: !1,
 			error: null,
 			page: s,
+			pageSize: u,
 			sortCriteria: c,
 			search: l
 		};
 	}
-	function p() {
-		u = f();
-		for (let e of [...d]) e();
+	function m() {
+		d = p();
+		for (let e of [...f]) e();
 	}
 	return {
-		getState: () => u,
+		getState: () => d,
 		subscribe(e) {
-			return d.add(e), () => {
-				d.delete(e);
+			return f.add(e), () => {
+				f.delete(e);
 			};
 		},
 		setPage(e) {
-			s = e, p();
+			s = e, m();
+		},
+		setPageSize(e) {
+			e !== u && (u = e, s = 0, m());
 		},
 		setSort(e) {
-			c = e, s = 0, p();
+			c = e, s = 0, m();
 		},
 		setSearch(e) {
-			l = e, s = 0, p();
+			l = e, s = 0, m();
 		},
 		refresh() {},
 		update(e, t = {}) {
-			i = e, a = t, p();
+			t.pageSize !== void 0 && t.pageSize !== a.pageSize && t.pageSize !== u && (u = t.pageSize, s = 0), i = e, a = t, m();
 		}
 	};
 }
 var r = class {
 	constructor(e, t, r = {}) {
-		this.host = e, this.source = n(t, r), e.addController(this);
+		this.host = e, this.source = Array.isArray(t) ? n(t, r) : t, e.addController(this);
 	}
 	get state() {
 		return this.source.getState();

package/dist/array/source.d.ts

@@ -13,6 +13,8 @@ export interface ArraySource<T> {
     subscribe(listener: () => void): () => void;
     /** 0-based 페이지로 옮긴다(범위를 넘으면 마지막 페이지). */
     setPage(page: number): void;
+    /** 페이지 크기를 바꾸고 첫 장으로 간다. */
+    setPageSize(size: number): void;
     /** 정렬을 바꾸고 첫 장으로 간다. */
     setSort(criteria: SortCriteria[]): void;
     /** 검색어를 바꾸고 첫 장으로 간다. */
@@ -35,6 +37,10 @@ export declare class ArraySourceController<T extends DataRow = DataRow> implemen
     /** 소스 — 조작(`setPage`·`setSort`·`setSearch`·`update`)은 이것으로 한다. */
     readonly source: ArraySource<T>;
     private unsubscribe?;
+    /**
+     * 행으로 소스를 만들거나, **이미 있는 소스**를 받는다 — 같은 소스를 여러 요소(표 · 페이저 · 목록 골격)가 함께 쓴다.
+     */
+    constructor(host: ReactiveControllerHost, source: ArraySource<T>);
     constructor(host: ReactiveControllerHost, data: T[], options?: ArraySourceOptions<T>);
     /** 현재 상태. */
     get state(): ODataSourceState<T>;

package/dist/array/types.d.ts

@@ -40,6 +40,10 @@ export interface UseArraySourceResult<T> {
     error: SourceError | null;
     page: number;
     setPage: (page: number) => void;
+    /** 한 페이지의 행 수 — `pageSize` 옵션으로 시작하고 `setPageSize` 로 바뀐다. */
+    pageSize: number;
+    /** 페이지 크기를 바꾸고 첫 장으로 간다. */
+    setPageSize: (size: number) => void;
     sortCriteria: SortCriteria[];
     onSortChange: (e: CustomEvent) => void;
     setSearch: (term: string) => void;

package/dist/odata/controller.d.ts

@@ -21,6 +21,10 @@ export declare class ODataSourceController<T = Record<string, unknown>> implemen
     /** 소스 — 조작(`setPage`·`setSort`·`setSearch`·`refresh`·`update`)은 이것으로 한다. */
     readonly source: ODataSource<T>;
     private unsubscribe?;
+    /**
+     * 주소로 소스를 만들거나, **이미 있는 소스**를 받는다 — 같은 소스를 여러 요소(표 · 페이저 · 목록 골격)가 함께 쓴다.
+     */
+    constructor(host: ReactiveControllerHost, source: ODataSource<T>);
     constructor(host: ReactiveControllerHost, url: string, options?: ODataSourceOptions);
     /** 현재 상태. */
     get state(): ODataSourceState<T>;

package/dist/odata/index.js

@@ -1,9 +1,9 @@
 import { n as e, r as t, t as n } from "../query-Dw4iO0ir.js";
-import { t as r } from "../source--q5s2Oti.js";
+import { t as r } from "../source-DOue0Ti3.js";
 //#region src/odata/controller.ts
 var i = class {
 	constructor(e, t, n = {}) {
-		this.host = e, this.source = r(t, n), e.addController(this);
+		this.host = e, this.source = typeof t == "string" ? r(t, n) : t, e.addController(this);
 	}
 	get state() {
 		return this.source.getState();

package/dist/odata/source.d.ts

@@ -50,6 +50,8 @@ export interface ODataSourceState<T> {
     error: SourceError | null;
     /** 0-based. */
     page: number;
+    /** 한 페이지의 행 수 — `pageSize` 옵션으로 시작하고(기본 20) `setPageSize` 로 바뀐다. */
+    pageSize: number;
     sortCriteria: SortCriteria[];
     search: string;
 }
@@ -66,6 +68,8 @@ export interface ODataSource<T> {
     subscribe(listener: () => void): () => void;
     /** 0-based 페이지로 옮긴다. */
     setPage(page: number): void;
+    /** 페이지 크기를 바꾸고 첫 장으로 간다(페이저의 «페이지당 행 수»). */
+    setPageSize(size: number): void;
     /** 정렬을 바꾸고 첫 장으로 간다. */
     setSort(criteria: SortCriteria[]): void;
     /** 검색어를 바꾸고 첫 장으로 간다. */

package/dist/odata/types.d.ts

@@ -4,6 +4,8 @@ import type { ODataSourceOptions, ODataSourceState } from './source.js';
 export type UseODataSourceOptions = ODataSourceOptions;
 export interface UseODataSourceResult<T> extends ODataSourceState<T> {
     setPage: (page: number) => void;
+    /** 페이지 크기를 바꾸고 첫 장으로 간다. */
+    setPageSize: (size: number) => void;
     /** flex-table 의 `sort-change` 를 받는다(`detail.criteria`) — 정렬을 바꾸고 첫 장으로 간다. */
     onSortChange: (e: CustomEvent) => void;
     /** 검색어를 바꾸고 첫 장으로 간다. */

package/dist/react.js

@@ -1,6 +1,6 @@
 import { t as e } from "./flex-table-B1W8VEBa.js";
 import { i as t } from "./query-Dw4iO0ir.js";
-import { t as n } from "./source--q5s2Oti.js";
+import { t as n } from "./source-DOue0Ti3.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";
@@ -17,6 +17,7 @@ function d(e, t = {}) {
 	return {
 		...i,
 		setPage: r.setPage,
+		setPageSize: r.setPageSize,
 		onSortChange: s,
 		setSearch: r.setSearch,
 		refresh: r.refresh
@@ -30,16 +31,20 @@ function f(e, n = {}) {
 		initialPage: l,
 		initialSearch: u,
 		initialSort: d
-	}), [h, g] = c(m.page), [_, v] = c(m.sortCriteria), [y, b] = c(m.search), x = a((e) => {
+	}), [h, g] = c(m.page), [_, v] = c(m.sortCriteria), [y, b] = c(m.search), [x, S] = c(i), [C, w] = c(i);
+	i !== C && (w(i), S(i), g(0));
+	let T = a((e) => {
+		S(e), g(0);
+	}, []), E = a((e) => {
 		b(e), g(0);
-	}, []), S = a((e) => {
+	}, []), D = a((e) => {
 		let t = e.detail?.criteria;
 		t && (v(t), g(0));
-	}, []), C = a(() => {}, []), { data: w, totalCount: T } = s(() => r(e, {
+	}, []), O = a(() => {}, []), { data: k, totalCount: A } = s(() => r(e, {
 		search: y,
 		sortCriteria: _,
 		page: h,
-		pageSize: i,
+		pageSize: x,
 		columns: f,
 		searchFields: p
 	}), [
@@ -47,22 +52,24 @@ function f(e, n = {}) {
 		y,
 		_,
 		h,
-		i,
+		x,
 		f,
 		p
-	]), E = T === 0 ? 0 : Math.ceil(T / i) - 1;
-	return h > E && g(E), {
-		data: w,
-		totalCount: T,
+	]), j = A === 0 ? 0 : Math.ceil(A / x) - 1;
+	return h > j && g(j), {
+		data: k,
+		totalCount: A,
 		loading: !1,
 		error: null,
 		page: h,
 		setPage: g,
+		pageSize: x,
+		setPageSize: T,
 		sortCriteria: _,
-		onSortChange: S,
+		onSortChange: D,
 		search: y,
-		setSearch: x,
-		refresh: C
+		setSearch: E,
+		refresh: O
 	};
 }
 var p = u({

package/dist/{source--q5s2Oti.js → source-DOue0Ti3.js}

@@ -54,6 +54,7 @@ function c(e, i = {}) {
 		loading: !0,
 		error: null,
 		page: f.page,
+		pageSize: i.pageSize ?? 20,
 		sortCriteria: f.sortCriteria,
 		search: f.search
 	}, m = x(), h = /* @__PURE__ */ new Set(), g = null, _ = !1, v = null;
@@ -61,7 +62,7 @@ function c(e, i = {}) {
 		return u.enabled ?? !0;
 	}
 	function b() {
-		return u.pageSize ?? 20;
+		return p.pageSize;
 	}
 	function x() {
 		return {
@@ -181,6 +182,12 @@ function c(e, i = {}) {
 		setPage(e) {
 			S({ page: e }), T();
 		},
+		setPageSize(e) {
+			e !== p.pageSize && (S({
+				pageSize: e,
+				page: 0
+			}), T());
+		},
 		setSort(e) {
 			S({
 				sortCriteria: e,
@@ -197,10 +204,14 @@ function c(e, i = {}) {
 			y() && (v = null, T());
 		},
 		update(e, t = {}) {
-			let n = l(t.fixedFilter), r = n !== d;
+			let n = l(t.fixedFilter), r = n !== d, i = t.pageSize !== void 0 && t.pageSize !== u.pageSize;
 			c = e, u = t, d = n, r && (p = {
 				...p,
 				page: 0
+			}), i && t.pageSize !== p.pageSize && (p = {
+				...p,
+				pageSize: t.pageSize,
+				page: 0
 			}), C(), T();
 		}
 	};

package/package.json

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

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

@@ -110,6 +110,7 @@ function Orders() {
 | `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? }`; 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 |
+| `pageSize`, `setPageSize` | Rows per page (the `pageSize` option, then `setPageSize` — resets to page 0) |
 | `sortCriteria`, `onSortChange` | Pass `onSortChange` to the table's `sort-change` (resets to page 0) |
 | `search`, `setSearch` | Literal text (resets to page 0) |
 | `refresh` | Re-run the current request |
@@ -158,9 +159,9 @@ Differences: `totalCount` is the count after search, `loading` is always `false`
 
 `useODataSource` adapts a framework-neutral source with the same options and state:
 `createODataSource(url, options)` → `getState()` · `subscribe(listener)` (the first subscriber starts loading, the last
-unsubscribe cancels) · `setPage` · `setSort(criteria)` · `setSearch` · `refresh` · `update(url, options)`. Changes in one
+unsubscribe cancels) · `setPage` · `setPageSize` · `setSort(criteria)` · `setSearch` · `refresh` · `update(url, options)`. Changes in one
 tick become one request. For Lit, `ODataSourceController` subscribes on connect, cancels on disconnect and re-renders
-the host:
+the host — from a URL, or from a source you already have (`new ODataSourceController(this, source)`, so a table and a pager share it):
 
 ```ts
 import { LitElement, html } from 'lit';