@iyulab/flex-table 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [0.27.0] - 2026-08-23
+
+### Added
+
+- **Shift-click range selection on the row checkbox column** (`selectable` + `selectionMode:
+  'multi'`). Clicking a row's checkbox while holding Shift now selects every row between it and
+  the last row you clicked, matching the row-selection convention used by spreadsheets and file
+  managers. A plain click still just toggles the one row it lands on, and the anchor resets to
+  whichever row you last clicked (shift or not) — the same rules as native cell selection already
+  followed elsewhere in the grid.
+- **`selectWhere(predicate)`** — selects every currently-loaded row for which `predicate(row,
+  dataIndex)` returns true, added to whatever is already selected (call `deselectAll()` first for
+  a fresh set). Built for "the user pastes a list of keys, select the matching rows" flows: the
+  host doesn't need to reason about visual-vs-data row indices or virtualization — it gets the
+  same row objects `data` was set with.
+- **`emptyMessage` / `noMatchingMessage`** — the text shown in the empty state (`data` is empty,
+  or every row is hidden by an active column filter) was previously hardcoded to `'No data'` /
+  `'No matching data'` with no way to override it. Any consumer localizing their UI, or wanting a
+  more specific message ("no orders yet — create one"), had to reimplement the empty state
+  themselves. Both now default to the same English strings for backward compatibility, and can be
+  overridden as string properties/attributes (`empty-message`, `no-matching-message`).
+
+## [0.26.0] - 2026-08-20
+
+### Added
+
+- **`ColumnDefinition.headerAlign`** (`'start' | 'center' | 'end'`, default `'start'`). Header
+  label alignment was previously fixed to the left regardless of how the column's own content is
+  rendered. A column whose `renderer` centers its content (an icon-only action column, for
+  example) had no way to make the header label match, so the two visually drifted apart. Setting
+  `headerAlign: 'center'` (or `'end'`) aligns the header text independently of cell content
+  alignment, which the consumer already fully controls via `renderer`.
+
 ## [0.25.0] - 2026-08-07
 
 ### Added

package/README.md

@@ -4,6 +4,12 @@ A lightweight, schema-agnostic data grid web component built with [Lit](https://
 
 Designed for effortless data input and crystal-clear visibility. Bridges the gap between spreadsheet freedom and database structural integrity.
 
+**`flex-table` vs. `URichTable`** (`@iyulab/data-components`): both can consume external data
+sources such as OData — the choice is about scale and interaction, not the data source.
+
+- **`flex-table`** — large datasets, cell-level editing, spreadsheet-grade interaction
+- **`URichTable`** — small-to-medium datasets, row-level CRUD, selection/filter-focused UX
+
 ## Install
 
 ```bash

package/dist/core/row-selection.d.ts

@@ -20,4 +20,11 @@ export declare class RowSelectionState {
     deselect(index: number): void;
     selectAll(): void;
     deselectAll(): void;
+    /**
+     * Selects every index between from and to, inclusive, in either direction.
+     * Used for shift-click range selection anchored at the last toggled row.
+     * Single mode: only the endpoint (to) ends up selected, matching toggle()'s
+     * "one at a time" semantics — a range doesn't make sense with one slot.
+     */
+    selectRange(from: number, to: number): void;
 }

package/dist/{flex-table-DZFtW02v.js → flex-table-CeT8zkEi.js}

@@ -153,6 +153,9 @@ var s = t`
   .ft-header-cell.ft-sortable { cursor: pointer; }
   .ft-header-cell.ft-sortable:hover { background: var(--ft-header-hover-bg); }
 
+  .ft-header-cell.ft-header-align-center { justify-content: center; }
+  .ft-header-cell.ft-header-align-end { justify-content: flex-end; }
+
   .ft-resize-handle {
     position: absolute;
     right: 0; top: 0; bottom: 0;
@@ -1110,6 +1113,14 @@ var y = class {
 	deselectAll() {
 		this._selected.clear();
 	}
+	selectRange(e, t) {
+		if (this._mode === "single") {
+			this.select(t);
+			return;
+		}
+		let n = Math.min(e, t), r = Math.max(e, t);
+		for (let e = n; e <= r; e++) e >= 0 && e < this._rowCount && this._selected.add(e);
+	}
 };
 //#endregion
 //#region src/core/sorting.ts
@@ -1535,7 +1546,7 @@ async function xe(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.146.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);
@@ -1553,7 +1564,7 @@ var J = {
 	lte: "≤"
 }, Y = 120, X = 40, Z = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = Z, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.loading = !1, 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._rowHeightFromCss = Z, 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._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._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._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();
 	}
@@ -1624,6 +1635,15 @@ var J = {
 	deselectAll() {
 		this.selectable && (this._rowSelection.deselectAll(), this._rowSelectionVersion++, this._dispatchRowSelectionEvent());
 	}
+	selectWhere(e) {
+		if (this.selectable) {
+			for (let t = 0; t < this._visibleRowCount; t++) {
+				let n = this._toDataIndex(t), r = this.data[n];
+				r !== void 0 && e(r, n) && this._rowSelection.select(t);
+			}
+			this._rowSelectionVersion++, this._dispatchRowSelectionEvent(), this.requestUpdate();
+		}
+	}
 	_dispatchRowSelectionEvent() {
 		let { selectedIndices: e, selectedRows: t } = this.getSelectedRows();
 		this.dispatchEvent(new CustomEvent("selection-change", {
@@ -2793,7 +2813,9 @@ var J = {
 		let i = e.sortable !== !1, a = 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",
 			i ? "ft-sortable" : "",
-			c || l ? "ft-pinned" : ""
+			c || l ? "ft-pinned" : "",
+			e.headerAlign === "center" ? "ft-header-align-center" : "",
+			e.headerAlign === "end" ? "ft-header-align-end" : ""
 		].filter(Boolean).join(" "), d = i ? a ? a.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;`;
 		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 = [];
@@ -3789,7 +3811,7 @@ var J = {
 		for (let t = s; t < c; t++) m.push(this._renderHeaderCell(e[t], t));
 		let h = this._colDragIndicatorLeft == null ? "" : n`<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 ? "No data" : "No matching data";
+			let e = this.data.length === 0 ? this.emptyMessage : this.noMatchingMessage;
 			return n`
         ${i}
         <div class="ft-header" role="row" style="width: ${o}px; height: ${a}px;">
@@ -3828,7 +3850,10 @@ var J = {
 		e.target.checked ? this._rowSelection.selectAll() : this._rowSelection.deselectAll(), this._rowSelectionVersion++, this._dispatchRowSelectionEvent();
 	}
 	_onRowCheckboxChange(e, t) {
-		e.stopPropagation(), this._rowSelection.toggle(t), this._rowSelectionVersion++, this._dispatchRowSelectionEvent();
+		e.stopPropagation(), this._checkboxShiftPending && this._lastCheckboxRowIndex !== null ? this._rowSelection.selectRange(this._lastCheckboxRowIndex, t) : this._rowSelection.toggle(t), this._lastCheckboxRowIndex = t, this._checkboxShiftPending = !1, this._rowSelectionVersion++, this._dispatchRowSelectionEvent();
+	}
+	_onRowCheckboxClick(e) {
+		this._checkboxShiftPending = e.shiftKey;
 	}
 	_renderFrozenRows(e, t, i) {
 		let a = this._frozenRowCount;
@@ -3875,6 +3900,7 @@ var J = {
         style="position: absolute; top: 0; left: ${m + h}px; width: 36px; height: ${u}px; z-index: 2;">
         <input type="checkbox"
           .checked=${p}
+          @click=${(e) => this._onRowCheckboxClick(e)}
           @change=${(t) => this._onRowCheckboxChange(t, e)}>
       </div>
     ` : "";
@@ -4050,6 +4076,12 @@ q([a({ type: Array })], $.prototype, "columns", void 0), q([a({
 	type: Number,
 	attribute: "frozen-rows"
 })], $.prototype, "frozenRows", void 0), q([a({
+	type: String,
+	attribute: "empty-message"
+})], $.prototype, "emptyMessage", void 0), q([a({
+	type: String,
+	attribute: "no-matching-message"
+})], $.prototype, "noMatchingMessage", void 0), q([a({
 	type: Boolean,
 	reflect: !0
 })], $.prototype, "loading", void 0), q([a({

package/dist/flex-table.d.ts

@@ -61,6 +61,13 @@ export declare class FlexTable extends LitElement {
     showContextMenu: boolean;
     /** Number of rows to freeze at the top (always visible during vertical scroll). */
     frozenRows: number;
+    /** Message shown when `data` is empty (no rows at all). Default: 'No data'. */
+    emptyMessage: string;
+    /**
+     * Message shown when `data` has rows but every one is hidden by the active
+     * column filters (0 visible rows, non-empty `data`). Default: 'No matching data'.
+     */
+    noMatchingMessage: string;
     /**
      * True일 때 그리드 위에 로딩 오버레이를 표시하고 host에 `aria-busy="true"`를 반영한다.
      * `useODataSource()`가 반환하는 `loading`과 자연 연동하도록 설계됨:
@@ -98,6 +105,10 @@ export declare class FlexTable extends LitElement {
     private _sortedIndices;
     private _openFilterKey;
     private _rowSelectionVersion;
+    /** Anchor row for shift-click range selection on the row checkbox column. */
+    private _lastCheckboxRowIndex;
+    /** Set by the checkbox's own click (which carries shiftKey) just before its change event fires. */
+    private _checkboxShiftPending;
     private _autocompleteState;
     private _headerMenu;
     private _bodyContextMenu;
@@ -138,6 +149,17 @@ export declare class FlexTable extends LitElement {
     selectAll(): void;
     /** Deselect all rows. */
     deselectAll(): void;
+    /**
+     * Selects every currently-loaded row for which `predicate` returns true, in addition to
+     * whatever is already selected — call `deselectAll()` first for a fresh set. Iterates the
+     * visible (post filter/sort) view and resolves each visual row to its underlying data row,
+     * so the predicate always sees the same objects `data` was set with.
+     *
+     * Built for "paste a list of business keys, select the matching rows" flows — e.g. a user
+     * pastes order numbers and the host selects whichever loaded rows match, without the host
+     * needing to know how visual/data indices relate.
+     */
+    selectWhere(predicate: (row: DataRow, dataIndex: number) => boolean): void;
     private _dispatchRowSelectionEvent;
     /**
      * Set a filter for a column. Replaces any existing filter on the same key.
@@ -400,6 +422,12 @@ export declare class FlexTable extends LitElement {
     render(): TemplateResult<1>;
     private _onSelectAllChange;
     private _onRowCheckboxChange;
+    /**
+     * Captures shiftKey from the checkbox's own click (MouseEvent) — the subsequent native
+     * `change` event does not carry modifier keys. Click always fires before change for a
+     * checkbox input, so this reliably primes `_onRowCheckboxChange` for the same interaction.
+     */
+    private _onRowCheckboxClick;
     private _renderFrozenRows;
     private _renderFooter;
     private _renderRow;

package/dist/flex-table.js

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

package/dist/models/types.d.ts

@@ -59,6 +59,13 @@ export interface ColumnDefinition<T = DataRow> {
     hidden?: boolean;
     /** Whether the column is sortable (default: true) */
     sortable?: boolean;
+    /**
+     * Horizontal alignment of the header label (default: 'start').
+     * Independent of cell content alignment — a consumer centering cell content
+     * via a custom `renderer` (e.g. an icon-only action column) sets this to
+     * 'center' so the header visually matches.
+     */
+    headerAlign?: 'start' | 'center' | 'end';
     /** Custom cell renderer — overrides built-in type rendering */
     renderer?: CellRenderer<T>;
     /** Whether the column is editable (default: true — follows global editable setting) */

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-DZFtW02v.js";
+import { t as e } from "./flex-table-CeT8zkEi.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.25.0",
+  "version": "0.27.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",