@iyulab/data-components 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.1.8] - 2026-03-08
+### Added
+- USimpleSheet: `format` 속성 — Intl.NumberFormatOptions(통화, 퍼센트 등) 또는 콜백 함수로 표시 포맷 지정
+- USimpleSheet: 셀 값 기반 자동 텍스트 정렬 (숫자 우측, 문자 좌측)
+
 ## [0.1.7] - 2026-03-08
 ### Added
 - USimpleSheet: `compute` 콜백을 통한 열 단위 자동 계산 기능

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

@@ -15,6 +15,8 @@ export interface SheetColumn {
     strict?: boolean;
     /** 자동 계산 함수. 설정 시 해당 열은 자동 readonly. 열 순서(좌→우), 행 순서(위→아래)로 계산. */
     compute?: (rowIndex: number, data: string[][]) => string;
+    /** 표시 포맷. Intl.NumberFormatOptions(숫자) 또는 커스텀 콜백. 원본 데이터는 유지. */
+    format?: Intl.NumberFormatOptions | ((value: string, rowIndex: number) => string);
 }
 /**
  * USimpleSheet - 심플 스프레드시트 컴포넌트
@@ -123,6 +125,9 @@ export declare class USimpleSheet extends UElement {
     private _getCellFromEvent;
     private _isColReadonly;
     private _isColComputed;
+    private _isNumeric;
+    /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+    private _formatValue;
     /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
     private _recompute;
     private _getColOptions;

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

@@ -624,13 +624,16 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     const value = this._data[r]?.[c] ?? "";
     const isColReadonly = this._isColReadonly(c);
     const isComputed = this._isColComputed(c);
+    const hasIntlFormat = this.columns?.[c]?.format && typeof this.columns[c].format !== "function";
+    const isNumeric = hasIntlFormat || this._isNumeric(value);
     const classes = [
       "cell",
       isSelected ? "selected" : "",
       isAnchor ? "anchor" : "",
       isEditing ? "editing" : "",
       isColReadonly ? "cell-readonly" : "",
-      isComputed ? "cell-computed" : ""
+      isComputed ? "cell-computed" : "",
+      isNumeric ? "cell-numeric" : ""
     ].filter(Boolean).join(" ");
     const hasOptions = isEditing && this._getColOptions(r, c) !== null;
     const showDropdown = isEditing && this._dropdownItems.length > 0;
@@ -664,7 +667,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
               <div class="dropdown-empty">일치하는 항목 없음</div>
             </div>
           ` : ""}
-        ` : value}
+        ` : this._formatValue(value, c, r)}
       </td>
     `;
   }
@@ -871,6 +874,25 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   _isColComputed(col) {
     return typeof this.columns?.[col]?.compute === "function";
   }
+  _isNumeric(value) {
+    if (!value || !value.trim()) return false;
+    return !isNaN(Number(value.replace(/,/g, "")));
+  }
+  /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+  _formatValue(value, col, row) {
+    const fmt = this.columns?.[col]?.format;
+    if (!fmt || !value) return value;
+    try {
+      if (typeof fmt === "function") {
+        return fmt(value, row);
+      }
+      const num = Number(value.replace(/,/g, ""));
+      if (isNaN(num)) return value;
+      return new Intl.NumberFormat("ko-KR", fmt).format(num);
+    } catch {
+      return value;
+    }
+  }
   /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
   _recompute() {
     if (!this.columns?.some((c) => c.compute)) return;

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

@@ -240,6 +240,11 @@ const styles = css`
     font-style: italic;
   }
 
+  /* Numeric cell (right-aligned like Excel) */
+  .cell.cell-numeric {
+    text-align: right;
+  }
+
   /* Readonly column/cell */
   .cell.cell-readonly {
     background: var(--u-neutral-50, #f8fafc);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "keywords": [
     "iyulab",
     "web-components",