@iyulab/flex-table 0.34.3 → 0.35.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.35.0] - 2026-09-15
+
+### Changed
+
+- **Every header now has a 24×24 column menu button (`⋮`), which replaces the 14px filter button.**
+  The menu — the same one a header right-click opens — gathers the per-column actions: **Sort
+  ascending** / **Sort descending** (for sortable columns — the keyboard path to sorting), **Filter…**
+  and **Clear filter** (with `show-filters`), **Hide column** / **Show: …**, **Auto-fit width**,
+  **Wider** and **Narrower** (±20px, the menu stays open for repeated steps). Opening a filter is now
+  two clicks. The button is highlighted while its column is filtered, as the filter button was.
+  The old filter button was below the WCAG 2.2 SC 2.5.8 minimum and sat right next to the resize handle;
+  the handle keeps its 6px width and the column menu is its equivalent, which also means resizing
+  no longer requires a drag (SC 2.5.7).
+
+### Fixed
+
+- **Sorting from the cell context menu broke the `sort-change` contract.** It reported
+  `{ sortCriteria }` instead of `{ criteria }`, re-sorted the data locally even with
+  `data-mode="server"`, and ignored `sortable: false`. It now behaves exactly like a header click.
+- **The header and cell context menus could not be used from the keyboard, and could open
+  off-screen.** Their items are now buttons in a `role="menu"`: arrow keys, Home and End move between
+  them, Escape closes and returns focus (to the column menu button, or to the grid). The cell menu
+  focuses its first item when it opens. Both menus are moved back inside the visible area once their
+  real size is known — the cell menu previously flipped on a guessed 200×280 size, and a menu fitted
+  to the window width could still sit under the vertical scrollbar.
+
 ## [0.34.3] - 2026-09-13
 
 ### Fixed

package/README.md

@@ -52,7 +52,8 @@ npm install @iyulab/flex-table
 - **Row Selection** — Checkbox-based row selection (`selectable`, single/multi mode)
 - **Clipboard** — Ctrl+C/X/V with TSV format (Excel/Google Sheets compatible, RFC 4180)
 - **Sorting** — Click header to sort (asc/desc/none), Shift+click for multi-sort
-- **Column Resize** — Drag header border, double-click to auto-fit, Alt+Arrow keyboard resize
+- **Column Menu** — A 24×24 button in every header opens the column's menu: sort, filter, hide/show, auto-fit, wider/narrower (also opens on header right-click)
+- **Column Resize** — Drag header border, double-click to auto-fit, Alt+Arrow keyboard resize, or the column menu
 - **Column Operations** — `addColumn()`, `deleteColumn()`, `moveColumn()` with undo
 - **Pinned Columns** — Freeze columns to left or right (`pinned: 'left' | 'right'`)
 - **Filtering** — Programmatic API + built-in header filter UI (`show-filters`)
@@ -103,7 +104,7 @@ guarantee about a *constrained* host. `height-model.browser.test.ts` pins both s
 | `showRowNumbers` | `show-row-numbers` | `boolean` | `false` | Show row number column |
 | `theme` | `theme` | `'light' \| 'dark'` | auto | Force theme; auto-detects `prefers-color-scheme` |
 | `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false`. Defaults to `true` — a purely read-only grid should set this explicitly rather than relying on per-column `editable: false` alone, since it's also what makes Enter fire `row-activate` (see [Events](#events)) instead of entering edit mode |
-| `showFilters` | `show-filters` | `boolean` | `false` | Show built-in header filter dropdowns |
+| `showFilters` | `show-filters` | `boolean` | `false` | Offer the built-in filter dropdowns through each column menu («Filter…») |
 | `maxRows` | `max-rows` | `number` | `0` | Max row count (0 = unlimited); blocks `addRow()` and paste expansion |
 | `maxUndoSize` | `max-undo-size` | `number` | `100` | Max undo history stack size |
 | `selectable` | `selectable` | `boolean` | `false` | Enable row-level checkbox selection |
@@ -404,6 +405,23 @@ package dependency; CSS custom properties are resolved at render time, not impor
 | Ctrl+Shift+Z / Ctrl+Y | Redo |
 | Alt+ArrowLeft / Alt+ArrowRight | Resize current column (±20px) |
 | Ctrl+Click header | Select entire column |
+| Enter / Space on a column menu button | Open the column menu |
+| ArrowUp / ArrowDown / Home / End (column menu) | Move between menu items |
+| Escape (column menu) | Close the menu and return focus to its button |
+
+## Accessibility
+
+The baseline is **WCAG 2.2**. The table lists what this package **measures in tests** — it is not a
+conformance claim for the success criteria it does not list.
+
+| Success criterion | Guarantee | Measured by |
+|---|---|---|
+| SC 2.5.8 Target Size (Minimum) | Sortable headers, column menu buttons, the open column menu, the open filter dropdown (text and number), the find/replace bar, the cell context menu and row selection checkboxes are at least 24×24 CSS px or meet the spacing exception (24px between centers, counting the neighbouring resize handles), and are actually hit at that position. Two small targets use the equivalent-control exception: the 6px column resize handle (every resize is also in the column menu) and the hidden-column marker (its column menu offers **Show: …**) | `tests/browser/target-size.browser.test.ts` (real Chromium) |
+| SC 2.1.1 Keyboard (pointer-cursor check) | Nothing the grid renders shows a pointer cursor without being an interactive element. Sorting by header click also has a keyboard path — the column menu's **Sort ascending** / **Sort descending** (the check alone cannot see that, because the header cell wraps the menu button) | `tests/browser/target-size.browser.test.ts` · `src/flex-table.test.ts` |
+| SC 2.5.7 Dragging Movements | Resizing never requires a drag — the column menu's **Auto-fit width**, **Wider** and **Narrower** are single clicks | `tests/browser/column-menu.browser.test.ts` |
+
+Not yet measured: the boolean and date filter dropdowns and the comment popup. Color contrast comes
+from the `@iyulab/components` tokens this package reads.
 
 ## Usage Guide
 
@@ -569,7 +587,9 @@ Use `updateRows()` for programmatic edits — it provides undo/redo and dispatch
 
 ### Built-in Filter UI
 
-Enable with `show-filters` attribute. Filter dropdowns appear in column headers:
+Enable with `show-filters` attribute. Each column menu (the `⋮` button in the header) then offers **Filter…**,
+which opens that column's filter dropdown, and **Clear filter** while the column is filtered. The menu
+button is highlighted while its column has an active filter.
 
 - **text**: case-insensitive substring search
 - **number**: min/max range inputs

package/dist/{flex-table-BbeD49ly.js → flex-table-Y4GyDV0Y.js}

@@ -447,20 +447,39 @@ var l = r`
 
   /* --- Filter UI --- */
 
-  .ft-filter-btn {
+  /* 열 메뉴 버튼 — 필터·숨기기·폭 조절이 모두 여기서 열린다. 24px 은 WCAG 2.2 SC 2.5.8 하한이고,
+     6px 리사이즈 핸들의 «등가 수단» 이 이 버튼의 메뉴다. */
+  .ft-column-menu-btn {
     all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    margin-left: auto;
+    flex-shrink: 0;
+    border-radius: 4px;
     cursor: pointer;
-    font-size: 10px;
+    font-size: 16px;
+    line-height: 1;
     color: var(--ft-sort-indicator-color);
-    padding: 0 2px;
-    margin-left: auto;
     opacity: 0.7;
-    flex-shrink: 0;
   }
 
-  .ft-filter-btn:hover { opacity: 1; }
+  .ft-column-menu-btn:hover,
+  .ft-column-menu-btn[aria-expanded="true"] {
+    opacity: 1;
+    background: var(--ft-header-hover-bg);
+  }
+
+  .ft-column-menu-btn:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--ft-active-color);
+    outline-offset: -2px;
+  }
 
-  .ft-filter-btn.ft-filter-active {
+  .ft-column-menu-btn.ft-filter-active {
     color: var(--ft-active-color);
     opacity: 1;
   }
@@ -639,21 +658,36 @@ var l = r`
     min-width: 160px;
     border-radius: 4px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding-block: 4px;
   }
 
   .ft-header-menu-item {
+    all: unset;
+    box-sizing: border-box;
+    display: block;
+    min-block-size: 28px;
     padding: 6px 12px;
     cursor: pointer;
     font-size: var(--ft-font-size, 14px);
     color: var(--ft-text-color);
     white-space: nowrap;
+    text-align: start;
   }
 
-  .ft-header-menu-item:hover {
+  .ft-header-menu-item:hover,
+  .ft-header-menu-item:focus-visible {
     background: var(--ft-selection-bg);
     color: var(--ft-active-color);
   }
 
+  .ft-header-menu-separator {
+    block-size: 1px;
+    margin-block: 4px;
+    background: var(--ft-border-color);
+  }
+
   /* Hidden column indicator in header */
   .ft-hidden-col-indicator {
     position: absolute;
@@ -693,20 +727,28 @@ var l = r`
   }
 
   .ft-context-menu-item {
+    all: unset;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-block-size: 28px;
     padding: 6px 14px;
     cursor: pointer;
     font-size: var(--ft-font-size, 14px);
     color: var(--ft-text-color);
     white-space: nowrap;
     user-select: none;
+    text-align: start;
   }
 
-  .ft-context-menu-item:hover {
+  .ft-context-menu-item:hover,
+  .ft-context-menu-item:focus-visible {
     background: var(--ft-selection-bg);
     color: var(--ft-active-color);
   }
 
-  .ft-context-menu-item.ft-context-menu-danger:hover {
+  .ft-context-menu-item.ft-context-menu-danger:hover,
+  .ft-context-menu-item.ft-context-menu-danger:focus-visible {
     background: #fdd;
     color: #c0392b;
   }
@@ -1247,56 +1289,56 @@ var A = (() => {
 	}
 	return e;
 })();
-function j(e) {
+function ee(e) {
 	let t = 4294967295;
 	for (let n = 0; n < e.length; n++) t = A[(t ^ e[n]) & 255] ^ t >>> 8;
 	return (t ^ 4294967295) >>> 0;
 }
-var M = new TextEncoder();
-function ee(e) {
+var j = new TextEncoder();
+function te(e) {
 	let t = [], n = [], r = 0;
 	for (let i of e) {
-		let e = M.encode(i.name), a = j(i.data), o = i.data.length, s = new ArrayBuffer(30 + e.length), c = new DataView(s);
+		let e = j.encode(i.name), a = ee(i.data), o = i.data.length, s = new ArrayBuffer(30 + e.length), c = new DataView(s);
 		c.setUint32(0, 67324752, !0), c.setUint16(4, 20, !0), c.setUint16(6, 0, !0), c.setUint16(8, 0, !0), c.setUint16(10, 0, !0), c.setUint16(12, 33, !0), c.setUint32(14, a, !0), c.setUint32(18, o, !0), c.setUint32(22, o, !0), c.setUint16(26, e.length, !0), c.setUint16(28, 0, !0), new Uint8Array(s, 30).set(e), t.push(new Uint8Array(s)), t.push(i.data);
 		let l = new ArrayBuffer(46 + e.length), u = new DataView(l);
 		u.setUint32(0, 33639248, !0), u.setUint16(4, 20, !0), u.setUint16(6, 20, !0), u.setUint16(8, 0, !0), u.setUint16(10, 0, !0), u.setUint16(12, 0, !0), u.setUint16(14, 33, !0), u.setUint32(16, a, !0), u.setUint32(20, o, !0), u.setUint32(24, o, !0), u.setUint16(28, e.length, !0), u.setUint16(30, 0, !0), u.setUint16(32, 0, !0), u.setUint16(34, 0, !0), u.setUint16(36, 0, !0), u.setUint32(38, 0, !0), u.setUint32(42, r, !0), new Uint8Array(l, 46).set(e), n.push(new Uint8Array(l)), r += 30 + e.length + o;
 	}
-	let i = N(n), a = /* @__PURE__ */ new ArrayBuffer(22), o = new DataView(a);
-	return o.setUint32(0, 101010256, !0), o.setUint16(4, 0, !0), o.setUint16(6, 0, !0), o.setUint16(8, e.length, !0), o.setUint16(10, e.length, !0), o.setUint32(12, i.length, !0), o.setUint32(16, r, !0), o.setUint16(20, 0, !0), N([
+	let i = M(n), a = /* @__PURE__ */ new ArrayBuffer(22), o = new DataView(a);
+	return o.setUint32(0, 101010256, !0), o.setUint16(4, 0, !0), o.setUint16(6, 0, !0), o.setUint16(8, e.length, !0), o.setUint16(10, e.length, !0), o.setUint32(12, i.length, !0), o.setUint32(16, r, !0), o.setUint16(20, 0, !0), M([
 		...t,
 		i,
 		new Uint8Array(a)
 	]);
 }
-function N(e) {
+function M(e) {
 	let t = e.reduce((e, t) => e + t.length, 0), n = new Uint8Array(t), r = 0;
 	for (let t of e) n.set(t, r), r += t.length;
 	return n;
 }
-function P(e) {
+function N(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function F(e) {
+function P(e) {
 	let t = "";
 	for (e++; e > 0;) t = String.fromCharCode(64 + (e % 26 || 26)) + t, e = Math.floor((e - 1) / 26);
 	return t;
 }
-function I(e, t) {
-	return F(t) + (e + 1);
+function F(e, t) {
+	return P(t) + (e + 1);
 }
-function te(e) {
+function ne(e) {
 	let t = Date.UTC(1899, 11, 30);
 	return (e.getTime() - t) / 864e5;
 }
-var ne = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Types xmlns=\"http://schemas.openxmlformats.org/package/2006/content-types\">\n  <Default Extension=\"rels\" ContentType=\"application/vnd.openxmlformats-package.relationships+xml\"/>\n  <Default Extension=\"xml\" ContentType=\"application/xml\"/>\n  <Override PartName=\"/xl/workbook.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml\"/>\n  <Override PartName=\"/xl/worksheets/sheet1.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml\"/>\n  <Override PartName=\"/xl/styles.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml\"/>\n</Types>", re = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\">\n  <Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument\" Target=\"xl/workbook.xml\"/>\n</Relationships>", ie = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<workbook xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\" xmlns:r=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\">\n  <sheets><sheet name=\"Sheet1\" sheetId=\"1\" r:id=\"rId1\"/></sheets>\n</workbook>", ae = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\">\n  <Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet\" Target=\"worksheets/sheet1.xml\"/>\n  <Relationship Id=\"rId2\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\" Target=\"styles.xml\"/>\n</Relationships>", oe = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<styleSheet xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\">\n  <numFmts count=\"1\"><numFmt numFmtId=\"164\" formatCode=\"yyyy-mm-dd\"/></numFmts>\n  <fonts count=\"2\">\n    <font><sz val=\"11\"/><name val=\"Calibri\"/></font>\n    <font><sz val=\"11\"/><b/><name val=\"Calibri\"/></font>\n  </fonts>\n  <fills count=\"2\">\n    <fill><patternFill patternType=\"none\"/></fill>\n    <fill><patternFill patternType=\"gray125\"/></fill>\n  </fills>\n  <borders count=\"1\"><border><left/><right/><top/><bottom/><diagonal/></border></borders>\n  <cellStyleXfs count=\"1\"><xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\"/></cellStyleXfs>\n  <cellXfs count=\"3\">\n    <xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\"/>\n    <xf numFmtId=\"164\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyNumberFormat=\"1\"/>\n    <xf numFmtId=\"0\" fontId=\"1\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyFont=\"1\"/>\n  </cellXfs>\n</styleSheet>";
-function se(e, t) {
-	let n = [], r = t.map((e, t) => `<c r="${I(0, t)}" t="str" s="2"><v>${P(e.header)}</v></c>`);
+var re = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Types xmlns=\"http://schemas.openxmlformats.org/package/2006/content-types\">\n  <Default Extension=\"rels\" ContentType=\"application/vnd.openxmlformats-package.relationships+xml\"/>\n  <Default Extension=\"xml\" ContentType=\"application/xml\"/>\n  <Override PartName=\"/xl/workbook.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml\"/>\n  <Override PartName=\"/xl/worksheets/sheet1.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml\"/>\n  <Override PartName=\"/xl/styles.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml\"/>\n</Types>", ie = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\">\n  <Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument\" Target=\"xl/workbook.xml\"/>\n</Relationships>", ae = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<workbook xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\" xmlns:r=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\">\n  <sheets><sheet name=\"Sheet1\" sheetId=\"1\" r:id=\"rId1\"/></sheets>\n</workbook>", oe = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\">\n  <Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet\" Target=\"worksheets/sheet1.xml\"/>\n  <Relationship Id=\"rId2\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\" Target=\"styles.xml\"/>\n</Relationships>", se = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<styleSheet xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\">\n  <numFmts count=\"1\"><numFmt numFmtId=\"164\" formatCode=\"yyyy-mm-dd\"/></numFmts>\n  <fonts count=\"2\">\n    <font><sz val=\"11\"/><name val=\"Calibri\"/></font>\n    <font><sz val=\"11\"/><b/><name val=\"Calibri\"/></font>\n  </fonts>\n  <fills count=\"2\">\n    <fill><patternFill patternType=\"none\"/></fill>\n    <fill><patternFill patternType=\"gray125\"/></fill>\n  </fills>\n  <borders count=\"1\"><border><left/><right/><top/><bottom/><diagonal/></border></borders>\n  <cellStyleXfs count=\"1\"><xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\"/></cellStyleXfs>\n  <cellXfs count=\"3\">\n    <xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\"/>\n    <xf numFmtId=\"164\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyNumberFormat=\"1\"/>\n    <xf numFmtId=\"0\" fontId=\"1\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyFont=\"1\"/>\n  </cellXfs>\n</styleSheet>";
+function ce(e, t) {
+	let n = [], r = t.map((e, t) => `<c r="${F(0, t)}" t="str" s="2"><v>${N(e.header)}</v></c>`);
 	return n.push(`<row r="1">${r.join("")}</row>`), e.forEach((e, r) => {
 		let i = t.map((t, n) => {
-			let i = I(r + 1, n), a = e[t.key];
+			let i = F(r + 1, n), a = e[t.key];
 			if (a == null) return `<c r="${i}" t="str"><v></v></c>`;
 			let o = t.type ?? "text";
-			return o === "number" && typeof a == "number" ? `<c r="${i}"><v>${a}</v></c>` : (o === "date" || o === "datetime") && a instanceof Date ? `<c r="${i}" s="1"><v>${te(a).toFixed(6)}</v></c>` : o === "boolean" ? `<c r="${i}" t="b"><v>${+!!a}</v></c>` : `<c r="${i}" t="str"><v>${P(String(a))}</v></c>`;
+			return o === "number" && typeof a == "number" ? `<c r="${i}"><v>${a}</v></c>` : (o === "date" || o === "datetime") && a instanceof Date ? `<c r="${i}" s="1"><v>${ne(a).toFixed(6)}</v></c>` : o === "boolean" ? `<c r="${i}" t="b"><v>${+!!a}</v></c>` : `<c r="${i}" t="str"><v>${N(String(a))}</v></c>`;
 		});
 		n.push(`<row r="${r + 2}">${i.join("")}</row>`);
 	}), `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
@@ -1304,55 +1346,55 @@ function se(e, t) {
   <sheetData>${n.join("")}</sheetData>
 </worksheet>`;
 }
-function ce(e, t) {
-	let n = se(e, t);
-	return ee([
+function le(e, t) {
+	let n = ce(e, t);
+	return te([
 		{
 			name: "[Content_Types].xml",
-			data: M.encode(ne)
+			data: j.encode(re)
 		},
 		{
 			name: "_rels/.rels",
-			data: M.encode(re)
+			data: j.encode(ie)
 		},
 		{
 			name: "xl/workbook.xml",
-			data: M.encode(ie)
+			data: j.encode(ae)
 		},
 		{
 			name: "xl/_rels/workbook.xml.rels",
-			data: M.encode(ae)
+			data: j.encode(oe)
 		},
 		{
 			name: "xl/worksheets/sheet1.xml",
-			data: M.encode(n)
+			data: j.encode(n)
 		},
 		{
 			name: "xl/styles.xml",
-			data: M.encode(oe)
+			data: j.encode(se)
 		}
 	]);
 }
 //#endregion
 //#region src/export/export.ts
-function L(e, t, n) {
+function I(e, t, n) {
 	switch (n) {
-		case "csv": return z(e, t, ",");
-		case "tsv": return z(e, t, "	");
-		case "json": return V(e, t);
-		case "xlsx": return ce(e, t);
+		case "csv": return R(e, t, ",");
+		case "tsv": return R(e, t, "	");
+		case "json": return B(e, t);
+		case "xlsx": return le(e, t);
 	}
 }
-function R(e, t) {
+function L(e, t) {
 	return e == null ? "" : (t.type === "date" || t.type === "datetime") && e instanceof Date ? e.toISOString() : String(e);
 }
-function z(e, t, n) {
-	return [t.map((e) => B(e.header, n)).join(n), ...e.map((e) => t.map((t) => B(R(e[t.key], t), n)).join(n))].join("\n");
+function R(e, t, n) {
+	return [t.map((e) => z(e.header, n)).join(n), ...e.map((e) => t.map((t) => z(L(e[t.key], t), n)).join(n))].join("\n");
 }
-function B(e, t) {
+function z(e, t) {
 	return e.includes(t) || e.includes("\"") || e.includes("\n") || e.includes("\r") ? "\"" + e.replace(/"/g, "\"\"") + "\"" : e;
 }
-function V(e, t) {
+function B(e, t) {
 	let n = e.map((e) => {
 		let n = {};
 		for (let r of t) {
@@ -1363,35 +1405,35 @@ function V(e, t) {
 	});
 	return JSON.stringify(n, null, 2);
 }
-function H(e, t, n) {
+function V(e, t, n) {
 	let r = new Blob([e], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = t, a.style.display = "none", document.body.appendChild(a), a.click(), document.body.removeChild(a), setTimeout(() => URL.revokeObjectURL(i), 100);
 }
-var U = {
+var H = {
 	csv: "text/csv;charset=utf-8",
 	tsv: "text/tab-separated-values;charset=utf-8",
 	json: "application/json;charset=utf-8",
 	xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-}, W = {
+}, U = {
 	csv: ".csv",
 	tsv: ".tsv",
 	json: ".json",
 	xlsx: ".xlsx"
 };
-function le(e) {
-	return U[e];
-}
 function ue(e) {
-	return W[e];
+	return H[e];
+}
+function de(e) {
+	return U[e];
 }
 //#endregion
 //#region src/export/xlsx-reader.ts
-function de(e) {
+function fe(e) {
 	for (let t = e.byteLength - 22; t >= 0; t--) if (e.getUint32(t, !0) === 101010256) return t;
 	throw Error("XLSX: End of central directory not found — not a valid ZIP file");
 }
-function fe(e) {
-	let t = de(e), n = e.getUint32(t + 16, !0), r = e.getUint32(t + 12, !0), i = new TextDecoder("utf-8"), a = [], o = n, s = n + r;
+function pe(e) {
+	let t = fe(e), n = e.getUint32(t + 16, !0), r = e.getUint32(t + 12, !0), i = new TextDecoder("utf-8"), a = [], o = n, s = n + r;
 	for (; o < s && e.getUint32(o, !0) === 33639248;) {
 		let t = e.getUint16(o + 10, !0), n = e.getUint32(o + 20, !0), r = e.getUint32(o + 24, !0), s = e.getUint16(o + 28, !0), c = e.getUint16(o + 30, !0), l = e.getUint16(o + 32, !0), u = e.getUint32(o + 42, !0), d = i.decode(new Uint8Array(e.buffer, o + 46, s));
 		a.push({
@@ -1404,7 +1446,7 @@ function fe(e) {
 	}
 	return a;
 }
-async function pe(e) {
+async function me(e) {
 	let t = new DecompressionStream("deflate-raw"), n = t.writable.getWriter(), r = t.readable.getReader();
 	n.write(e), n.close();
 	let i = [];
@@ -1417,40 +1459,40 @@ async function pe(e) {
 	for (let e of i) o.set(e, s), s += e.length;
 	return o;
 }
-async function me(e, t) {
+async function he(e, t) {
 	let n = t.localHeaderOffset, r = e.getUint16(n + 26, !0), i = e.getUint16(n + 28, !0), a = n + 30 + r + i, o = new Uint8Array(e.buffer, a, t.compressedSize);
 	if (t.compressionMethod === 0) return o.slice();
-	if (t.compressionMethod === 8) return pe(o);
+	if (t.compressionMethod === 8) return me(o);
 	throw Error(`XLSX: Unsupported compression method ${t.compressionMethod}`);
 }
-async function he(e) {
-	let t = new DataView(e), n = fe(t), r = /* @__PURE__ */ new Map();
-	for (let e of n) e.compressedSize === 0 && e.name.endsWith("/") || r.set(e.name, await me(t, e));
+async function ge(e) {
+	let t = new DataView(e), n = pe(t), r = /* @__PURE__ */ new Map();
+	for (let e of n) e.compressedSize === 0 && e.name.endsWith("/") || r.set(e.name, await he(t, e));
 	return r;
 }
-var ge = new TextDecoder("utf-8");
-function G(e) {
-	let t = ge.decode(e);
+var _e = new TextDecoder("utf-8");
+function W(e) {
+	let t = _e.decode(e);
 	return new DOMParser().parseFromString(t, "application/xml");
 }
-function _e(e) {
+function ve(e) {
 	if (!e) return [];
-	let t = G(e);
+	let t = W(e);
 	return Array.from(t.querySelectorAll("si")).map((e) => Array.from(e.querySelectorAll("t")).map((e) => e.textContent ?? "").join(""));
 }
-function ve(e) {
+function ye(e) {
 	let t = (e - 1) * 864e5 + Date.UTC(1899, 11, 30);
 	return new Date(t).toISOString().slice(0, 10);
 }
-function ye(e, t) {
-	let n = G(e).querySelectorAll("row");
+function be(e, t) {
+	let n = W(e).querySelectorAll("row");
 	if (n.length === 0) return [];
 	let r = 0, i = /* @__PURE__ */ new Map();
 	for (let e of n) {
 		let n = parseInt(e.getAttribute("r") ?? "1", 10) - 1, a = /* @__PURE__ */ new Map();
 		i.set(n, a);
 		for (let n of e.querySelectorAll("c")) {
-			let e = be(n.getAttribute("r") ?? "");
+			let e = xe(n.getAttribute("r") ?? "");
 			e > r && (r = e);
 			let i = n.getAttribute("t") ?? "", o = n.getAttribute("s") ?? "", s = n.querySelector("v")?.textContent ?? "", c = n.querySelector("is > t")?.textContent ?? null, l;
 			if (i === "s") l = t[parseInt(s, 10)] ?? "";
@@ -1459,7 +1501,7 @@ function ye(e, t) {
 			else if (s === "") l = "";
 			else {
 				let e = parseFloat(s);
-				l = !isNaN(e) && o !== "" && parseInt(o, 10) > 0 && e >= 1 && e <= 73050 ? ve(e) : s;
+				l = !isNaN(e) && o !== "" && parseInt(o, 10) > 0 && e >= 1 && e <= 73050 ? ye(e) : s;
 			}
 			a.set(e, l);
 		}
@@ -1473,13 +1515,13 @@ function ye(e, t) {
 	}
 	return o;
 }
-function be(e) {
+function xe(e) {
 	let t = 0, n = 0;
 	for (; n < e.length && e[n] >= "A" && e[n] <= "Z";) t = t * 26 + (e.charCodeAt(n) - 64), n++;
 	return t - 1;
 }
-async function K(e) {
-	let t = await he(e), n = _e(t.get("xl/sharedStrings.xml")), r = t.get("xl/worksheets/sheet1.xml");
+async function G(e) {
+	let t = await ge(e), n = ve(t.get("xl/sharedStrings.xml")), r = t.get("xl/worksheets/sheet1.xml");
 	if (!r) {
 		for (let [e, n] of t) if (e.toLowerCase().includes("worksheets/sheet")) {
 			r = n;
@@ -1487,7 +1529,7 @@ async function K(e) {
 		}
 	}
 	if (!r) throw Error("XLSX: No worksheet found");
-	let i = ye(r, n);
+	let i = be(r, n);
 	return i.length === 0 ? {
 		headers: [],
 		rows: []
@@ -1498,7 +1540,7 @@ async function K(e) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
-function q(e, t, n, r) {
+function K(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);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -1506,14 +1548,14 @@ function q(e, t, n, r) {
 }
 //#endregion
 //#region src/flex-table.ts
-var J = {
+var q = {
 	eq: "=",
 	neq: "≠",
 	gt: ">",
 	lt: "<",
 	gte: "≥",
 	lte: "≤"
-}, Y = 120, X = 40, Z = 32, Q = 5, xe = 200, $ = class extends n {
+}, J = 120, Y = 40, X = 20, Z = 32, Q = 5, Se = 200, $ = class extends n {
 	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.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new x(), this._editing = new S(), this._rowSelection = new C(), this._undo = new E(), 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._wasHeaderDrag = !1, this._wasRowDrag = !1, 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._warnedUnconstrained = !1, this._onCommentPopupOutsideClick = () => {
 			this._commitCommentPopup();
@@ -1880,12 +1922,12 @@ var J = {
 			if (!t) return "";
 			let n = this.visibleColumns.slice(t.startCol, t.endCol + 1), r = [];
 			for (let e = t.startRow; e <= t.endRow; e++) r.push(this.data[this._toDataIndex(e)]);
-			return L(r, n, e);
+			return I(r, n, e);
 		}
-		return L(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
+		return I(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
 	}
 	exportToFile(e, t) {
-		H(this.exportToString(e), t ?? `export${ue(e)}`, le(e));
+		V(this.exportToString(e), t ?? `export${de(e)}`, ue(e));
 	}
 	setComment(e, t, n) {
 		let r = this.getComment(e, t);
@@ -1942,7 +1984,7 @@ var J = {
 	async importFromFile(e) {
 		let t = e.name.toLowerCase();
 		if (t.endsWith(".xlsx")) {
-			let t = await K(await e.arrayBuffer());
+			let t = await G(await e.arrayBuffer());
 			this._applyImportedSheet(t);
 		} else if (t.endsWith(".csv") || t.endsWith(".tsv")) {
 			let t = O(await e.text());
@@ -2034,8 +2076,8 @@ var J = {
 		return this._columnWidths.get(e);
 	}
 	_getColWidth(e) {
-		let t = this._columnWidths.get(e.key) ?? e.width ?? Y;
-		return Math.max(t, e.minWidth ?? X);
+		let t = this._columnWidths.get(e.key) ?? e.width ?? J;
+		return Math.max(t, e.minWidth ?? Y);
 	}
 	get headerHeight() {
 		return this.rowHeight + 8;
@@ -2115,7 +2157,7 @@ var J = {
 		(!(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) {
-		this._focusEditor(), this._adjustFilterDropdown(), e.has("stylesheets") && this._syncStylesheets();
+		this._focusEditor(), this._adjustFilterDropdown(), e.has("_headerMenu") && this._keepMenuInView(".ft-header-menu"), e.has("_bodyContextMenu") && this._bodyContextMenu && (this._keepMenuInView(".ft-body-context-menu"), this.shadowRoot?.querySelector(".ft-body-context-menu [role=\"menuitem\"]")?.focus()), e.has("stylesheets") && this._syncStylesheets();
 		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), this.loading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), e.has("_commentPopup") && this._commentPopup) {
 			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
@@ -2157,7 +2199,7 @@ var J = {
 		e !== this._viewportHeight && (this._viewportHeight = e), t !== this._viewportWidth && (this._viewportWidth = t), this._warnIfUnconstrained();
 	}
 	_warnIfUnconstrained() {
-		this._warnedUnconstrained || process.env.NODE_ENV === "production" || this._visibleRowCount < xe || this.scrollHeight > this.clientHeight + 1 || (this._warnedUnconstrained = !0, console.warn(`[@iyulab/flex-table] ${this._visibleRowCount} rows but the host has no height constraint — it grew to fit every row, so virtual scrolling is off and all rows are rendered. Give the host a height (e.g. height: 400px, or flex: 1 1 auto with min-height: 0 inside a sized parent) so it becomes the scroll container.`));
+		this._warnedUnconstrained || process.env.NODE_ENV === "production" || this._visibleRowCount < Se || this.scrollHeight > this.clientHeight + 1 || (this._warnedUnconstrained = !0, console.warn(`[@iyulab/flex-table] ${this._visibleRowCount} rows but the host has no height constraint — it grew to fit every row, so virtual scrolling is off and all rows are rendered. Give the host a height (e.g. height: 400px, or flex: 1 1 auto with min-height: 0 inside a sized parent) so it becomes the scroll container.`));
 	}
 	_onScroll() {
 		this._scrollTop = this.scrollTop, this._scrollLeft = this.scrollLeft;
@@ -2481,17 +2523,21 @@ var J = {
 		if (!e.altKey || !this._activeCell || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return !1;
 		e.preventDefault();
 		let n = t[this._activeCell.col];
-		if (!n) return !0;
-		let r = this._columnWidths.get(n.key) ?? n.width ?? Y, i = e.key === "ArrowRight" ? 20 : -20, a = n.minWidth ?? X, o = Math.max(a, r + i);
-		return this._columnWidths.set(n.key, o), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
+		return n && this._resizeColumnBy(n.key, e.key === "ArrowRight" ? X : -20), !0;
+	}
+	_resizeColumnBy(e, t) {
+		let n = this.visibleColumns.findIndex((t) => t.key === e), r = this.visibleColumns[n];
+		if (!r) return;
+		let i = this._columnWidths.get(r.key) ?? r.width ?? J, a = r.minWidth ?? Y, o = Math.max(a, i + t);
+		this._columnWidths.set(r.key, o), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
-				key: n.key,
+				key: r.key,
 				width: o,
-				colIndex: this._activeCell.col
+				colIndex: n
 			},
 			bubbles: !0,
 			composed: !0
-		})), !0;
+		}));
 	}
 	_handleNavigation(e) {
 		switch (e.key) {
@@ -2827,34 +2873,39 @@ var J = {
         <span>${e.header}</span>
         ${r ? i`<span class="ft-sort-indicator">${r.direction === "asc" ? "▲" : "▼"}</span>` : ""}
         ${o >= 0 ? i`<span class="ft-sort-order">${o + 1}</span>` : ""}
-        ${this.showFilters ? i`
-          <button class="ft-filter-btn ${s ? "ft-filter-active" : ""}"
-            title="Filter"
-            aria-label=${`Filter ${e.header}`}
-            aria-expanded=${this._openFilterKey === e.key ? "true" : "false"}
-            @click=${(t) => this._onFilterBtnClick(t, e)}>
-            \u25BD
-          </button>
-        ` : ""}
+        <button class="ft-column-menu-btn ${s ? "ft-filter-active" : ""}"
+          type="button"
+          title="Column menu"
+          aria-label=${`Column menu: ${e.header}`}
+          aria-haspopup="menu"
+          aria-expanded=${this._headerMenu?.key === e.key ? "true" : "false"}
+          @mousedown=${(e) => e.stopPropagation()}
+          @click=${(t) => this._onColumnMenuBtnClick(t, e)}>
+          \u22EE
+        </button>
         <div class="ft-resize-handle"
           @mousedown=${(e) => {
 			e.stopPropagation(), this._wasHeaderDrag = !0, this._onResizeStart(e, t);
 		}}
-          @dblclick=${(e) => this._onResizeAutoFit(e, t)}></div>
+          @dblclick=${(t) => {
+			t.preventDefault(), t.stopPropagation(), this._autoFitColumn(e.key);
+		}}></div>
       </div>
       ${this._openFilterKey === e.key ? this._renderFilterDropdown(e) : ""}
     `;
 	}
+	_hiddenNeighbors(e) {
+		let t = this.columns, n = t.findIndex((t) => t.key === e.key), r = [];
+		for (let e = n - 1; e >= 0 && t[e].hidden; e--) r.push(t[e]);
+		for (let e = n + 1; e < t.length && t[e].hidden; e++) r.push(t[e]);
+		return r;
+	}
 	_onHeaderContextMenu(e, t) {
-		e.preventDefault();
-		let n = this.columns, r = n.findIndex((e) => e.key === t.key), i = [];
-		for (let e = r - 1; e >= 0 && n[e].hidden; e--) i.push(n[e]);
-		for (let e = r + 1; e < n.length && n[e].hidden; e++) i.push(n[e]);
-		this._headerMenu = {
+		e.preventDefault(), this._openFilterKey = null, this._headerMenu = {
 			key: t.key,
 			x: e.clientX,
 			y: e.clientY,
-			hiddenNeighbors: i
+			hiddenNeighbors: this._hiddenNeighbors(t)
 		}, this.dispatchEvent(new CustomEvent("header-context-menu", {
 			detail: {
 				key: t.key,
@@ -2868,118 +2919,139 @@ var J = {
 			document.addEventListener("click", this._onDocumentClick, { once: !0 });
 		});
 	}
+	_onColumnMenuBtnClick(e, t) {
+		if (e.preventDefault(), e.stopPropagation(), this._headerMenu?.key === t.key) {
+			this._headerMenu = null;
+			return;
+		}
+		let n = e.currentTarget.getBoundingClientRect();
+		this._openFilterKey = null, this._headerMenu = {
+			key: t.key,
+			x: n.left,
+			y: n.bottom,
+			hiddenNeighbors: this._hiddenNeighbors(t)
+		}, requestAnimationFrame(() => {
+			document.addEventListener("click", this._onDocumentClick, { once: !0 });
+		}), this.updateComplete.then(() => this._menuItems()[0]?.focus());
+	}
+	_menuItems() {
+		return Array.from(this.shadowRoot?.querySelectorAll(".ft-header-menu [role=\"menuitem\"]") ?? []);
+	}
+	_columnMenuButton(e) {
+		let t = this.visibleColumns.findIndex((t) => t.key === e);
+		return this.shadowRoot?.querySelector(`.ft-header-cell[data-col-index="${t}"] .ft-column-menu-btn`) ?? null;
+	}
+	_closeHeaderMenu(e) {
+		let t = this._headerMenu?.key;
+		this._headerMenu = null, e && t && this._columnMenuButton(t)?.focus();
+	}
+	_onHeaderMenuKeydown(e) {
+		this._onMenuKeydown(e, ".ft-header-menu", (e) => this._closeHeaderMenu(e));
+	}
+	_onMenuKeydown(e, t, n) {
+		let r = Array.from(this.shadowRoot?.querySelectorAll(`${t} [role="menuitem"]`) ?? []), i = r.indexOf(e.target), a = -1;
+		switch (e.key) {
+			case "ArrowDown":
+				a = i < 0 ? 0 : (i + 1) % r.length;
+				break;
+			case "ArrowUp":
+				a = i <= 0 ? r.length - 1 : i - 1;
+				break;
+			case "Home":
+				a = 0;
+				break;
+			case "End":
+				a = r.length - 1;
+				break;
+			case "Escape":
+				e.preventDefault(), e.stopPropagation(), n(!0);
+				return;
+			case "Tab":
+				n(!1);
+				return;
+			default: return;
+		}
+		e.preventDefault(), e.stopPropagation(), r[a]?.focus();
+	}
+	_openFilterFromMenu(e) {
+		this._headerMenu = null, this._openFilterKey = e, requestAnimationFrame(() => {
+			document.addEventListener("click", this._onDocumentClick, { once: !0 });
+		}), this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(".ft-filter-dropdown input, .ft-filter-dropdown select")?.focus();
+		});
+	}
 	_showHiddenBefore(e) {
 		let t = this.columns, n = t.findIndex((t) => t.key === e.key);
 		for (let e = n - 1; e >= 0 && t[e].hidden; e--) this._setColumnHidden(t[e].key, !1);
 	}
 	_renderHeaderContextMenu() {
 		if (!this._headerMenu) return a;
-		let { key: e, x: t, y: n, hiddenNeighbors: r } = this._headerMenu;
-		return this.columns.find((t) => t.key === e) ? i`
-      <div class="ft-header-menu" style="position: fixed; left: ${t}px; top: ${n}px; z-index: 200;"
-        @mousedown=${(e) => e.stopPropagation()}>
-        <div class="ft-header-menu-item"
-          @click=${() => {
-			this._setColumnHidden(e, !0), this._headerMenu = null;
-		}}>
-          Hide column
-        </div>
-        ${r.map((e) => i`
-          <div class="ft-header-menu-item"
-            @click=${() => {
-			this._setColumnHidden(e.key, !1), this._headerMenu = null;
-		}}>
-            Show: ${e.header}
-          </div>
-        `)}
+		let { key: e, x: t, y: n, hiddenNeighbors: r } = this._headerMenu, o = this.columns.find((t) => t.key === e);
+		if (!o) return a;
+		let s = this._filters.some((t) => t.key === e), c = (e, t, n, r = !1) => i`
+      <button type="button" role="menuitem" class="ft-header-menu-item" data-action=${e}
+        @click=${(e) => {
+			e.stopPropagation(), r || (this._headerMenu = null), n();
+		}}>${t}</button>
+    `;
+		return i`
+      <div class="ft-header-menu" role="menu" aria-label=${`${o.header} column`}
+        style="position: fixed; left: ${t}px; top: ${n}px; z-index: 200;"
+        @mousedown=${(e) => e.stopPropagation()}
+        @keydown=${(e) => this._onHeaderMenuKeydown(e)}>
+        ${o.sortable === !1 ? a : i`
+          ${c("sort-asc", "Sort ascending", () => this._applySortFromMenu(e, "asc"))}
+          ${c("sort-desc", "Sort descending", () => this._applySortFromMenu(e, "desc"))}
+          <div class="ft-header-menu-separator" role="separator"></div>
+        `}
+        ${this.showFilters ? i`
+          ${c("filter", "Filter…", () => this._openFilterFromMenu(e))}
+          ${s ? c("clear-filter", "Clear filter", () => this._clearColumnFilter(e)) : a}
+          <div class="ft-header-menu-separator" role="separator"></div>
+        ` : a}
+        ${c("hide", "Hide column", () => this._setColumnHidden(e, !0))}
+        ${r.map((e) => c("show", i`Show: ${e.header}`, () => this._setColumnHidden(e.key, !1)))}
+        <div class="ft-header-menu-separator" role="separator"></div>
+        ${c("autofit", "Auto-fit width", () => this._autoFitColumn(e))}
+        ${c("wider", "Wider", () => this._resizeColumnBy(e, X), !0)}
+        ${c("narrower", "Narrower", () => this._resizeColumnBy(e, -20), !0)}
       </div>
-    ` : a;
+    `;
 	}
 	_renderBodyContextMenu() {
 		if (!this._bodyContextMenu) return a;
 		let { colIndex: e, dataIndex: t, x: n, y: r } = this._bodyContextMenu, o = this.visibleColumns[e];
 		if (!o) return a;
-		let s = this.data[t]?.[o.key], c = this._filters.some((e) => e.key === o.key), l = () => {
-			this._bodyContextMenu = null;
-		}, u = n + 200 > window.innerWidth ? n - 200 : n, d = r + 280 > window.innerHeight ? r - 280 : r;
+		let s = this.data[t]?.[o.key], c = this._filters.some((e) => e.key === o.key), l = (e = !1) => {
+			this._bodyContextMenu = null, e && this.focus();
+		}, u = !!this.getComment(t, o.key), d = (e, t, n = !1) => i`
+      <button type="button" role="menuitem"
+        class="ft-context-menu-item ${n ? "ft-context-menu-danger" : ""}"
+        @click=${() => {
+			t(), l();
+		}}>${e}</button>
+    `, f = i`<div class="ft-context-menu-separator" role="separator"></div>`;
 		return i`
-      <div class="ft-body-context-menu" style="position: fixed; left: ${u}px; top: ${d}px; z-index: 200;"
-        @mousedown=${(e) => e.stopPropagation()}>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this._handleCopy(!1), l();
-		}}>
-          Copy
-        </div>
-        <div class="ft-context-menu-separator"></div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this.addRow(void 0, t), l();
-		}}>
-          Insert row above
-        </div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this.addRow(void 0, t + 1), l();
-		}}>
-          Insert row below
-        </div>
-        <div class="ft-context-menu-item ft-context-menu-danger"
-          @click=${() => {
-			this.deleteRows([t]), l();
-		}}>
-          Delete row
-        </div>
-        <div class="ft-context-menu-separator"></div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this._setColumnHidden(o.key, !0), l();
-		}}>
-          Hide column
-        </div>
-        <div class="ft-context-menu-separator"></div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this._applySortFromMenu(o.key, "asc"), l();
-		}}>
-          Sort ascending ↑
-        </div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this._applySortFromMenu(o.key, "desc"), l();
-		}}>
-          Sort descending ↓
-        </div>
-        <div class="ft-context-menu-separator"></div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this.setFilter(o.key, (e) => e === s), l();
-		}}>
-          Filter by this value
-        </div>
-        ${c ? i`
-          <div class="ft-context-menu-item"
-            @click=${() => {
-			this.removeFilter(o.key), l();
-		}}>
-            Clear filter
-          </div>
-        ` : ""}
-        <div class="ft-context-menu-separator"></div>
-        <div class="ft-context-menu-item"
-          @click=${() => {
-			this._openCommentPopup(t, o.key, n, r), l();
-		}}>
-          ${this.getComment(t, o.key) ? "Edit Comment" : "Add Comment"}
-        </div>
-        ${this.getComment(t, o.key) ? i`
-          <div class="ft-context-menu-item ft-context-menu-danger"
-            @click=${() => {
-			this.setComment(t, o.key, null), l();
-		}}>
-            Delete Comment
-          </div>
-        ` : ""}
+      <div class="ft-body-context-menu" role="menu" aria-label="Cell actions"
+        style="position: fixed; left: ${n}px; top: ${r}px; z-index: 200;"
+        @mousedown=${(e) => e.stopPropagation()}
+        @keydown=${(e) => this._onMenuKeydown(e, ".ft-body-context-menu", l)}>
+        ${d("Copy", () => this._handleCopy(!1))}
+        ${f}
+        ${d("Insert row above", () => this.addRow(void 0, t))}
+        ${d("Insert row below", () => this.addRow(void 0, t + 1))}
+        ${d("Delete row", () => this.deleteRows([t]), !0)}
+        ${f}
+        ${d("Hide column", () => this._setColumnHidden(o.key, !0))}
+        ${f}
+        ${d("Sort ascending ↑", () => this._applySortFromMenu(o.key, "asc"))}
+        ${d("Sort descending ↓", () => this._applySortFromMenu(o.key, "desc"))}
+        ${f}
+        ${d("Filter by this value", () => this.setFilter(o.key, (e) => e === s))}
+        ${c ? d("Clear filter", () => this.removeFilter(o.key)) : a}
+        ${f}
+        ${d(u ? "Edit Comment" : "Add Comment", () => this._openCommentPopup(t, o.key, n, r))}
+        ${u ? d("Delete Comment", () => this.setComment(t, o.key, null), !0) : a}
       </div>
     `;
 	}
@@ -3022,15 +3094,22 @@ var J = {
       </div>
     `;
 	}
-	_applySortFromMenu(e, n) {
-		this.columns.find((t) => t.key === e) && (this._sortCriteria = [{
+	_applySortFromMenu(e, t) {
+		let n = this.columns.find((t) => t.key === e);
+		n && n.sortable !== !1 && (this._sortCriteria = [{
 			key: e,
-			direction: n
-		}], this._sortedIndices = t(this.data, this._sortCriteria, this.columns), this.dispatchEvent(new CustomEvent("sort-change", {
-			detail: { sortCriteria: [...this._sortCriteria] },
+			direction: t
+		}], this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sort-change", {
+			detail: { criteria: [...this._sortCriteria] },
 			bubbles: !0,
 			composed: !0
-		})), this.requestUpdate());
+		})));
+	}
+	_keepMenuInView(e) {
+		let t = this.shadowRoot?.querySelector(e);
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = document.documentElement.clientWidth, i = document.documentElement.clientHeight;
+		n.right > r - 4 && (t.style.left = `${Math.max(4, r - n.width - 4)}px`), n.bottom > i - 4 && (t.style.top = `${Math.max(4, i - n.height - 4)}px`);
 	}
 	_adjustFilterDropdown() {
 		if (!this._openFilterKey) return;
@@ -3040,13 +3119,6 @@ var J = {
 		let t = e.getBoundingClientRect(), n = window.innerHeight;
 		t.bottom > n && (e.style.top = "auto", e.style.bottom = "100%");
 	}
-	_onFilterBtnClick(e, t) {
-		e.preventDefault(), e.stopPropagation();
-		let n = this._openFilterKey === t.key ? null : t.key;
-		this._openFilterKey = n, n && requestAnimationFrame(() => {
-			document.addEventListener("click", this._onDocumentClick, { once: !0 });
-		});
-	}
 	_renderFilterDropdown(e) {
 		let t = e.type ?? "text";
 		return i`
@@ -3229,7 +3301,7 @@ var J = {
           @keydown=${(e) => {
 			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
 		}}>
-          ${Object.keys(J).map((e) => i`<option value=${e}>${J[e]}</option>`)}
+          ${Object.keys(q).map((e) => i`<option value=${e}>${q[e]}</option>`)}
         </select>
         <input class="ft-filter-input ft-num-cond-input" type="number" placeholder="Value"
           .value=${n.value == null ? "" : String(n.value)}
@@ -3334,13 +3406,12 @@ var J = {
 	_clearColumnFilter(e) {
 		this.removeFilter(e), this._textFilterState.delete(e), this._numberFilterState.delete(e), this._dateFilterState.delete(e), this._emptyFilterState.delete(e), this._openFilterKey = null;
 	}
-	_onResizeAutoFit(e, t) {
-		e.preventDefault(), e.stopPropagation();
-		let n = this.visibleColumns[t];
+	_autoFitColumn(e) {
+		let t = this.visibleColumns.findIndex((t) => t.key === e), n = this.visibleColumns[t];
 		if (!n) return;
 		let r = this.shadowRoot?.querySelectorAll(`.ft-cell[data-col-index="${t}"]`), i = 0, a = this.shadowRoot?.querySelector(`.ft-header-cell[data-col-index="${t}"]`);
 		if (a && (i = Math.max(i, a.scrollWidth)), r) for (let e of r) i = Math.max(i, e.scrollWidth);
-		let o = n.minWidth ?? X, s = Math.max(o, i + 8);
+		let o = n.minWidth ?? Y, s = Math.max(o, i + 8);
 		this._columnWidths.set(n.key, s), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
 				key: n.key,
@@ -3353,7 +3424,7 @@ var J = {
 	}
 	_onResizeStart(e, t) {
 		e.preventDefault(), e.stopPropagation();
-		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? Y;
+		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? J;
 		this._resizing = {
 			colIndex: t,
 			startX: e.clientX,
@@ -3361,13 +3432,13 @@ var J = {
 		};
 		let i = (e) => {
 			if (!this._resizing) return;
-			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? X, i = Math.max(r, this._resizing.startWidth + t);
+			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? Y, i = Math.max(r, this._resizing.startWidth + t);
 			this._columnWidths.set(n.key, i), this.requestUpdate();
 		}, a = () => {
 			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", o), this._resizeCleanup = null;
 		}, o = () => {
 			if (a(), this._resizing) {
-				let e = this._columnWidths.get(n.key) ?? Y;
+				let e = this._columnWidths.get(n.key) ?? J;
 				this.dispatchEvent(new CustomEvent("column-resize", {
 					detail: {
 						key: n.key,
@@ -4032,60 +4103,60 @@ var J = {
 		return isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}T${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
 	}
 };
-q([s({ type: Array })], $.prototype, "columns", void 0), q([s({
+K([s({ type: Array })], $.prototype, "columns", void 0), K([s({
 	type: Array,
 	hasChanged: () => !0
-})], $.prototype, "data", null), q([s({
+})], $.prototype, "data", null), K([s({
 	type: Boolean,
 	attribute: "clear-undo-on-data-change"
-})], $.prototype, "clearUndoOnDataChange", void 0), q([s({
+})], $.prototype, "clearUndoOnDataChange", void 0), K([s({
 	type: Boolean,
 	attribute: "clear-selection-on-data-change"
-})], $.prototype, "clearSelectionOnDataChange", void 0), q([s({
+})], $.prototype, "clearSelectionOnDataChange", void 0), K([s({
 	type: Number,
 	attribute: "row-height"
-})], $.prototype, "rowHeight", null), q([s({
+})], $.prototype, "rowHeight", null), K([s({
 	type: Boolean,
 	attribute: "show-row-numbers"
-})], $.prototype, "showRowNumbers", void 0), q([s({
+})], $.prototype, "showRowNumbers", void 0), K([s({
 	type: String,
 	reflect: !0
-})], $.prototype, "theme", void 0), q([s({
+})], $.prototype, "theme", void 0), K([s({
 	type: Number,
 	attribute: "max-rows"
-})], $.prototype, "maxRows", void 0), q([s({ type: Boolean })], $.prototype, "editable", void 0), q([s({
+})], $.prototype, "maxRows", void 0), K([s({ type: Boolean })], $.prototype, "editable", void 0), K([s({
 	type: Boolean,
 	attribute: "show-filters"
-})], $.prototype, "showFilters", void 0), q([s({
+})], $.prototype, "showFilters", void 0), K([s({
 	type: Boolean,
 	attribute: "show-context-menu"
-})], $.prototype, "showContextMenu", void 0), q([s({
+})], $.prototype, "showContextMenu", void 0), K([s({
 	type: Number,
 	attribute: "frozen-rows"
-})], $.prototype, "frozenRows", void 0), q([s({
+})], $.prototype, "frozenRows", void 0), K([s({
 	type: String,
 	attribute: "empty-message"
-})], $.prototype, "emptyMessage", void 0), q([s({
+})], $.prototype, "emptyMessage", void 0), K([s({
 	type: String,
 	attribute: "no-matching-message"
-})], $.prototype, "noMatchingMessage", void 0), q([s({
+})], $.prototype, "noMatchingMessage", void 0), K([s({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "loading", void 0), q([s({
+})], $.prototype, "loading", void 0), K([s({
 	type: Boolean,
 	attribute: "import-enabled"
-})], $.prototype, "importEnabled", void 0), q([s({ type: Boolean })], $.prototype, "selectable", void 0), q([s({
+})], $.prototype, "importEnabled", void 0), K([s({ type: Boolean })], $.prototype, "selectable", void 0), K([s({
 	type: String,
 	attribute: "selection-mode"
-})], $.prototype, "selectionMode", null), q([s({
+})], $.prototype, "selectionMode", null), K([s({
 	type: String,
 	attribute: "data-mode"
-})], $.prototype, "dataMode", void 0), q([s({
+})], $.prototype, "dataMode", void 0), K([s({
 	type: Object,
 	attribute: "footer-data"
-})], $.prototype, "footerData", void 0), q([s({ attribute: !1 })], $.prototype, "stylesheets", void 0), q([s({
+})], $.prototype, "footerData", void 0), K([s({ attribute: !1 })], $.prototype, "stylesheets", void 0), K([s({
 	type: Number,
 	attribute: "max-undo-size"
-})], $.prototype, "maxUndoSize", null), q([c()], $.prototype, "_scrollTop", void 0), q([c()], $.prototype, "_scrollLeft", void 0), q([c()], $.prototype, "_viewportHeight", void 0), q([c()], $.prototype, "_viewportWidth", void 0), q([c()], $.prototype, "_activeCell", void 0), q([c()], $.prototype, "_editingCell", void 0), q([c()], $.prototype, "_sortCriteria", void 0), q([c()], $.prototype, "_openFilterKey", void 0), q([c()], $.prototype, "_rowSelectionVersion", void 0), q([c()], $.prototype, "_autocompleteState", void 0), q([c()], $.prototype, "_headerMenu", void 0), q([c()], $.prototype, "_bodyContextMenu", void 0), q([c()], $.prototype, "_commentPopup", void 0), q([c()], $.prototype, "_isDragOver", void 0), $ = q([o("flex-table")], $);
+})], $.prototype, "maxUndoSize", null), K([c()], $.prototype, "_scrollTop", void 0), K([c()], $.prototype, "_scrollLeft", void 0), K([c()], $.prototype, "_viewportHeight", void 0), K([c()], $.prototype, "_viewportWidth", void 0), K([c()], $.prototype, "_activeCell", void 0), K([c()], $.prototype, "_editingCell", void 0), K([c()], $.prototype, "_sortCriteria", void 0), K([c()], $.prototype, "_openFilterKey", void 0), K([c()], $.prototype, "_rowSelectionVersion", void 0), K([c()], $.prototype, "_autocompleteState", void 0), K([c()], $.prototype, "_headerMenu", void 0), K([c()], $.prototype, "_bodyContextMenu", void 0), K([c()], $.prototype, "_commentPopup", void 0), K([c()], $.prototype, "_isDragOver", void 0), $ = K([o("flex-table")], $);
 //#endregion
-export { m as a, C as i, L as n, E as r, $ as t };
+export { m as a, C as i, I as n, E as r, $ as t };

package/dist/flex-table.d.ts

@@ -366,6 +366,8 @@ export declare class FlexTable extends LitElement {
     private _onKeyDown;
     private _handleCtrlKey;
     private _handleAltKey;
+    /** Widen (positive) or narrow (negative) a visible column by `delta` px, never below its minimum. */
+    private _resizeColumnBy;
     private _handleNavigation;
     private _handleCopy;
     private _handlePaste;
@@ -402,7 +404,26 @@ export declare class FlexTable extends LitElement {
      */
     private _getPinnedRightLeft;
     private _renderHeaderCell;
+    /** Hidden columns directly adjacent to `col` (before and after) — the ones its menu can show again. */
+    private _hiddenNeighbors;
     private _onHeaderContextMenu;
+    /**
+     * The header's column menu button — the same menu a right-click opens, anchored under the button.
+     * It is the pointer-sized, keyboard-reachable way to every per-column action: filtering, hiding,
+     * and resizing without dragging the 6px handle (WCAG 2.2 SC 2.5.7 / 2.5.8).
+     */
+    private _onColumnMenuBtnClick;
+    private _menuItems;
+    private _columnMenuButton;
+    private _closeHeaderMenu;
+    private _onHeaderMenuKeydown;
+    /**
+     * Menu keyboard pattern shared by the column menu and the cell context menu: arrows and Home/End
+     * move focus between the items (wrapping), Escape closes and returns focus, Tab closes.
+     */
+    private _onMenuKeydown;
+    /** Open the filter dropdown for `key` from its column menu, focusing its first control. */
+    private _openFilterFromMenu;
     private _showHiddenBefore;
     private _renderHeaderContextMenu;
     private _renderBodyContextMenu;
@@ -411,9 +432,15 @@ export declare class FlexTable extends LitElement {
     private _commitCommentPopup;
     private _cancelCommentPopup;
     private _renderCommentPopup;
+    /**
+     * Sort by one column from a menu — the column menu (the keyboard path to sorting) and the cell
+     * context menu. Same contract as a header click: server mode only reports, and `sort-change`
+     * carries `{ criteria }`.
+     */
     private _applySortFromMenu;
+    /** Keep a fixed-position menu inside the viewport — a menu opened near the right or bottom edge would spill off-screen. */
+    private _keepMenuInView;
     private _adjustFilterDropdown;
-    private _onFilterBtnClick;
     private _renderFilterDropdown;
     private _buildTextPredicate;
     private _applyTextFilter;
@@ -439,7 +466,8 @@ export declare class FlexTable extends LitElement {
     private _applyDateFilter;
     private _renderBooleanFilter;
     private _clearColumnFilter;
-    private _onResizeAutoFit;
+    /** Size a column to its widest rendered content — the resize handle's double-click and the column menu. */
+    private _autoFitColumn;
     private _onResizeStart;
     private _onHeaderMouseDown;
     private _startColumnGhost;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-BbeD49ly.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-Y4GyDV0Y.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-BbeD49ly.js";
+import { t as e } from "./flex-table-Y4GyDV0Y.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.3",
+  "version": "0.35.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -46,7 +46,6 @@
     "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix"
   },
@@ -91,16 +90,14 @@
     "@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",
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
-    "jsdom": "^29.1.1",
-    "loupe": "^3.2.1",
+    "jsdom": "^30.0.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.8",
-    "strip-literal": "^3.1.0",
     "typescript": "^6.0.2",
     "vite": "^8.1.4",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   }
 }