@iyulab/data-components 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [0.4.1] - 2026-05-07
+
+### Fixed
+- eslint.config.js에서 제거된 React 플러그인 참조 삭제 (eslint-plugin-react-hooks, eslint-plugin-react-refresh)
+
+## [0.4.0] - 2026-05-07
+
+### BREAKING CHANGES
+- `UDataGrid` 컴포넌트 제거 — DevExtreme 상용 라이선스 의존성 해소
+  - `src/components/data-grid/UDataGrid.tsx`, `UDataGrid.types.ts` 삭제
+  - `src/utilities/devExtremeCssInjection.ts`, `src/styles/devextreme-overrides.css` 삭제
+  - `exports['./data-grid']` 제거
+  - `dependencies`에서 `devextreme`, `devextreme-react`, `react`, `react-dom` 제거
+
+### Migration
+UDataGrid 대체: `@iyulab/flex-table` + `@iyulab/flex-table/odata` 조합 사용
+→ [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
+
+## [0.3.2] - 2026-05-07
+
+### Added
+- `docs/migrating-from-datagrid.md`: UDataGrid(DevExtreme)에서 `@iyulab/flex-table`로 전환하는 마이그레이션 가이드 추가 (yesung-oms 9개 페이지 실증 기반)
+- README에 UDataGrid 대안 섹션 및 마이그레이션 가이드 링크 추가
+- `docs/UDataGrid.md` 상단에 마이그레이션 가이드 링크 추가
+
+## [0.3.1] - 2026-04-01
+### Changed
+- 컴포넌트 파일 구조 리팩토링: `.component.ts` 파일을 기존 `.ts`로 병합 (UDataView, USimpleSheet, URichTable)
+- UDataView: 다크모드 하드코딩 스타일 제거 — CSS 변수 기반으로 전환
+- 의존성 업데이트: devextreme 25.2.5, vite 8.0.3, typescript-eslint 8.57.2 등
+
+## [0.3.0] - 2026-03-26
+### Added
+- URichTable: 코어 컴포넌트 추가 — 렌더링, 정렬, 필터, 편집, 페이지네이션
+- URichTable: 엑셀 스타일 클립보드(복사/붙여넣기) + 키보드 네비게이션
+- URichTable: 다크모드 지원 (`:host-context([theme="dark"])`)
+- USimpleSheet: `setSelection()`, `selectAll()` 공개 API 추가
+
 ## [0.1.8] - 2026-03-08
 ### Added
 - USimpleSheet: `format` 속성 — Intl.NumberFormatOptions(통화, 퍼센트 등) 또는 콜백 함수로 표시 포맷 지정
@@ -13,5 +51,30 @@
   - 에러 발생 시 빈 문자열 표시
   - 붙여넣기/Fill 시 compute 열 건너뛰기
 
-## [0.1.6]
-- Initial library version release
+## [0.1.6] - 2026-03-08
+### Added
+- USimpleSheet: 드롭다운 셀렉터 기능 (`options`/`strict` 속성)
+  - 드롭다운 상태 관리, 필터링, 키보드 네비게이션
+  - 다크모드 지원
+### Fixed
+- USimpleSheet: 문자 입력 시 이중 입력 방지 (`preventDefault` 추가)
+- USimpleSheet: strict 모드에서 `_isDropdownClick` 리셋 및 안전한 스크롤 처리
+
+## [0.1.4] - 2026-03-07
+### Changed
+- UDataView, USimpleSheet: 다크모드 스타일 업데이트
+
+## [0.1.3] - 2026-03-07
+### Fixed
+- Vite 빌드에 컴포넌트 엔트리 포인트 추가 (sub-path exports 수정)
+
+## [0.1.2] - 2026-03-07
+### Added
+- 컴포넌트별 독립 임포트를 위한 sub-path exports 추가
+
+## [0.1.1] - 2026-03-06
+### Changed
+- 재배포를 위한 버전 범프
+
+## [0.1.0] - 2026-03-06
+- 초기 라이브러리 릴리스

package/README.md

@@ -6,7 +6,11 @@
 
 - **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
-- **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
+- **URichTable** — 정렬/필터/편집/페이지네이션 지원 테이블 (Lit)
+
+> **UDataGrid (DevExtreme)는 v0.4.0에서 제거되었습니다.**
+> OData 서버 사이드 그리드가 필요하면 `@iyulab/flex-table`을 사용하세요.
+> → [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Installation
 
@@ -73,26 +77,12 @@ npm install @iyulab/data-components
 ></u-data-view>
 ```
 
-### UDataGrid (React)
-
-```tsx
-import { UDataGrid } from '@iyulab/data-components';
-
-<UDataGrid
-  dataSourceUrl="https://api.example.com/odata/products"
-  keyField="id"
-  columns={[
-    { dataField: 'name',  caption: '상품명' },
-    { dataField: 'price', caption: '가격', dataType: 'number' },
-  ]}
-/>
-```
-
 ## Documentation
 
 - [USimpleSheet](./docs/USimpleSheet.md)
 - [UDataView](./docs/UDataView.md)
-- [UDataGrid](./docs/UDataGrid.md)
+- [URichTable](./docs/URichTable.md)
+- [UDataGrid 마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Theming
 

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate };

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/decorateMetadata.js

@@ -0,0 +1,6 @@
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorateMetadata.js
+function __decorateMetadata(k, v) {
+	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+//#endregion
+export { __decorateMetadata };

package/dist/components/data-view/UDataView.d.ts

@@ -1,8 +1,49 @@
-import { UDataView } from './UDataView.component.js';
+import { TemplateResult } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+export type ViewMode = 'grid' | 'list' | 'table';
+export interface DataColumn {
+    key: string;
+    label?: string;
+    width?: string;
+}
+/**
+ * Data View Component
+ * 데이터를 3가지 레이아웃(grid, list, table)으로 표시하는 컴포넌트
+ */
+export declare class UDataView extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 표시할 데이터 배열 */
+    items: any[];
+    /** 현재 뷰 모드 */
+    mode: ViewMode;
+    /** 표시할 컬럼 설정 (미지정시 자동 감지) */
+    columns?: DataColumn[];
+    /** 그리드 모드 최소 폭 */
+    gridMinWidth: string;
+    /** 아이템 간격 */
+    gap: string;
+    /** 커스텀 렌더 함수 (grid/list 카드용) */
+    renderCard?: (item: any, index: number) => TemplateResult;
+    /** 커스텀 셀 렌더 함수 (table용) */
+    renderCell?: (item: any, column: DataColumn, index: number) => TemplateResult | string;
+    private selectedIndex;
+    render(): TemplateResult<1>;
+    private renderToolbar;
+    private renderViewButton;
+    private renderContent;
+    private renderGrid;
+    private renderList;
+    private renderTable;
+    private renderGridItem;
+    private renderListItem;
+    private renderDefaultCard;
+    private getCellContent;
+    private getColumns;
+    private formatLabel;
+    private formatValue;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-data-view": UDataView;
     }
 }
-export { UDataView };
-export type { Column, ViewMode } from './UDataView.component.js';

package/dist/components/data-view/UDataView.js

@@ -1,5 +1,173 @@
-import { UDataView } from './UDataView.component.js';
-
-UDataView.define("u-data-view");
-
+import { styles } from "./UDataView.styles.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/data-view/UDataView.ts
+var UDataView = class UDataView extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.mode = "grid";
+		this.gridMinWidth = "200px";
+		this.gap = "1rem";
+		this.selectedIndex = null;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="data-view">
+        ${this.renderToolbar()}
+        ${this.renderContent()}
+      </div>
+    `;
+	}
+	renderToolbar() {
+		return html`
+      <div class="toolbar">
+        <div class="view-toggles">
+          ${this.renderViewButton("grid", "grid-3x3-gap", "Grid")}
+          ${this.renderViewButton("list", "list-ul", "List")}
+          ${this.renderViewButton("table", "table", "Table")}
+        </div>
+        <div class="info">
+          ${this.items.length} items
+        </div>
+      </div>
+    `;
+	}
+	renderViewButton(mode, icon, label) {
+		return html`
+      <u-button
+        ?active=${this.mode === mode}
+        title=${label}
+      >
+        <u-icon lib="bootstrap" name=${icon}></u-icon>
+      </u-button>
+    `;
+	}
+	renderContent() {
+		if (!this.items?.length) return html`<div class="empty">No data available</div>`;
+		switch (this.mode) {
+			case "grid": return this.renderGrid();
+			case "list": return this.renderList();
+			case "table": return this.renderTable();
+		}
+	}
+	renderGrid() {
+		return html`
+      <div class="grid" style="--min-width: ${this.gridMinWidth}; --gap: ${this.gap};">
+        ${this.items.map((item, index) => this.renderGridItem(item, index))}
+      </div>
+    `;
+	}
+	renderList() {
+		return html`
+      <div class="list" style="--gap: ${this.gap};">
+        ${this.items.map((item, index) => this.renderListItem(item, index))}
+      </div>
+    `;
+	}
+	renderTable() {
+		const cols = this.getColumns();
+		return html`
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${cols.map((col) => html`
+                <th style=${col.width ? `width: ${col.width}` : ""}>
+                  ${col.label || this.formatLabel(col.key)}
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.items.map((item, index) => html`
+              <tr 
+                class=${this.selectedIndex === index ? "selected" : ""}
+              >
+                ${cols.map((col) => html`
+                  <td>${this.getCellContent(item, col, index)}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+	}
+	renderGridItem(item, index) {
+		const content = this.renderCard ? this.renderCard(item, index) : this.renderDefaultCard(item);
+		return html`
+      <div 
+        class="card ${this.selectedIndex === index ? "selected" : ""}"
+      >
+        ${content}
+      </div>
+    `;
+	}
+	renderListItem(item, index) {
+		const content = this.renderCard ? this.renderCard(item, index) : this.renderDefaultCard(item);
+		return html`
+      <div 
+        class="card list-card ${this.selectedIndex === index ? "selected" : ""}"
+      >
+        ${content}
+      </div>
+    `;
+	}
+	renderDefaultCard(item) {
+		return html`
+      <div class="card-content">
+        ${this.getColumns().slice(0, 5).map((col) => {
+			const value = item[col.key];
+			return html`
+            <div class="card-field">
+              <span class="label">${col.label || this.formatLabel(col.key)}:</span>
+              <span class="value">${this.formatValue(value)}</span>
+            </div>
+          `;
+		})}
+      </div>
+    `;
+	}
+	getCellContent(item, column, index) {
+		if (this.renderCell) return this.renderCell(item, column, index);
+		return this.formatValue(item[column.key]);
+	}
+	getColumns() {
+		if (this.columns?.length) return this.columns;
+		if (this.items.length > 0) {
+			const firstItem = this.items[0];
+			return Object.keys(firstItem).map((key) => ({ key }));
+		}
+		return [];
+	}
+	formatLabel(key) {
+		return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+	}
+	formatValue(value) {
+		if (value == null) return "—";
+		if (typeof value === "boolean") return value ? "✓" : "✗";
+		if (value instanceof Date) return value.toLocaleString();
+		if (typeof value === "object") return JSON.stringify(value);
+		return String(value);
+	}
+};
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UDataView.prototype, "items", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UDataView.prototype, "mode", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UDataView.prototype, "columns", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UDataView.prototype, "gridMinWidth", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UDataView.prototype, "gap", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Function)], UDataView.prototype, "renderCard", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Function)], UDataView.prototype, "renderCell", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UDataView.prototype, "selectedIndex", void 0);
+UDataView = __decorate([customElement("u-data-view")], UDataView);
+//#endregion
 export { UDataView };

package/dist/components/data-view/UDataView.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/data-view/UDataView.styles.ts
+var styles = css`
   :host {
     display: block;
     width: 100%;
@@ -175,85 +175,6 @@ const styles = css`
     color: var(--u-txt-color-weak);
     font-size: 1rem;
   }
-
-  /* ── Dark mode ──
-     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
-     제공되지 않으면 자체 dark fallback 값을 적용한다. */
-
-  :host-context([theme="dark"]) .toolbar {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .view-toggles u-button[active] {
-    background: var(--u-blue-600, #87B8F5);
-    color: var(--u-neutral-0, #000000);
-  }
-
-  :host-context([theme="dark"]) .info {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .card {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .card:hover {
-    border-color: var(--u-blue-600, #87B8F5);
-    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
-  }
-
-  :host-context([theme="dark"]) .card.selected {
-    border-color: var(--u-blue-600, #87B8F5);
-    background: var(--u-bg-color-active, #3D3D3D);
-    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
-  }
-
-  :host-context([theme="dark"]) .card-field .label {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .card-field .value {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .table-wrapper {
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) table {
-    background: var(--u-bg-color, #121212);
-  }
-
-  :host-context([theme="dark"]) thead {
-    background: var(--u-neutral-50, #0A0A0A);
-  }
-
-  :host-context([theme="dark"]) th {
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) tbody tr:hover {
-    background: var(--u-bg-color-hover, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) tbody tr.selected {
-    background: var(--u-bg-color-active, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) tbody tr:not(:last-child) {
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) td {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .empty {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
 `;
-
+//#endregion
 export { styles };

package/dist/components/simple-sheet/USimpleSheet.d.ts

@@ -1,8 +1,172 @@
-import { USimpleSheet } from './USimpleSheet.component.js';
+import { TemplateResult } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+export interface SheetColumn {
+    /** 데이터 키 (getDataAsObjects() 반환시 객체 키로 사용) */
+    key?: string;
+    /** 헤더 표시 레이블 */
+    label?: string;
+    /** 열 너비 (px) */
+    width?: number;
+    /** 읽기 전용 열 */
+    readonly?: boolean;
+    /** 선택 가능한 옵션 목록 (정적 배열 또는 동적 콜백) */
+    options?: string[] | ((row: number, col: number) => string[]);
+    /** true이면 목록에 있는 값만 입력 가능 (기본: false = 자유 입력 허용) */
+    strict?: boolean;
+    /** 자동 계산 함수. 설정 시 해당 열은 자동 readonly. 열 순서(좌→우), 행 순서(위→아래)로 계산. */
+    compute?: (rowIndex: number, data: string[][]) => string;
+    /** 표시 포맷. Intl.NumberFormatOptions(숫자) 또는 커스텀 콜백. 원본 데이터는 유지. */
+    format?: Intl.NumberFormatOptions | ((value: string, rowIndex: number) => string);
+}
+/**
+ * USimpleSheet - 심플 스프레드시트 컴포넌트
+ *
+ * 편집 편의 기능:
+ * - Undo/Redo: Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z
+ * - Ctrl+Enter: 편집 확정 후 현재 셀 유지
+ * - Shift+Enter: 위로 이동
+ * - Home/End: 행 처음/끝 (Ctrl+Home/End: 시트 처음/끝)
+ * - Page Up/Down: 10행 단위 이동
+ * - Ctrl+A: 전체 선택
+ * - Tab 사이클: 마지막 열 → 다음 행 첫 열
+ * - Ctrl+D: Fill Down (선택 영역 첫 행 값 아래로 채우기)
+ * - Ctrl+R: Fill Right (선택 영역 첫 열 값 오른쪽으로 채우기)
+ * - 행/열 헤더 클릭: 전체 행/열 선택
+ * - 엑셀 호환 Ctrl+C/V (TSV), Delete/Backspace
+ * - 다중 셀 선택: Shift+클릭, Shift+Arrow, 마우스 드래그
+ * - columns 미설정시 A, B, C... 자동 헤더
+ */
+export declare class USimpleSheet extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 초기 데이터 (2D 문자열 배열) */
+    data: string[][];
+    /** 열 정의 (미설정시 A, B, C... 자동 헤더) */
+    columns?: SheetColumn[];
+    /** 초기 행 수 */
+    rows: number;
+    /** 초기 열 수 (columns 미설정시 사용) */
+    cols: number;
+    /** 읽기 전용 모드 */
+    readonly: boolean;
+    private _sel;
+    private _editing;
+    private _editVal;
+    private _replaceOnEdit;
+    private _dropdownItems;
+    private _dropdownIndex;
+    private _isDropdownClick;
+    private _data;
+    private _colWidths;
+    private _isMouseSelecting;
+    private _containerEl;
+    private _resizing;
+    private static readonly MIN_COL_WIDTH;
+    private static readonly DEFAULT_COL_WIDTH;
+    private _history;
+    private _historyIndex;
+    private static readonly HISTORY_LIMIT;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private _syncDataFromProps;
+    private _syncData;
+    private get _rowCount();
+    private get _colCount();
+    private _pushHistory;
+    private _undo;
+    private _redo;
+    /** 열 인덱스를 A, B, ..., Z, AA, AB, ... 형태로 변환 */
+    private _colLabel;
+    private _colWidthStyle;
+    private _inSel;
+    private _isAnchor;
+    private _isColSelected;
+    private _isRowSelected;
+    render(): TemplateResult<1>;
+    private _renderCell;
+    private _refContainer;
+    private _onContainerFocus;
+    private _onContainerKeyDown;
+    private _onInputChange;
+    private _onInputKeyDown;
+    private _onInputBlur;
+    private _onDropdownItemMouseDown;
+    private _onTableMouseDown;
+    private _onTableMouseOver;
+    private _onTableDblClick;
+    private _onDocMouseUp;
+    /** 열 너비 조절 시작 */
+    private _onResizeStart;
+    private _onResizeMove;
+    private _onResizeEnd;
+    /** 코너 클릭 → 전체 선택 */
+    private _onSelectAll;
+    /** 열 헤더 클릭 → 전체 열 선택 */
+    private _onColHeaderMouseDown;
+    /** 행 헤더 클릭 → 전체 행 선택 */
+    private _onRowHeaderMouseDown;
+    private _onCopy;
+    private _onPaste;
+    private _selectionToTSV;
+    private _pasteFromText;
+    /** Ctrl+D: 선택 영역 첫 행 값을 아래로 채우기 */
+    private _fillDown;
+    /** Ctrl+R: 선택 영역 첫 열 값을 오른쪽으로 채우기 */
+    private _fillRight;
+    /**
+     * @param typedChar - 타이핑으로 시작할 경우 첫 글자. 미제공시 기존 값 유지.
+     */
+    private _startEdit;
+    private _commitEdit;
+    private _cancelEdit;
+    private _clearSelection;
+    private _select;
+    private _scrollCellIntoView;
+    private _getCellFromEvent;
+    private _isColReadonly;
+    private _isColComputed;
+    private _isNumeric;
+    /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+    private _formatValue;
+    /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+    private _recompute;
+    private _getColOptions;
+    private _filterOptions;
+    private _emitChange;
+    /** 현재 데이터를 2D 배열로 반환 */
+    getData(): string[][];
+    /**
+     * 정의된 columns의 key를 기준으로 객체 배열로 반환.
+     * columns 미설정시 A, B, C... 키를 사용.
+     */
+    getDataAsObjects(): Record<string, string>[];
+    /** 데이터를 직접 설정하고 재렌더링 */
+    setData(data: string[][]): void;
+    /** 특정 셀 값 설정 */
+    setCell(row: number, col: number, value: string): void;
+    /** 현재 선택 영역 반환 */
+    getSelection(): {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    } | null;
+    /** 선택 영역을 프로그래밍 방식으로 설정 */
+    setSelection(range: {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    }): void;
+    /** 전체 셀 선택 */
+    selectAll(): void;
+    /** Undo 가능 여부 */
+    get canUndo(): boolean;
+    /** Redo 가능 여부 */
+    get canRedo(): boolean;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-simple-sheet': USimpleSheet;
     }
 }
-export { USimpleSheet };
-export type { SheetColumn } from './USimpleSheet.component.js';