@iyulab/flex-table 0.34.0 → 0.34.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [0.34.1] - 2026-09-10
+
+### Changed
+
+- **Fallback literals for `--u-txt-color-weak` follow `@iyulab/components` 1.40.0.** They are
+  only used when that stylesheet is not loaded; with it, nothing changes here.
+
+### Fixed
+
+- **A column pinned to the right was placed against the scrolled content instead of the
+  viewport, so it sat outside the visible area exactly when a pin is needed.** Cells are
+  positioned absolutely inside a box as wide as the whole row, so the emitted
+  `right: ${-scrollLeft + offset}` measured from the content's right edge rather than the
+  viewport's: at `scrollLeft: 0` the column rendered past the right border of the scroll area
+  and never came into view. The negative offset also pushed the cell beyond that box, which
+  extended the scrollable width — measured in Chromium, `scrollWidth` grew 968 -> 1160 -> 1543
+  across three scroll steps, so the horizontal scrollbar could not reach its own end.
+
+  Right pins are now expressed the same way left pins already were, as a `left` offset that
+  tracks the viewport, clamped to the column's natural position. A right-pinned column stays
+  against the right edge of the scroll area at every scroll offset, several of them stack in
+  column order, and a table whose columns fit without overflowing leaves the column where it
+  naturally sits rather than inventing a scrollable area. Header, body and footer cells all
+  take the same path.
+
+  `position: sticky` — the usual way to build a pinned column — is not available in this
+  layout: every cell is absolutely positioned for horizontal virtualization, and a sticky box
+  needs a flow position to stick relative to.
+
 ## [0.34.0] - 2026-09-08
 
 ### Fixed

package/README.md

@@ -19,7 +19,8 @@ npm install @iyulab/flex-table
 ## Quick Start
 
 ```html
-<flex-table id="table" row-height="32" show-row-numbers></flex-table>
+<!-- The table is its own scroll container, so give it a height — see Sizing below. -->
+<flex-table id="table" style="height: 400px" row-height="32" show-row-numbers></flex-table>
 
 <script type="module">
   import '@iyulab/flex-table';
@@ -67,6 +68,31 @@ npm install @iyulab/flex-table
 - **React Wrapper** — `@iyulab/flex-table/react` subpath for idiomatic React usage
 - **ARIA** — `role="grid"`, `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`
 
+## Sizing
+
+The table is its own scroll container (`overflow: auto` on the host) and it measures the viewport
+from the host's own height. **Give it a height** — directly, or through a constrained parent:
+
+```css
+flex-table { height: 400px; }
+```
+
+```css
+/* or let a flex parent constrain it */
+.page      { height: 100%; display: flex; flex-direction: column; }
+.page flex-table { flex: 1 1 auto; min-height: 0; }
+```
+
+⚠ **Without a height constraint the virtual scroll has nothing to virtualise against.** The body
+carries the full content height, so an unconstrained host grows to match it and the viewport
+measurement ends up equal to the content — every row is rendered. Measured with 1,000 rows and no
+height: the element becomes ~32,000px tall and all 1,000 rows are in the DOM. The same data in a
+300px-tall host renders only the visible window (well under a fifth of the rows). That is the
+difference between the "100,000+ rows" claim in Features and a page that stalls.
+
+Small fixed data sets are fine unconstrained — the point is that the virtual-scroll guarantee is a
+guarantee about a *constrained* host. `height-model.browser.test.ts` pins both sides of this.
+
 ## Properties
 
 | Property | Attribute | Type | Default | Description |

package/dist/{flex-table-D4W1C_QA.js → flex-table-hkmpmDxR.js}

@@ -41,12 +41,12 @@ var l = r`
     --ft-active-color: var(--u-primary-color, #1976D2);
     --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
     --ft-bool-color: var(--u-primary-color, #1976D2);
-    --ft-sort-indicator-color: var(--u-txt-color-weak, #757575);
+    --ft-sort-indicator-color: var(--u-txt-color-weak, #616161);
     --ft-editor-bg: var(--u-input-bg-color, #FFFFFF);
     /* #999 was 2.85 against --ft-bg (#fff); AA needs 4.5. The dark value (#9aa0a6 on
        #1e1e2e = 6.31) was already fine, so this was a light-only defect. #5f6368 is the
        same grey the sort indicator uses, which keeps the palette to one family. */
-    --ft-empty-color: var(--u-txt-color-weak, #757575);
+    --ft-empty-color: var(--u-txt-color-weak, #616161);
 
     /* 상태 색 — 종전에는 규칙 안에 리터럴로 박혀 있어 소비자가 덮을 경로가 없었고
        테마도 따라오지 않았다(다크에서 라이트용 값 그대로).
@@ -85,9 +85,9 @@ var l = r`
       --ft-active-color: var(--u-primary-color, #1976D2);
       --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
       --ft-bool-color: var(--u-primary-color, #1976D2);
-      --ft-sort-indicator-color: var(--u-txt-color-weak, #757575);
+      --ft-sort-indicator-color: var(--u-txt-color-weak, #616161);
       --ft-editor-bg: var(--u-input-bg-color, #FFFFFF);
-      --ft-empty-color: var(--u-txt-color-weak, #757575);
+      --ft-empty-color: var(--u-txt-color-weak, #616161);
     }
   }
 
@@ -106,9 +106,9 @@ var l = r`
     --ft-active-color: var(--u-primary-color, #1976D2);
     --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
     --ft-bool-color: var(--u-primary-color, #1976D2);
-    --ft-sort-indicator-color: var(--u-txt-color-weak, #757575);
+    --ft-sort-indicator-color: var(--u-txt-color-weak, #616161);
     --ft-editor-bg: var(--u-input-bg-color, #FFFFFF);
-    --ft-empty-color: var(--u-txt-color-weak, #757575);
+    --ft-empty-color: var(--u-txt-color-weak, #616161);
   }
 
   /* --- Layout --- */
@@ -1497,7 +1497,7 @@ async function K(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function q(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -2787,6 +2787,12 @@ var J = {
 		for (let r = t.length - 1; r > e; r--) t[r].pinned === "right" && (n += this._getColWidth(t[r]));
 		return n;
 	}
+	_getPinnedRightLeft(e) {
+		let t = this.visibleColumns, n = this._colLeftOffsets[e] ?? 0;
+		if (this._viewportWidth <= 0) return n;
+		let r = this._getColWidth(t[e]), i = this._scrollLeft + this._viewportWidth - this._getPinnedRight(e) - r;
+		return Math.min(n, i);
+	}
 	_renderHeaderCell(e, t) {
 		let n = e.sortable !== !1, r = this._sortCriteria.find((t) => t.key === e.key), o = this._sortCriteria.length > 1 ? this._sortCriteria.findIndex((t) => t.key === e.key) : -1, s = this._filters.some((t) => t.key === e.key), c = e.pinned === "left", l = e.pinned === "right", u = [
 			"ft-header-cell",
@@ -2795,7 +2801,7 @@ var J = {
 			e.headerAlign === "center" ? "ft-header-align-center" : "",
 			e.headerAlign === "end" ? "ft-header-align-end" : ""
 		].filter(Boolean).join(" "), d = n ? r ? r.direction === "asc" ? "ascending" : "descending" : "none" : void 0, f = this._getColWidth(e), p = this.headerHeight, m = this._colLeftOffsets[t] ?? 0, h;
-		h = c ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : l ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : `left: ${m}px; width: ${f}px; height: ${p}px;`;
+		h = c ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : l ? `position: absolute; top: 0; left: ${this._getPinnedRightLeft(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : `left: ${m}px; width: ${f}px; height: ${p}px;`;
 		let g = this._colDrag?.active && this._colDrag.colIndex === t, _ = [...u.split(" "), g ? "ft-col-dragging" : ""].filter(Boolean).join(" "), v = this.columns, y = v.findIndex((t) => t.key === e.key), b = [];
 		if (y > 0) for (let e = y - 1; e >= 0 && v[e].hidden; e--) b.push(v[e]);
 		let x = b.length > 0;
@@ -3802,7 +3808,7 @@ var J = {
 		}
 		let { start: g, end: _ } = this.visibleRange, v = this._frozenRowCount, y = [];
 		for (let e = g; e < _; e++) y.push(this._renderRow(e, s, c, l, (e - v) * this.rowHeight));
-		let b = this._renderFillHandle(), x = this._rowDragIndicatorY == null ? "" : i`<div class="ft-row-drop-indicator" style="top:${this._rowDragIndicatorY}px;width:${o + this._prefixWidth}px;"></div>`;
+		let b = this._renderFillHandle(), x = this._rowDragIndicatorY == null ? "" : i`<div class="ft-row-drop-indicator" style="top:${this._rowDragIndicatorY}px;width:${o}px;"></div>`;
 		return i`
       ${t}
       ${n}
@@ -3852,7 +3858,7 @@ var J = {
 		let u = this.showRowNumbers ? i`<div class="ft-footer-cell ft-row-num"
             style="position: absolute; top: 0; left: ${s + c}px; width: 48px; height: ${a}px; z-index: 2;"></div>` : "", d = [];
 		for (let e of n) {
-			let t = r[e], n = this._getColWidth(t), o = t.pinned === "right" ? `position: absolute; top: 0; right: ${-s + this._getPinnedRight(e)}px; width: ${n}px; height: ${a}px; z-index: 2;` : `position: absolute; top: 0; left: ${s + this._getPinnedLeft(e)}px; width: ${n}px; height: ${a}px; z-index: 2;`;
+			let t = r[e], n = this._getColWidth(t), o = t.pinned === "right" ? `position: absolute; top: 0; left: ${this._getPinnedRightLeft(e)}px; width: ${n}px; height: ${a}px; z-index: 2;` : `position: absolute; top: 0; left: ${s + this._getPinnedLeft(e)}px; width: ${n}px; height: ${a}px; z-index: 2;`;
 			d.push(i`
         <div class="ft-footer-cell ft-pinned" style=${o}>
           ${this.footerData[t.key] ?? ""}</div>
@@ -3901,7 +3907,7 @@ var J = {
 	}
 	_renderCell(e, t, n, r) {
 		let o = this._activeCell?.row === n && this._activeCell?.col === r, s = this._editingCell?.row === n && this._editingCell?.col === r, c = this._selection.isInRange(n, r), l = t.pinned === "left", u = t.pinned === "right", d = l || u, f = this._getColWidth(t), p = this.rowHeight, h = this._colLeftOffsets[r] ?? 0, g;
-		g = l ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(r)}px; width: ${f}px; height: ${p}px; z-index: 2;` : u ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(r)}px; width: ${f}px; height: ${p}px; z-index: 2;` : `left: ${h}px; width: ${f}px; height: ${p}px;`;
+		g = l ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(r)}px; width: ${f}px; height: ${p}px; z-index: 2;` : u ? `position: absolute; top: 0; left: ${this._getPinnedRightLeft(r)}px; width: ${f}px; height: ${p}px; z-index: 2;` : `left: ${h}px; width: ${f}px; height: ${p}px;`;
 		let _ = !this._isCellEditable(t);
 		if (t.conditionalRules && t.conditionalRules.length > 0) {
 			let n = e[t.key], r = {};

package/dist/flex-table.d.ts

@@ -380,6 +380,20 @@ export declare class FlexTable extends LitElement {
     private _getPinnedLeft;
     /** Calculate cumulative right offset for a right-pinned column */
     private _getPinnedRight;
+    /**
+     * X offset for a right-pinned column, in the same content coordinate space the
+     * left-pinned branch uses (origin = the row/header box, prefix columns included).
+     *
+     * A CSS `right` cannot express this. Cells are absolutely positioned inside a box
+     * whose width is the full row width, so a fixed `right` rides the content instead of
+     * the viewport, and a scroll-compensating negative `right` pushes the cell past that
+     * box — which extends the scrollable area, so every scroll widens it again.
+     *
+     * Sticking is therefore expressed as a `left` clamped to the column's natural offset:
+     * the column tracks the viewport's right edge while the content is scrolled past it,
+     * and rests in place once the viewport reaches it.
+     */
+    private _getPinnedRightLeft;
     private _renderHeaderCell;
     private _onHeaderContextMenu;
     private _showHiddenBefore;

package/dist/flex-table.js

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

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-D4W1C_QA.js";
+import { t as e } from "./flex-table-hkmpmDxR.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 var r = n({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -43,7 +43,7 @@
     "dev": "vite serve demo",
     "build": "npm run typecheck && vite build && tsc --emitDeclarationOnly",
     "build:demo": "vite build --config vite.config.demo.ts",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -91,6 +91,7 @@
     "@types/react-dom": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^8.64.0",
     "@typescript-eslint/parser": "^8.64.0",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
     "jsdom": "^29.1.1",
@@ -98,7 +99,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.8",
     "strip-literal": "^3.1.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "vite": "^8.1.4",
     "vitest": "^4.1.10"
   }