@iyulab/data-components 0.1.8 → 0.3.0

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

@@ -151,6 +151,15 @@ export declare class USimpleSheet extends UElement {
         minCol: number;
         maxCol: number;
     } | null;
+    /** 선택 영역을 프로그래밍 방식으로 설정 */
+    setSelection(range: {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    }): void;
+    /** 전체 셀 선택 */
+    selectAll(): void;
     /** Undo 가능 여부 */
     get canUndo(): boolean;
     /** Redo 가능 여부 */

package/dist/components/simple-sheet/USimpleSheet.component.js

@@ -967,6 +967,26 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     if (!this._sel) return null;
     return normalizeRange(this._sel);
   }
+  /** 선택 영역을 프로그래밍 방식으로 설정 */
+  setSelection(range) {
+    const minRow = Math.max(0, Math.min(range.minRow, this._rowCount - 1));
+    const maxRow = Math.max(0, Math.min(range.maxRow, this._rowCount - 1));
+    const minCol = Math.max(0, Math.min(range.minCol, this._colCount - 1));
+    const maxCol = Math.max(0, Math.min(range.maxCol, this._colCount - 1));
+    this._sel = {
+      anchor: { row: minRow, col: minCol },
+      focus: { row: maxRow, col: maxCol }
+    };
+    this.requestUpdate();
+  }
+  /** 전체 셀 선택 */
+  selectAll() {
+    this._sel = {
+      anchor: { row: 0, col: 0 },
+      focus: { row: this._rowCount - 1, col: this._colCount - 1 }
+    };
+    this.requestUpdate();
+  }
   /** Undo 가능 여부 */
   get canUndo() {
     return this._historyIndex > 0;

package/dist/components/u-rich-table/URichTable.component.d.ts

@@ -0,0 +1,70 @@
+import { LitElement, TemplateResult } from 'lit';
+import { ColumnDef } from './types.js';
+export declare class URichTable extends LitElement {
+    static styles: import('lit').CSSResult;
+    columns: ColumnDef[];
+    data: Record<string, unknown>[];
+    totalCount: number;
+    pageSize: number;
+    currentPage: number;
+    loading: boolean;
+    emptyMessage: string;
+    selectable: boolean;
+    editable: boolean;
+    addable: boolean;
+    filterable: boolean;
+    expandable: boolean;
+    detailRenderer?: (row: Record<string, unknown>) => TemplateResult;
+    private selectedIds;
+    private focusedCell;
+    private editingCell;
+    private editValue;
+    private expandedIds;
+    private sort;
+    private filters;
+    private validationErrors;
+    private rowErrors;
+    revertRow(_rowId: string): void;
+    setRowError(rowId: string, message: string): void;
+    clearRowError(rowId: string): void;
+    getSelectedRows(): Record<string, unknown>[];
+    render(): TemplateResult;
+    private _renderToolbar;
+    private _renderHeader;
+    private _renderFilterRow;
+    private _renderBody;
+    private _renderCell;
+    private _renderCellContent;
+    private _renderNewRow;
+    private _renderPagination;
+    private _onSelectAll;
+    private _onRowSelect;
+    private _lastSelectedIndex;
+    private _onShiftSelect;
+    private _onSortClick;
+    private _onFilterChange;
+    private _onCellClick;
+    private _onCellDblClick;
+    private _onEditKeyDown;
+    private _onCellEditConfirm;
+    private _onExpandToggle;
+    private _onAddRowClick;
+    private _onNewRowFocus;
+    private _onNewRowKeyDown;
+    private _onRowMenu;
+    private _onPageChange;
+    private _onPageSizeChange;
+    private _colSpan;
+    private _getOptionLabel;
+    private _getPageNumbers;
+    private _moveToNextEditableCell;
+    private _fireSelectionChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onGlobalKeyDown;
+    private _handleCopy;
+    private _handlePaste;
+    private _moveFocus;
+    private _selectAll;
+    static define(tagName?: string): void;
+}

package/dist/components/u-rich-table/URichTable.component.js

@@ -0,0 +1,672 @@
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { richTableStyles } from './styles.js';
+import { toTSV, parseTSV } from './utils/clipboard.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class URichTable extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.data = [];
+    this.totalCount = 0;
+    this.pageSize = 25;
+    this.currentPage = 1;
+    this.loading = false;
+    this.emptyMessage = "데이터가 없습니다";
+    this.selectable = false;
+    this.editable = false;
+    this.addable = false;
+    this.filterable = false;
+    this.expandable = false;
+    this.selectedIds = /* @__PURE__ */ new Set();
+    this.focusedCell = null;
+    this.editingCell = null;
+    this.editValue = "";
+    this.expandedIds = /* @__PURE__ */ new Set();
+    this.sort = null;
+    this.filters = {};
+    this.validationErrors = /* @__PURE__ */ new Map();
+    this.rowErrors = /* @__PURE__ */ new Map();
+    this._lastSelectedIndex = -1;
+    // --- Clipboard & Keyboard ---
+    this._onGlobalKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "c") this._handleCopy();
+        else if (e.key === "v") this._handlePaste();
+        else if (e.key === "a" && !this.editingCell) {
+          e.preventDefault();
+          this._selectAll();
+        }
+      }
+      if (!this.editingCell && this.focusedCell) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this._moveFocus(0, -1);
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this._moveFocus(0, 1);
+        }
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          this._moveFocus(-1, 0);
+        }
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          this._moveFocus(1, 0);
+        }
+        if (e.key === "Enter") {
+          const col = this.columns[this.focusedCell.colIndex];
+          if (col?.editable) {
+            const value = this.data[this.focusedCell.rowIndex]?.[col.key];
+            this._onCellDblClick(this.focusedCell.rowIndex, this.focusedCell.colIndex, value);
+          }
+        }
+        if (e.key === " " && this.selectable) {
+          e.preventDefault();
+          const rowId = this.data[this.focusedCell.rowIndex]?._id;
+          if (rowId) this._onRowSelect(rowId);
+        }
+        if (e.key === "Delete" && this.selectedIds.size > 0) {
+          for (const row of this.getSelectedRows()) {
+            this.dispatchEvent(new CustomEvent("row-delete", { detail: { row }, bubbles: true, composed: true }));
+          }
+        }
+      }
+    };
+  }
+  static {
+    this.styles = richTableStyles;
+  }
+  // --- Public API ---
+  revertRow(_rowId) {
+  }
+  setRowError(rowId, message) {
+    this.rowErrors = new Map(this.rowErrors).set(rowId, message);
+  }
+  clearRowError(rowId) {
+    const next = new Map(this.rowErrors);
+    next.delete(rowId);
+    this.rowErrors = next;
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => this.selectedIds.has(row._id));
+  }
+  // --- Rendering ---
+  render() {
+    return html`
+      ${this._renderToolbar()}
+      <table>
+        ${this._renderHeader()}
+        <tbody>
+          ${this.filterable ? this._renderFilterRow() : ""}
+          ${this._renderBody()}
+          ${this.addable ? this._renderNewRow() : ""}
+        </tbody>
+      </table>
+      ${this._renderPagination()}
+    `;
+  }
+  _renderToolbar() {
+    const selectedCount = this.selectedIds.size;
+    return html`
+      <div class="toolbar">
+        ${this.selectable ? html`
+          <div class="selection-info">
+            <input type="checkbox"
+              .checked=${selectedCount > 0 && selectedCount === this.data.length}
+              .indeterminate=${selectedCount > 0 && selectedCount < this.data.length}
+              @change=${this._onSelectAll} />
+            ${selectedCount > 0 ? html`<span>${selectedCount}건 선택됨</span>` : ""}
+          </div>
+          ${selectedCount > 0 ? html`<slot name="bulk-actions"></slot>` : ""}
+        ` : ""}
+        <div style="flex:1"></div>
+        <slot name="toolbar-end"></slot>
+        ${this.addable ? html`
+          <button class="btn btn-success" @click=${this._onAddRowClick}>+ 새 행</button>
+        ` : ""}
+      </div>
+    `;
+  }
+  _renderHeader() {
+    return html`
+      <thead>
+        <tr>
+          ${this.selectable ? html`<th class="checkbox-cell"></th>` : ""}
+          ${this.expandable ? html`<th class="expand-cell"></th>` : ""}
+          ${this.columns.map((col) => html`
+            <th
+              class=${col.sortable ? "sortable" : ""}
+              style=${col.width ? `width: ${col.width}` : ""}
+              @click=${() => col.sortable && this._onSortClick(col.key)}>
+              ${col.label}
+              ${this.sort?.field === col.key ? html`
+                <span class="sort-indicator">${this.sort.direction === "asc" ? "▲" : "▼"}</span>
+              ` : ""}
+            </th>
+          `)}
+          <th class="actions-cell"></th>
+        </tr>
+      </thead>
+    `;
+  }
+  _renderFilterRow() {
+    return html`
+      <tr class="filter-row">
+        ${this.selectable ? html`<td></td>` : ""}
+        ${this.expandable ? html`<td></td>` : ""}
+        ${this.columns.map((col) => html`
+          <td>
+            ${col.filterable !== false ? col.filterType === "select" && col.options ? html`<select @change=${(e) => this._onFilterChange(col.key, e.target.value)}>
+                    <option value="">전체</option>
+                    ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
+                  </select>` : html`<input
+                    placeholder="필터..."
+                    @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
+          </td>
+        `)}
+        <td></td>
+      </tr>
+    `;
+  }
+  _renderBody() {
+    if (this.loading) {
+      return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">로딩 중...</div></td></tr>`;
+    }
+    if (this.data.length === 0) {
+      return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage}</div></td></tr>`;
+    }
+    return this.data.map((row, rowIdx) => {
+      const rowId = row._id;
+      const isSelected = this.selectedIds.has(rowId);
+      const isExpanded = this.expandedIds.has(rowId);
+      const hasError = this.rowErrors.has(rowId);
+      return html`
+        <tr class="${isSelected ? "selected" : ""} ${hasError ? "error" : ""} ${this.editingCell?.rowIndex === rowIdx ? "editing" : ""}">
+          ${this.selectable ? html`
+            <td class="checkbox-cell">
+              <input type="checkbox" .checked=${isSelected}
+                @change=${() => this._onRowSelect(rowId)}
+                @click=${(e) => e.shiftKey && this._onShiftSelect(rowIdx)} />
+            </td>
+          ` : ""}
+          ${this.expandable ? html`
+            <td class="expand-cell" @click=${() => this._onExpandToggle(rowId)}>
+              ${isExpanded ? "▼" : "▶"}
+            </td>
+          ` : ""}
+          ${this.columns.map((col, colIdx) => this._renderCell(row, rowIdx, col, colIdx))}
+          <td class="actions-cell">
+            <span style="cursor:pointer;color:#94a3b8" @click=${() => this._onRowMenu(row)}>⋯</span>
+          </td>
+        </tr>
+        ${isExpanded && this.detailRenderer ? html`
+          <tr class="detail-row">
+            <td colspan=${this._colSpan()}>${this.detailRenderer(row)}</td>
+          </tr>
+        ` : ""}
+        ${hasError ? html`
+          <tr><td colspan=${this._colSpan()} style="padding:2px 8px;background:#fef2f2;color:#ef4444;font-size:11px;">
+            ${this.rowErrors.get(rowId)}
+          </td></tr>
+        ` : ""}
+      `;
+    });
+  }
+  _renderCell(row, rowIdx, col, colIdx) {
+    const isEditing = this.editingCell?.rowIndex === rowIdx && this.editingCell?.colIndex === colIdx;
+    const isFocused = this.focusedCell?.rowIndex === rowIdx && this.focusedCell?.colIndex === colIdx;
+    const value = row[col.key];
+    if (isEditing && col.editable) {
+      const validationError = this.validationErrors.get(`${rowIdx}-${colIdx}`);
+      if (col.type === "select" && col.options) {
+        return html`
+          <td>
+            <select class="cell-edit-input" @change=${this._onCellEditConfirm} @keydown=${this._onEditKeyDown}>
+              ${col.options.map((o) => html`<option value=${o.value} ?selected=${o.value === String(value)}>${o.label}</option>`)}
+            </select>
+          </td>
+        `;
+      }
+      return html`
+        <td>
+          <input class="cell-edit-input ${validationError ? "invalid" : ""}"
+            type=${col.type === "number" ? "number" : col.type === "date" ? "date" : "text"}
+            .value=${this.editValue}
+            @input=${(e) => this.editValue = e.target.value}
+            @keydown=${this._onEditKeyDown}
+            @blur=${this._onCellEditConfirm} />
+          ${validationError ? html`<div class="validation-error">${validationError}</div>` : ""}
+        </td>
+      `;
+    }
+    return html`
+      <td class=${isFocused ? "focused-cell" : ""}
+        style=${col.align ? `text-align: ${col.align}` : ""}
+        @click=${() => this._onCellClick(rowIdx, colIdx)}
+        @dblclick=${() => col.editable && this._onCellDblClick(rowIdx, colIdx, value)}>
+        ${this._renderCellContent(col, value, row)}
+      </td>
+    `;
+  }
+  _renderCellContent(col, value, row) {
+    if (col.render) {
+      const result = col.render(value, row);
+      if (typeof result === "string") return result;
+      if (result instanceof HTMLElement) {
+        const container = document.createElement("span");
+        container.appendChild(result);
+        return html`${container}`;
+      }
+      return String(value ?? "");
+    }
+    if (col.type === "badge" && col.badgeColors) {
+      const color = col.badgeColors[String(value)] ?? "#f3f4f6";
+      return html`<span class="badge" style="background:${color}">${this._getOptionLabel(col, value)}</span>`;
+    }
+    if (col.type === "select" && col.options) {
+      return this._getOptionLabel(col, value);
+    }
+    if (col.type === "number" && value != null) {
+      return Number(value).toLocaleString();
+    }
+    return String(value ?? "");
+  }
+  _renderNewRow() {
+    return html`
+      <tr class="new-row">
+        ${this.selectable ? html`<td class="checkbox-cell"><span style="color:#86efac">+</span></td>` : ""}
+        ${this.expandable ? html`<td></td>` : ""}
+        ${this.columns.map((col, colIdx) => html`
+          <td>
+            ${col.editable !== false ? html`
+              <input placeholder=${col.label}
+                data-new-col=${colIdx}
+                @keydown=${this._onNewRowKeyDown}
+                @focus=${this._onNewRowFocus} />
+            ` : html`<span></span>`}
+          </td>
+        `)}
+        <td></td>
+      </tr>
+    `;
+  }
+  _renderPagination() {
+    if (this.totalCount <= 0) return html``;
+    const totalPages = Math.ceil(this.totalCount / this.pageSize);
+    const start = (this.currentPage - 1) * this.pageSize + 1;
+    const end = Math.min(this.currentPage * this.pageSize, this.totalCount);
+    return html`
+      <div class="pagination">
+        <span>전체 ${this.totalCount.toLocaleString()}건 중 ${start}-${end} 표시</span>
+        <div class="page-buttons">
+          <button ?disabled=${this.currentPage <= 1} @click=${() => this._onPageChange(this.currentPage - 1)}>◀</button>
+          ${this._getPageNumbers(totalPages).map((p) => html`
+            <button class=${p === this.currentPage ? "active" : ""} @click=${() => this._onPageChange(p)}>${p}</button>
+          `)}
+          <button ?disabled=${this.currentPage >= totalPages} @click=${() => this._onPageChange(this.currentPage + 1)}>▶</button>
+          <select @change=${(e) => this._onPageSizeChange(Number(e.target.value))}>
+            ${[25, 50, 100].map((s) => html`<option value=${s} ?selected=${s === this.pageSize}>${s}행</option>`)}
+          </select>
+        </div>
+      </div>
+    `;
+  }
+  // --- Event Handlers ---
+  _onSelectAll(e) {
+    const checked = e.target.checked;
+    if (checked) {
+      this.selectedIds = new Set(this.data.map((r) => r._id));
+    } else {
+      this.selectedIds = /* @__PURE__ */ new Set();
+    }
+    this._fireSelectionChange();
+  }
+  _onRowSelect(rowId) {
+    const next = new Set(this.selectedIds);
+    if (next.has(rowId)) next.delete(rowId);
+    else next.add(rowId);
+    this.selectedIds = next;
+    this._fireSelectionChange();
+  }
+  _onShiftSelect(rowIdx) {
+    if (this._lastSelectedIndex < 0) return;
+    const start = Math.min(this._lastSelectedIndex, rowIdx);
+    const end = Math.max(this._lastSelectedIndex, rowIdx);
+    const next = new Set(this.selectedIds);
+    for (let i = start; i <= end; i++) {
+      next.add(this.data[i]._id);
+    }
+    this.selectedIds = next;
+    this._fireSelectionChange();
+  }
+  _onSortClick(field) {
+    if (this.sort?.field === field) {
+      if (this.sort.direction === "asc") {
+        this.sort = { field, direction: "desc" };
+      } else {
+        this.sort = null;
+      }
+    } else {
+      this.sort = { field, direction: "asc" };
+    }
+    this.dispatchEvent(new CustomEvent("sort-change", {
+      detail: this.sort ? { field: this.sort.field, direction: this.sort.direction } : { field, direction: null },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onFilterChange(field, value) {
+    if (value) {
+      this.filters = { ...this.filters, [field]: value };
+    } else {
+      const { [field]: _, ...rest } = this.filters;
+      this.filters = rest;
+    }
+    this.dispatchEvent(new CustomEvent("filter-change", {
+      detail: { filters: this.filters },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onCellClick(rowIdx, colIdx) {
+    this.focusedCell = { rowIndex: rowIdx, colIndex: colIdx };
+    this._lastSelectedIndex = rowIdx;
+  }
+  _onCellDblClick(rowIdx, colIdx, value) {
+    this.editingCell = { rowIndex: rowIdx, colIndex: colIdx };
+    this.editValue = String(value ?? "");
+    this.requestUpdate();
+    requestAnimationFrame(() => {
+      const input = this.shadowRoot?.querySelector(".cell-edit-input");
+      input?.focus();
+      input?.select();
+    });
+  }
+  _onEditKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      this._onCellEditConfirm();
+      if (this.editingCell && this.editingCell.rowIndex < this.data.length - 1) {
+        const nextRow = this.editingCell.rowIndex + 1;
+        const col = this.editingCell.colIndex;
+        const nextValue = this.data[nextRow][this.columns[col].key];
+        this._onCellDblClick(nextRow, col, nextValue);
+      }
+    } else if (e.key === "Escape") {
+      this.editingCell = null;
+      this.editValue = "";
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      this._onCellEditConfirm();
+      this._moveToNextEditableCell(e.shiftKey);
+    }
+  }
+  _onCellEditConfirm() {
+    if (!this.editingCell) return;
+    const { rowIndex, colIndex } = this.editingCell;
+    const col = this.columns[colIndex];
+    const row = this.data[rowIndex];
+    const oldValue = row[col.key];
+    let newValue = this.editValue;
+    if (col.type === "number") newValue = Number(newValue);
+    if (col.required && !newValue && newValue !== 0) {
+      this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, "필수 항목입니다");
+      return;
+    }
+    if (col.validator) {
+      const error = col.validator(newValue, row);
+      if (error) {
+        this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, error);
+        return;
+      }
+    }
+    const nextErrors = new Map(this.validationErrors);
+    nextErrors.delete(`${rowIndex}-${colIndex}`);
+    this.validationErrors = nextErrors;
+    if (newValue !== oldValue) {
+      this.dispatchEvent(new CustomEvent("row-update", {
+        detail: { row, field: col.key, value: newValue, oldValue },
+        bubbles: true,
+        composed: true
+      }));
+    }
+    this.editingCell = null;
+    this.editValue = "";
+  }
+  _onExpandToggle(rowId) {
+    const next = new Set(this.expandedIds);
+    const expanded = !next.has(rowId);
+    if (expanded) next.add(rowId);
+    else next.delete(rowId);
+    this.expandedIds = next;
+    this.dispatchEvent(new CustomEvent("row-expand", {
+      detail: { row: this.data.find((r) => r._id === rowId), expanded },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onAddRowClick() {
+    const input = this.shadowRoot?.querySelector(".new-row input");
+    input?.focus();
+  }
+  _onNewRowFocus() {
+  }
+  _onNewRowKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const inputs = Array.from(this.shadowRoot?.querySelectorAll(".new-row input") ?? []);
+      const newRow = {};
+      this.columns.forEach((col, i) => {
+        if (col.editable !== false && inputs[i]) {
+          let val = inputs[i].value;
+          if (col.type === "number") val = Number(val);
+          newRow[col.key] = val;
+        }
+      });
+      this.dispatchEvent(new CustomEvent("row-create", {
+        detail: { row: newRow },
+        bubbles: true,
+        composed: true
+      }));
+      inputs.forEach((input) => input.value = "");
+      inputs[0]?.focus();
+    } else if (e.key === "Tab" && !e.shiftKey) {
+      const target = e.target;
+      const colIdx = Number(target.dataset.newCol);
+      if (colIdx >= this.columns.filter((c) => c.editable !== false).length - 1) {
+        e.preventDefault();
+        this._onNewRowKeyDown(new KeyboardEvent("keydown", { key: "Enter" }));
+      }
+    }
+  }
+  _onRowMenu(row) {
+    this.dispatchEvent(new CustomEvent("row-delete", {
+      detail: { row },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onPageChange(page) {
+    this.dispatchEvent(new CustomEvent("page-change", {
+      detail: { page, pageSize: this.pageSize },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onPageSizeChange(pageSize) {
+    this.dispatchEvent(new CustomEvent("page-change", {
+      detail: { page: 1, pageSize },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  // --- Helpers ---
+  _colSpan() {
+    let span = this.columns.length + 1;
+    if (this.selectable) span++;
+    if (this.expandable) span++;
+    return span;
+  }
+  _getOptionLabel(col, value) {
+    return col.options?.find((o) => o.value === String(value))?.label ?? String(value ?? "");
+  }
+  _getPageNumbers(totalPages) {
+    const pages = [];
+    const start = Math.max(1, this.currentPage - 2);
+    const end = Math.min(totalPages, start + 4);
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  }
+  _moveToNextEditableCell(reverse) {
+    if (!this.editingCell) return;
+    let { rowIndex, colIndex } = this.editingCell;
+    const editableCols = this.columns.map((c, i) => c.editable ? i : -1).filter((i) => i >= 0);
+    const currentIdx = editableCols.indexOf(colIndex);
+    if (reverse) {
+      if (currentIdx > 0) {
+        colIndex = editableCols[currentIdx - 1];
+      } else if (rowIndex > 0) {
+        rowIndex--;
+        colIndex = editableCols[editableCols.length - 1];
+      }
+    } else {
+      if (currentIdx < editableCols.length - 1) {
+        colIndex = editableCols[currentIdx + 1];
+      } else if (rowIndex < this.data.length - 1) {
+        rowIndex++;
+        colIndex = editableCols[0];
+      }
+    }
+    const value = this.data[rowIndex]?.[this.columns[colIndex]?.key];
+    this._onCellDblClick(rowIndex, colIndex, value);
+  }
+  _fireSelectionChange() {
+    this.dispatchEvent(new CustomEvent("selection-change", {
+      detail: { selectedRows: this.getSelectedRows() },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onGlobalKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onGlobalKeyDown);
+  }
+  async _handleCopy() {
+    const rows = this.getSelectedRows();
+    if (rows.length === 0) return;
+    const tsv = toTSV(rows, this.columns);
+    await navigator.clipboard.writeText(tsv);
+  }
+  async _handlePaste() {
+    if (this.editingCell) return;
+    const text = await navigator.clipboard.readText();
+    if (!text.trim()) return;
+    const parsedRows = parseTSV(text, this.columns);
+    if (parsedRows.length === 0) return;
+    this.dispatchEvent(new CustomEvent("paste", {
+      detail: { rows: parsedRows },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _moveFocus(dx, dy) {
+    if (!this.focusedCell) return;
+    const newCol = Math.max(0, Math.min(this.columns.length - 1, this.focusedCell.colIndex + dx));
+    const newRow = Math.max(0, Math.min(this.data.length - 1, this.focusedCell.rowIndex + dy));
+    this.focusedCell = { rowIndex: newRow, colIndex: newCol };
+  }
+  _selectAll() {
+    this.selectedIds = new Set(this.data.map((r) => r._id));
+    this._fireSelectionChange();
+  }
+  // define helper (follows existing pattern)
+  static define(tagName = "u-rich-table") {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, this);
+    }
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], URichTable.prototype, "columns");
+__decorateClass([
+  property({ type: Array })
+], URichTable.prototype, "data");
+__decorateClass([
+  property({ type: Number })
+], URichTable.prototype, "totalCount");
+__decorateClass([
+  property({ type: Number })
+], URichTable.prototype, "pageSize");
+__decorateClass([
+  property({ type: Number })
+], URichTable.prototype, "currentPage");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "loading");
+__decorateClass([
+  property({ type: String })
+], URichTable.prototype, "emptyMessage");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "selectable");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "editable");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "addable");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "filterable");
+__decorateClass([
+  property({ type: Boolean })
+], URichTable.prototype, "expandable");
+__decorateClass([
+  property({ attribute: false })
+], URichTable.prototype, "detailRenderer");
+__decorateClass([
+  state()
+], URichTable.prototype, "selectedIds");
+__decorateClass([
+  state()
+], URichTable.prototype, "focusedCell");
+__decorateClass([
+  state()
+], URichTable.prototype, "editingCell");
+__decorateClass([
+  state()
+], URichTable.prototype, "editValue");
+__decorateClass([
+  state()
+], URichTable.prototype, "expandedIds");
+__decorateClass([
+  state()
+], URichTable.prototype, "sort");
+__decorateClass([
+  state()
+], URichTable.prototype, "filters");
+__decorateClass([
+  state()
+], URichTable.prototype, "validationErrors");
+__decorateClass([
+  state()
+], URichTable.prototype, "rowErrors");
+
+export { URichTable };

package/dist/components/u-rich-table/URichTable.d.ts

@@ -0,0 +1,8 @@
+import { URichTable } from './URichTable.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-rich-table': URichTable;
+    }
+}
+export { URichTable };
+export type { ColumnDef, CellPosition, SortState, FilterState, RichTableEventMap } from './types.js';

package/dist/components/u-rich-table/URichTable.js

@@ -0,0 +1,5 @@
+import { URichTable } from './URichTable.component.js';
+
+URichTable.define("u-rich-table");
+
+export { URichTable };

package/dist/components/u-rich-table/styles.d.ts

@@ -0,0 +1 @@
+export declare const richTableStyles: import('lit').CSSResult;

package/dist/components/u-rich-table/styles.js

@@ -0,0 +1,433 @@
+import { css } from 'lit';
+
+const richTableStyles = css`
+  :host {
+    display: block;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .toolbar .selection-info {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  .toolbar .search-input {
+    padding: 4px 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font-size: 12px;
+    outline: none;
+  }
+
+  .toolbar .search-input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  .toolbar .btn {
+    padding: 4px 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    color: white;
+  }
+
+  .toolbar .btn-primary { background: #3b82f6; }
+  .toolbar .btn-primary:hover { background: #2563eb; }
+  .toolbar .btn-success { background: #10b981; }
+  .toolbar .btn-success:hover { background: #059669; }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead th {
+    padding: 8px;
+    background: #f1f5f9;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 2px solid #e2e8f0;
+    user-select: none;
+    position: relative;
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+  }
+
+  thead th.sortable:hover {
+    background: #e2e8f0;
+  }
+
+  .sort-indicator {
+    font-size: 10px;
+    color: #94a3b8;
+    margin-left: 4px;
+  }
+
+  .filter-row td {
+    padding: 4px;
+    background: #fefce8;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .filter-row input,
+  .filter-row select {
+    width: 100%;
+    padding: 2px 6px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    font-size: 11px;
+    outline: none;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  tbody tr:hover {
+    background: #f8fafc;
+  }
+
+  tbody tr.selected {
+    background: #eff6ff;
+  }
+
+  tbody tr.focused td.focused-cell {
+    outline: 2px solid #3b82f6;
+    outline-offset: -2px;
+  }
+
+  tbody tr.editing {
+    background: #fefce8;
+    outline: 2px solid #eab308;
+  }
+
+  tbody tr.error {
+    background: #fef2f2;
+  }
+
+  tbody td {
+    padding: 8px;
+  }
+
+  tbody td .cell-edit-input {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px solid #3b82f6;
+    border-radius: 3px;
+    font-size: 13px;
+    outline: none;
+  }
+
+  tbody td .cell-edit-input.invalid {
+    border-color: #ef4444;
+  }
+
+  .validation-error {
+    font-size: 10px;
+    color: #ef4444;
+    margin-top: 2px;
+  }
+
+  .checkbox-cell {
+    width: 40px;
+    text-align: center;
+  }
+
+  .expand-cell {
+    width: 30px;
+    text-align: center;
+    cursor: pointer;
+    color: #94a3b8;
+  }
+
+  .expand-cell:hover {
+    color: #3b82f6;
+  }
+
+  .actions-cell {
+    width: 60px;
+    text-align: center;
+  }
+
+  .new-row td {
+    padding: 4px 8px;
+    background: #f0fdf4;
+    opacity: 0.8;
+  }
+
+  .new-row input {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px dashed #86efac;
+    border-radius: 3px;
+    background: transparent;
+    font-size: 12px;
+    color: #6b7280;
+    outline: none;
+  }
+
+  .new-row input:focus {
+    border-color: #10b981;
+    background: white;
+    opacity: 1;
+  }
+
+  .detail-row td {
+    padding: 8px 8px 8px 70px;
+    background: #f8fafc;
+    border-bottom: 2px solid #e2e8f0;
+  }
+
+  .badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-top: 1px solid #e2e8f0;
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  .pagination .page-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .pagination button {
+    padding: 2px 8px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    background: white;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .pagination button.active {
+    background: #3b82f6;
+    color: white;
+    border-color: #3b82f6;
+  }
+
+  .pagination select {
+    padding: 2px 4px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    font-size: 11px;
+    margin-left: 8px;
+  }
+
+  .loading-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: #6b7280;
+  }
+
+  .empty-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: #9ca3af;
+  }
+
+  /* ── Dark mode ──
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) {
+    border-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .toolbar {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .toolbar .selection-info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .toolbar .search-input {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .toolbar .search-input:focus {
+    border-color: var(--u-blue-500, #6ba3e3);
+    box-shadow: 0 0 0 2px rgba(107, 163, 227, 0.2);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-primary {
+    background: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-primary:hover {
+    background: var(--u-blue-600, #87B8F5);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-success {
+    background: var(--u-green-500, #66B584);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-success:hover {
+    background: var(--u-green-600, #81D19D);
+  }
+
+  :host-context([theme="dark"]) thead th {
+    background: var(--u-neutral-200, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) thead th.sortable:hover {
+    background: var(--u-neutral-300, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) .sort-indicator {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .filter-row td {
+    background: var(--u-yellow-0, #2E2200);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .filter-row input,
+  :host-context([theme="dark"]) .filter-row select {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) tbody tr:hover {
+    background: var(--u-neutral-200, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) tbody tr.selected {
+    background: var(--u-blue-0, #0a1e3d);
+  }
+
+  :host-context([theme="dark"]) tbody tr.focused td.focused-cell {
+    outline-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) tbody tr.editing {
+    background: var(--u-yellow-0, #2E2200);
+    outline-color: var(--u-yellow-500, #D4A712);
+  }
+
+  :host-context([theme="dark"]) tbody tr.error {
+    background: var(--u-red-0, #2E0A0A);
+  }
+
+  :host-context([theme="dark"]) tbody td .cell-edit-input {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) tbody td .cell-edit-input.invalid {
+    border-color: var(--u-red-500, #D66060);
+  }
+
+  :host-context([theme="dark"]) .validation-error {
+    color: var(--u-red-500, #D66060);
+  }
+
+  :host-context([theme="dark"]) .expand-cell {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .expand-cell:hover {
+    color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .new-row td {
+    background: var(--u-green-0, #0D2818);
+  }
+
+  :host-context([theme="dark"]) .new-row input {
+    border-color: var(--u-green-500, #66B584);
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .new-row input:focus {
+    border-color: var(--u-green-600, #81D19D);
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .detail-row td {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .pagination {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-top-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .pagination button {
+    background: var(--u-neutral-300, #2A2A2A);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .pagination button.active {
+    background: var(--u-blue-500, #6ba3e3);
+    color: var(--u-neutral-1000, #FFFFFF);
+    border-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .pagination select {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .loading-overlay {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .empty-message {
+    color: var(--u-txt-color-disabled, #525252);
+  }
+`;
+
+export { richTableStyles };

package/dist/components/u-rich-table/types.d.ts

@@ -0,0 +1,67 @@
+export interface ColumnDef {
+    key: string;
+    label: string;
+    width?: string;
+    sortable?: boolean;
+    editable?: boolean;
+    required?: boolean;
+    type?: 'text' | 'number' | 'date' | 'select' | 'badge';
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    badgeColors?: Record<string, string>;
+    render?: (value: unknown, row: Record<string, unknown>) => string | HTMLElement;
+    align?: 'left' | 'center' | 'right';
+    filterable?: boolean;
+    filterType?: 'text' | 'select';
+    validator?: (value: unknown, row: Record<string, unknown>) => string | null;
+    clipboardParse?: (text: string) => unknown;
+    clipboardFormat?: (value: unknown) => string;
+}
+export interface CellPosition {
+    rowIndex: number;
+    colIndex: number;
+}
+export interface SortState {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+export interface FilterState {
+    [field: string]: string;
+}
+export interface RichTableEventMap {
+    'selection-change': CustomEvent<{
+        selectedRows: Record<string, unknown>[];
+    }>;
+    'row-create': CustomEvent<{
+        row: Record<string, unknown>;
+    }>;
+    'row-update': CustomEvent<{
+        row: Record<string, unknown>;
+        field: string;
+        value: unknown;
+        oldValue: unknown;
+    }>;
+    'row-delete': CustomEvent<{
+        row: Record<string, unknown>;
+    }>;
+    'row-expand': CustomEvent<{
+        row: Record<string, unknown>;
+        expanded: boolean;
+    }>;
+    'sort-change': CustomEvent<{
+        field: string;
+        direction: 'asc' | 'desc' | null;
+    }>;
+    'filter-change': CustomEvent<{
+        filters: FilterState;
+    }>;
+    'page-change': CustomEvent<{
+        page: number;
+        pageSize: number;
+    }>;
+    'paste': CustomEvent<{
+        rows: Record<string, unknown>[];
+    }>;
+}

package/dist/components/u-rich-table/utils/clipboard.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef } from '../types.js';
+/**
+ * 탭/줄바꿈 구분 텍스트(TSV)를 파싱하여 행 배열로 반환
+ */
+export declare function parseTSV(text: string, columns: ColumnDef[]): Record<string, unknown>[];
+/**
+ * 행 배열을 탭/줄바꿈 구분 텍스트(TSV)로 변환
+ */
+export declare function toTSV(rows: Record<string, unknown>[], columns: ColumnDef[]): string;

package/dist/components/u-rich-table/utils/clipboard.js

@@ -0,0 +1,34 @@
+function parseTSV(text, columns) {
+  const lines = text.trim().split("\n");
+  return lines.map((line) => {
+    const cells = line.split("	");
+    const row = {};
+    columns.forEach((col, i) => {
+      if (i < cells.length) {
+        const raw = cells[i].trim();
+        if (col.clipboardParse) {
+          row[col.key] = col.clipboardParse(raw);
+        } else if (col.type === "number") {
+          row[col.key] = Number(raw.replace(/,/g, "")) || 0;
+        } else {
+          row[col.key] = raw;
+        }
+      }
+    });
+    return row;
+  });
+}
+function toTSV(rows, columns) {
+  const header = columns.map((c) => c.label).join("	");
+  const body = rows.map(
+    (row) => columns.map((col) => {
+      const value = row[col.key];
+      if (col.clipboardFormat) return col.clipboardFormat(value);
+      return String(value ?? "");
+    }).join("	")
+  ).join("\n");
+  return `${header}
+${body}`;
+}
+
+export { parseTSV, toTSV };

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { UDataGrid } from './components/data-grid/UDataGrid';
 export type { UDataGridColumn, UDataGridProps } from './components/data-grid/UDataGrid.types';
 export * from './components/data-view/UDataView';
 export * from './components/simple-sheet/USimpleSheet';
+export * from './components/u-rich-table/URichTable';

package/dist/index.js

@@ -1,5 +1,7 @@
 export { UDataGrid } from './components/data-grid/UDataGrid.js';
 import './components/data-view/UDataView.js';
 import './components/simple-sheet/USimpleSheet.js';
+import './components/u-rich-table/URichTable.js';
 export { UDataView } from './components/data-view/UDataView.component.js';
+export { URichTable } from './components/u-rich-table/URichTable.component.js';
 export { USimpleSheet } from './components/simple-sheet/USimpleSheet.component.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -46,6 +46,10 @@
     "./data-grid": {
       "types": "./dist/components/data-grid/UDataGrid.d.ts",
       "import": "./dist/components/data-grid/UDataGrid.js"
+    },
+    "./u-rich-table": {
+      "types": "./dist/components/u-rich-table/URichTable.d.ts",
+      "import": "./dist/components/u-rich-table/URichTable.js"
     }
   },
   "sideEffects": [
@@ -54,6 +58,7 @@
     "./dist/components/data-grid/UDataGrid.js",
     "./dist/components/data-view/UDataView.js",
     "./dist/components/simple-sheet/USimpleSheet.js",
+    "./dist/components/u-rich-table/URichTable.js",
     "./dist/init.js"
   ],
   "scripts": {