@iyulab/flex-table 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [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/{flex-table-DZFtW02v.js → flex-table-BSxnKOL3.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;
@@ -1535,7 +1538,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);
@@ -2793,7 +2796,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 = [];

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-BSxnKOL3.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-BSxnKOL3.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.26.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",