feat: v0.14.0 — built-in context menu + XLSX export

- Built-in context menu (show-context-menu attribute)
  - Cell right-click: copy, insert row above/below, delete row,
    hide column, sort asc/desc, filter by value / clear filter
  - Viewport boundary auto-correction
  - context-menu CustomEvent is now cancelable (preventDefault suppresses menu)
- XLSX Export (zero external dependencies)
  - Pure TypeScript ZIP/OOXML implementation (CRC32 + ZIP STORE)
  - exportToFile("xlsx") / exportToString("xlsx") -> Uint8Array
  - Header row with bold style, number/date/boolean cell types
  - Date uses Excel serial number with yyyy-mm-dd format
- ExportFormat now includes "xlsx"
- 253 tests (was 246, +7)

Author: birdnamoo

CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.0] - 2026-05-19
+
+### Added
+- **내장 컨텍스트 메뉴 (`show-context-menu`)**: 셀 우클릭 시 기본 메뉴 표시 (복사, 행 삽입·삭제, 컬럼 숨기기, 정렬, 필터)
+  - `context-menu` 이벤트에서 `preventDefault()` 호출 시 내장 메뉴 억제
+  - 화면 경계 자동 위치 보정
+- **XLSX Export**: `exportToFile('xlsx', ...)` / `exportToString('xlsx')` 지원
+  - 외부 의존성 없는 순수 TypeScript 구현 (ZIP STORE + OOXML)
+  - 헤더 행 포함, 숫자/날짜/불리언 셀 타입 지원, 헤더 bold 스타일
+
+### Changed
+- `ExportFormat`에 `'xlsx'` 추가
+- `exportToString` 반환 타입: `string | Uint8Array` (xlsx는 Uint8Array)
+- `context-menu` CustomEvent가 이제 `cancelable: true`
+
+---
+
 ## [0.13.0] - 2026-05-19
 
 ### Added

ROADMAP.md

@@ -1,7 +1,7 @@
 # Roadmap
 
 > Last updated: 2026-05-19
-> Current version: **v0.13.0** (246 tests)
+> Current version: **v0.14.0** (253 tests)
 
 flex-table 개발 로드맵. 완료된 기능과 향후 계획을 추적한다.
 
@@ -141,6 +141,19 @@ inline whitespace gap. 최종 해결: 모든 prefix/pinned 셀을 `position: abs
 
 ---
 
+## Phase 14: Export/Import & 고급 — v0.14.0 (부분 완료)
+
+> **완료**: 내장 컨텍스트 메뉴 + XLSX Export.
+
+| ID | Task | Status | Description |
+|----|------|--------|-------------|
+| EX-01 | 내장 컨텍스트 메뉴 | ✅ | `show-context-menu` 속성, 우클릭 메뉴 |
+| EX-02 | XLSX Export | ✅ | 순수 TS 구현, zero deps |
+| EX-03 | 행 고정 (Freeze Rows) | ⬜ | 복잡도 상 |
+| EX-04 | 고급 필터 | ⬜ | 복잡도 중 |
+
+---
+
 ## Phase 13: 서식 & 표시 — v0.13.0 ✅ COMPLETE
 
 > **완료**: 셀 포맷, 조건부 서식, 자동완성 편집기, 컬럼 숨기기/표시 UI.
@@ -206,7 +219,8 @@ inline whitespace gap. 최종 해결: 모든 prefix/pinned 셀을 `position: abs
 | **v0.10.0** ✅ | 179 | 74.62 KB | 16.60 KB | React wrapper (`@iyulab/flex-table/react`) |
 | **v0.11.0** ✅ | 189 | TBD | TBD | 마우스 드래그 선택, Fill Down/Right |
 | **v0.12.0** ✅ | 213 | TBD | TBD | 비연속 선택, 컬럼 드래그, select 편집기, 찾기/바꾸기, 행 드래그, Fill Handle |
-| **v0.13.0** | 246 | TBD | TBD | 셀 포맷, 조건부 서식, 자동완성, 컬럼 숨기기/표시 UI |
+| **v0.13.0** ✅ | 246 | TBD | TBD | 셀 포맷, 조건부 서식, 자동완성, 컬럼 숨기기/표시 UI |
+| **v0.14.0** | 253 | TBD | TBD | 내장 컨텍스트 메뉴, XLSX Export |
 
 ---
 

demo/index.html

@@ -77,7 +77,10 @@ <h2 style="margin-top: 32px;">v0.13 New Features</h2>
     Format (number/date) &middot; Conditional Rules &middot; Autocomplete editor &middot;
     Column Hide/Show (right-click header)
   </p>
-  <flex-table id="new-features-table" row-height="32" show-row-numbers editable></flex-table>
+  <flex-table id="new-features-table" row-height="32" show-row-numbers editable show-context-menu></flex-table>
+  <div class="toolbar" style="margin-top: 8px;">
+    <button class="btn" id="export-xlsx-btn">Export XLSX</button>
+  </div>
 
   <h2 style="margin-top: 32px;">Horizontal Virtual Scroll Test</h2>
   <p class="info"><span id="wide-col-count"></span> columns &middot; <span id="wide-row-count"></span> rows &middot; Column 0 pinned left</p>
@@ -267,6 +270,10 @@ <h2 style="margin-top: 32px;">Horizontal Virtual Scroll Test</h2>
       status: ['Active', 'Inactive', 'Pending'][i % 3],
     }));
 
+    document.getElementById('export-xlsx-btn').addEventListener('click', () => {
+      newFeaturesTable.exportToFile('xlsx', 'flex-table-export.xlsx');
+    });
+
     // --- 100-Column Wide Table ---
     const wideTable = document.getElementById('wide-table');
     const WIDE_COLS = 100;

src/export/export.test.ts

@@ -16,7 +16,7 @@ const data: DataRow[] = [
 describe('exportData', () => {
   describe('csv', () => {
     it('should export with headers', () => {
-      const result = exportData(data, cols, 'csv');
+      const result = exportData(data, cols, 'csv') as string;
       const lines = result.split('\n');
       expect(lines[0]).toBe('Name,Age,Active');
       expect(lines[1]).toBe('Alice,30,true');
@@ -25,32 +25,32 @@ describe('exportData', () => {
 
     it('should escape commas in values', () => {
       const d: DataRow[] = [{ name: 'Doe, Jane', age: 20, active: true }];
-      const result = exportData(d, cols, 'csv');
+      const result = exportData(d, cols, 'csv') as string;
       expect(result).toContain('"Doe, Jane"');
     });
 
     it('should escape quotes in values', () => {
       const d: DataRow[] = [{ name: 'He said "hi"', age: 20, active: true }];
-      const result = exportData(d, cols, 'csv');
+      const result = exportData(d, cols, 'csv') as string;
       expect(result).toContain('"He said ""hi"""');
     });
 
     it('should handle null values', () => {
       const d: DataRow[] = [{ name: null, age: undefined, active: true }];
-      const result = exportData(d, cols, 'csv');
+      const result = exportData(d, cols, 'csv') as string;
       const lines = result.split('\n');
       expect(lines[1]).toBe(',,true');
     });
 
     it('should handle empty data', () => {
-      const result = exportData([], cols, 'csv');
+      const result = exportData([], cols, 'csv') as string;
       expect(result).toBe('Name,Age,Active');
     });
   });
 
   describe('tsv', () => {
     it('should use tab delimiter', () => {
-      const result = exportData(data, cols, 'tsv');
+      const result = exportData(data, cols, 'tsv') as string;
       const lines = result.split('\n');
       expect(lines[0]).toBe('Name\tAge\tActive');
       expect(lines[1]).toBe('Alice\t30\ttrue');
@@ -59,7 +59,7 @@ describe('exportData', () => {
 
   describe('json', () => {
     it('should export as JSON array', () => {
-      const result = exportData(data, cols, 'json');
+      const result = exportData(data, cols, 'json') as string;
       const parsed = JSON.parse(result);
       expect(parsed).toEqual([
         { name: 'Alice', age: 30, active: true },
@@ -69,14 +69,14 @@ describe('exportData', () => {
 
     it('should only include column keys', () => {
       const d: DataRow[] = [{ name: 'Alice', age: 30, active: true, extra: 'hidden' }];
-      const result = exportData(d, cols, 'json');
+      const result = exportData(d, cols, 'json') as string;
       const parsed = JSON.parse(result);
       expect(parsed[0]).not.toHaveProperty('extra');
     });
 
     it('should handle null values', () => {
       const d: DataRow[] = [{ name: null, age: undefined, active: true }];
-      const result = exportData(d, cols, 'json');
+      const result = exportData(d, cols, 'json') as string;
       const parsed = JSON.parse(result);
       expect(parsed[0].name).toBeNull();
       expect(parsed[0].age).toBeNull();
@@ -91,23 +91,23 @@ describe('exportData', () => {
 
     it('should export Date objects as ISO 8601 in CSV', () => {
       const d: DataRow[] = [{ created: new Date('2024-03-15'), updated: new Date('2024-03-15T10:30:00Z') }];
-      const result = exportData(d, dateCols, 'csv');
+      const result = exportData(d, dateCols, 'csv') as string;
       const lines = result.split('\n');
       expect(lines[1]).toContain('2024-03-15');
       expect(lines[1]).toContain('T');
     });
 
     it('should export Date objects as ISO 8601 in JSON', () => {
       const d: DataRow[] = [{ created: new Date('2024-03-15'), updated: new Date('2024-03-15T10:30:00Z') }];
-      const result = exportData(d, dateCols, 'json');
+      const result = exportData(d, dateCols, 'json') as string;
       const parsed = JSON.parse(result);
       expect(parsed[0].created).toMatch(/^\d{4}-\d{2}-\d{2}T/);
       expect(parsed[0].updated).toMatch(/^\d{4}-\d{2}-\d{2}T/);
     });
 
     it('should handle string date values as-is', () => {
       const d: DataRow[] = [{ created: '2024-03-15', updated: '2024-03-15T10:30:00' }];
-      const result = exportData(d, dateCols, 'csv');
+      const result = exportData(d, dateCols, 'csv') as string;
       const lines = result.split('\n');
       expect(lines[1]).toBe('2024-03-15,2024-03-15T10:30:00');
     });

src/export/export.ts

@@ -1,22 +1,26 @@
 import type { ColumnDefinition, DataRow } from '../models/types.js';
+import { buildXlsx } from './xlsx-writer.js';
 
-export type ExportFormat = 'csv' | 'tsv' | 'json';
+export type ExportFormat = 'csv' | 'tsv' | 'json' | 'xlsx';
 
 /**
  * Export data to the specified format.
+ * Returns string for text formats (csv/tsv/json) or Uint8Array for xlsx.
  */
 export function exportData(
   data: DataRow[],
   columns: ColumnDefinition[],
   format: ExportFormat
-): string {
+): string | Uint8Array {
   switch (format) {
     case 'csv':
       return exportDelimited(data, columns, ',');
     case 'tsv':
       return exportDelimited(data, columns, '\t');
     case 'json':
       return exportJson(data, columns);
+    case 'xlsx':
+      return buildXlsx(data, columns);
   }
 }
 
@@ -70,7 +74,7 @@ function exportJson(data: DataRow[], columns: ColumnDefinition[]): string {
 /**
  * Trigger a file download in the browser.
  */
-export function downloadFile(content: string, filename: string, mimeType: string): void {
+export function downloadFile(content: string | Uint8Array, filename: string, mimeType: string): void {
   const blob = new Blob([content], { type: mimeType });
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
@@ -87,12 +91,14 @@ const MIME_TYPES: Record<ExportFormat, string> = {
   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',
 };
 
 const EXTENSIONS: Record<ExportFormat, string> = {
   csv: '.csv',
   tsv: '.tsv',
   json: '.json',
+  xlsx: '.xlsx',
 };
 
 export function getExportMimeType(format: ExportFormat): string {