@simplysm/solid 13.0.69 → 13.0.71

package/src/components/data/sheet/DataSheet.tsx

@@ -39,6 +39,7 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
 import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { DialogContext } from "../../disclosure/DialogContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import "./DataSheet.css";
 import {
   configButtonClass,
@@ -111,6 +112,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   ]);
 
   const modal = useContext(DialogContext);
+  const i18n = useI18nOptional();
 
   // #region Column Collection
   const resolved = children(() => local.children);
@@ -119,21 +121,21 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   );
 
   // #region Config (useSyncConfig)
-  /* eslint-disable solid/reactivity -- persistKey는 정적 값으로 컴포넌트 마운트 시 한 번만 사용됨 */
+  /* eslint-disable solid/reactivity -- persistKey is static and only used once on component mount */
   const [config, setConfig] =
     local.persistKey != null && local.persistKey !== ""
       ? useSyncConfig<DataSheetConfig>(`sheet.${local.persistKey}`, { columnRecord: {} })
       : createSignal<DataSheetConfig>({ columnRecord: {} });
   /* eslint-enable solid/reactivity */
 
-  // 설정이 적용된 최종 컬럼 — config의 hidden/fixed/width/displayOrder 오버라이드 적용
+  // Final columns with config applied — config's hidden/fixed/width/displayOrder overrides are applied
   const effectiveColumns = createMemo(() => {
     const cols = columnDefs();
     const record = config().columnRecord ?? {};
 
     return cols
       .filter((col) => {
-        // config 오버라이드가 있으면 config 우선, 없으면 원래 col.hidden 사용
+        // If config override exists, use config priority, otherwise use original col.hidden
         const saved = record[col.key];
         const isHidden = saved?.hidden ?? col.hidden;
         return !isHidden;
@@ -186,7 +188,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     const result = await modal.show<DataSheetConfig>(
       () => <DataSheetConfigDialog columnInfos={columnInfos} currentConfig={currentConfig} />,
       {
-        header: "시트 설정",
+        header: "Sheet Settings",
         closeOnBackdrop: true,
         closeOnEscape: true,
       },
@@ -217,12 +219,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
         const updated = current.map((s) => (s.key === key ? { ...s, desc: true } : s));
         setSorts(multiple ? updated : [{ key, desc: true }]);
       } else {
-        // desc → 제거
+        // desc → remove
         const updated = current.filter((s) => s.key !== key);
         setSorts(multiple ? updated : []);
       }
     } else {
-      // 없음 → asc 추가
+      // none → add asc
       const newSort: SortingDef = { key, desc: false };
       setSorts(multiple ? [...current, newSort] : [newSort]);
     }
@@ -272,12 +274,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return map;
   });
 
-  // #region Feature Column Setup (확장/선택 기능 컬럼 공통)
+  // #region Feature Column Setup (expand/select feature columns common)
   const hasExpandFeature = () => local.getChildren != null;
   const hasSelectFeature = () => local.selectMode != null;
   const hasReorderFeature = () => local.onItemsReorder != null;
 
-  // 기능 컬럼 너비 추적 헬퍼
+  // Feature column width tracking helper
   function createTrackedWidth(): [() => number, (el: HTMLElement) => void] {
     const [width, setWidth] = createSignal(0);
     const register = (el: HTMLElement) => {
@@ -292,7 +294,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   const [selectColWidth, registerSelectColRef] = createTrackedWidth();
   const [reorderColWidth, registerReorderColRef] = createTrackedWidth();
 
-  // 기능 컬럼 left 위치 (선택/재정렬 컬럼의 style에 사용)
+  // Feature column left position (used in select/reorder column style)
   const selectColLeft = createMemo(() => (hasExpandFeature() ? `${expandColWidth()}px` : "0"));
 
   const reorderColLeft = createMemo(() => {
@@ -303,13 +305,13 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   });
 
   // #region ColumnFixing
-  // 각 컬럼 셀의 ref → 너비 측정용
+  // Column cell refs → for width measurement
   const columnRefs = new Map<number, HTMLElement>();
 
-  // 각 컬럼의 측정된 너비
+  // Measured width of each column
   const [columnWidths, setColumnWidths] = createSignal<Map<number, number>>(new Map());
 
-  // 기능 컬럼(확장 등)의 총 너비 — 고정 컬럼 left 오프셋에 사용
+  // Total width of feature columns (expand, etc.) — used for fixed column left offset
   const featureColTotalWidth = createMemo(() => {
     let w = 0;
     if (hasExpandFeature()) w += expandColWidth();
@@ -318,21 +320,21 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return w;
   });
 
-  // 고정 컬럼의 left 위치 계산
+  // Calculate left position of fixed columns
   const fixedLeftMap = createMemo(() => {
     const map = new Map<number, number>();
     const cols = effectiveColumns();
     const widths = columnWidths();
     let left = featureColTotalWidth();
     for (let c = 0; c < cols.length; c++) {
-      if (!cols[c].fixed) break; // 고정 컬럼은 앞쪽에 연속 배치
+      if (!cols[c].fixed) break; // Fixed columns are placed continuously at front
       map.set(c, left);
       left += widths.get(c) ?? 0;
     }
     return map;
   });
 
-  // 마지막 고정 컬럼 인덱스
+  // Last fixed column index
   const lastFixedIndex = createMemo(() => {
     const cols = effectiveColumns();
     let last = -1;
@@ -353,7 +355,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return colIndex === lastFixedIndex();
   }
 
-  // 고정 컬럼 셀에 ResizeObserver 등록
+  // Register ResizeObserver for fixed column cells
   function registerColumnRef(colIndex: number, el: HTMLElement): void {
     columnRefs.set(colIndex, el);
     createResizeObserver(el, () => {
@@ -381,7 +383,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     const startX = event.clientX;
     const startWidth = th.offsetWidth;
 
-    // 리사이즈 인디케이터 표시
+    // Show resize indicator
     const containerRect = container.getBoundingClientRect();
     setResizeIndicatorStyle({
       display: "block",
@@ -404,7 +406,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
       },
       onEnd(e) {
         const delta = e.clientX - startX;
-        // 실제 드래그가 발생한 경우에만 너비 저장 (더블클릭 시 DOM 재생성으로 dblclick 유실 방지)
+        // Only save width if actual drag occurred (prevent dblclick DOM recreation from losing dblclick)
         if (delta !== 0) {
           const newWidth = Math.max(30, startWidth + delta);
           saveColumnWidth(colKey, `${newWidth}px`);
@@ -419,7 +421,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   }
 
   // #region HeaderSticky
-  // 각 헤더 행의 높이를 추적하여 누적 top 값 계산
+  // Track header row heights to calculate cumulative top values
   const [headerRowHeights, setHeaderRowHeights] = createSignal<number[]>([]);
 
   function registerHeaderRow(rowIndex: number, el: HTMLElement): void {
@@ -432,7 +434,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     });
   }
 
-  // 각 헤더 행의 누적 top 값
+  // Cumulative top value for each header row
   const headerRowTops = createMemo(() => {
     const heights = headerRowHeights();
     const tops: number[] = [];
@@ -444,7 +446,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return tops;
   });
 
-  // 합계 행의 top 값 (모든 헤더 행 높이 합)
+  // Top value of summary row (sum of all header row heights)
   const summaryRowTop = createMemo(() => {
     const heights = headerRowHeights();
     return heights.reduce((sum, h) => sum + h, 0);
@@ -600,7 +602,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
           const flat = displayItems()[i];
           if (flat.item === item) break;
 
-          // 자기 자신의 하위 항목으로는 드롭 불가
+          // Cannot drop to child items of self
           if (isDescendant(item, flat.item)) break;
 
           const relY = ev.clientY - rect.top;
@@ -623,7 +625,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
         setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
 
-        // 인디케이터 DOM 업데이트
+        // Update indicator DOM
         for (let i = 0; i < rows.length; i++) {
           rows[i].removeAttribute("data-dragging");
           rows[i].removeAttribute("data-drag-over");
@@ -639,7 +641,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
           }
         }
 
-        // before/after 인디케이터
+        // before/after indicator
         const indicatorEl = tableEl
           .closest("[data-sheet-scroll]")
           ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
@@ -675,7 +677,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
           } as DataSheetReorderEvent<T>);
         }
 
-        // 클린업
+        // Clean up
         for (const row of rows) {
           row.removeAttribute("data-dragging");
           row.removeAttribute("data-drag-over");
@@ -692,7 +694,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     });
   }
 
-  // #region Keyboard Navigation (Enter/Shift+Enter로 행 이동)
+  // #region Keyboard Navigation (move rows with Enter/Shift+Enter)
   function onTableKeyDown(e: KeyboardEvent): void {
     if (e.key !== "Enter" || e.altKey || e.ctrlKey || e.metaKey) return;
 
@@ -728,24 +730,24 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   // #region Display
   const displayItems = flatItems;
 
-  // 확장 기능 컬럼이 "마지막 고정"인지 (일반 고정 컬럼이 없고, 선택 컬럼도 없을 때)
+  // Is expand feature column "last fixed" (no regular fixed columns and no select feature)
   const isExpandColLastFixed = () =>
     hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
-  // 선택 기능 컬럼이 "마지막 고정"인지 (일반 고정 컬럼이 없고, 선택 컬럼이 가장 오른쪽 기능 컬럼일 때)
+  // Is select feature column "last fixed" (no regular fixed columns and select is rightmost feature)
   const isSelectColLastFixed = () =>
     hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
   const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
 
-  // 전체 헤더 행 수 + 합계 행 수 (기능 컬럼의 rowspan에 사용)
+  // Total header row count + summary row count (used for feature column rowspan)
   const featureHeaderRowspan = createMemo(() => {
     const headerRows = headerTable().length;
     const summaryRow = hasSummary() ? 1 : 0;
     return headerRows + summaryRow;
   });
 
-  // 전체 확장 상태인지
+  // Is all expanded
   const isAllExpanded = createMemo(() => {
     if (!local.getChildren) return false;
     const indexMap = originalIndexMap();
@@ -784,7 +786,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
             <button
               class={configButtonClass}
               onClick={openConfigModal}
-              title="시트 설정"
+              title="Sheet Settings"
               type="button"
             >
               <Icon icon={IconSettings} size="1em" />
@@ -824,7 +826,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
             <For each={headerTable()}>
               {(row, rowIndex) => (
                 <tr ref={(el: HTMLElement) => registerHeaderRow(rowIndex(), el)}>
-                  {/* 확장 기능 컬럼 헤더 — 첫 번째 행에만 표시 (rowspan으로 전체 덮기) */}
+                  {/* Expand feature column header — show only in first row (cover all with rowspan) */}
                   <Show when={hasExpandFeature() && rowIndex() === 0}>
                     <th
                       class={twMerge(
@@ -842,7 +844,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           type="button"
                           class={expandToggleClass}
                           onClick={toggleExpandAll}
-                          title={isAllExpanded() ? "전체 접기" : "전체 펼치기"}
+                          title={isAllExpanded()
+                            ? (i18n?.t("dataSheet.collapseAll") ?? "Collapse all")
+                            : (i18n?.t("dataSheet.expandAll") ?? "Expand all")}
                         >
                           <Icon
                             icon={IconChevronDown}
@@ -856,7 +860,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       </div>
                     </th>
                   </Show>
-                  {/* 선택 기능 컬럼 헤더 — 첫 번째 행에만 표시 (rowspan으로 전체 덮기) */}
+                  {/* Select feature column header — show only in first row (cover all with rowspan) */}
                   <Show when={hasSelectFeature() && rowIndex() === 0}>
                     <th
                       class={twMerge(
@@ -891,7 +895,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       </Show>
                     </th>
                   </Show>
-                  {/* 드래그 재정렬 기능 컬럼 헤더 — 첫 번째 행에만 표시 */}
+                  {/* Drag reorder feature column header — show only in first row */}
                   <Show when={hasReorderFeature() && rowIndex() === 0}>
                     <th
                       class={twMerge(
@@ -921,7 +925,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                               ? effectiveColumns()[c().colIndex!].key
                               : undefined;
 
-                          // 그룹 헤더의 고정 여부: colspan 범위 내 모든 컬럼이 fixed인지
+                          // Group header fixed status: all columns in colspan range are fixed
                           const isGroupFixed = (): boolean => {
                             if (c().isLastRow) return false;
                             const start = cellColIndex();
@@ -933,14 +937,14 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                             return true;
                           };
 
-                          // 셀의 고정 컬럼 여부 (마지막 행이면 colIndex 기반, 그 외 그룹 기반)
+                          // Cell fixed column status (based on colIndex if last row, group-based otherwise)
                           const isCellFixed = () =>
                             (c().isLastRow &&
                               c().colIndex != null &&
                               effectiveColumns()[c().colIndex!].fixed) ||
                             isGroupFixed();
 
-                          // 셀의 마지막 고정 여부
+                          // Cell's last fixed status
                           const isCellLastFixed = () => {
                             if (c().isLastRow && c().colIndex != null)
                               return isLastFixed(c().colIndex!);
@@ -951,17 +955,17 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                             return false;
                           };
 
-                          // 고정 셀의 left + top 인라인 style
+                          // Fixed cell left + top inline style
                           const cellStyle = (): string | undefined => {
                             const parts: string[] = [];
-                            // top: 모든 th에 적용 (헤더 상단 고정)
+                            // top: apply to all th (fix header to top)
                             const top = headerRowTops()[rowIndex()];
                             parts.push(`top: ${top}px`);
-                            // left: 고정 컬럼에만 적용
+                            // left: apply only to fixed columns
                             if (c().isLastRow && c().colIndex != null) {
                               const left = getFixedStyle(c().colIndex!);
                               if (left != null) parts.push(left);
-                              // max-width: 명시적 너비가 있으면 적용 (컬럼이 내용물보다 작아질 수 있도록)
+                              // max-width: apply if explicit width exists (allow column to shrink below content)
                               const col = effectiveColumns()[c().colIndex!];
                               if (col.width != null) parts.push(`max-width: ${col.width}`);
                             } else if (isGroupFixed()) {
@@ -1063,7 +1067,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
             </For>
             <Show when={hasSummary()}>
               <tr>
-                {/* 확장 기능 컬럼의 합계 셀은 rowspan으로 이미 덮여있으므로 제외 */}
+                {/* Expand feature column summary cell already covered by rowspan, skip */}
                 <For each={effectiveColumns()}>
                   {(col, colIndex) => {
                     const summaryStyle = (): string | undefined => {
@@ -1105,7 +1109,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                   }}
                   class={local.autoSelect === "click" ? "cursor-pointer" : undefined}
                 >
-                  {/* 확장 기능 컬럼 바디 셀 */}
+                  {/* Expand feature column body cell */}
                   <Show when={hasExpandFeature()}>
                     <td
                       class={twMerge(
@@ -1143,7 +1147,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       </div>
                     </td>
                   </Show>
-                  {/* 선택 기능 컬럼 바디 셀 */}
+                  {/* Select feature column body cell */}
                   <Show when={hasSelectFeature()}>
                     {(() => {
                       const selectable = () => getItemSelectable(flat.item);
@@ -1165,7 +1169,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           <Show
                             when={local.selectMode === "multiple"}
                             fallback={
-                              /* single 모드 */
+                              /* single mode */
                               <Show when={selectable() === true}>
                                 <div
                                   class={featureCellBodyClickableClass}
@@ -1185,7 +1189,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                               </Show>
                             }
                           >
-                            {/* multi 모드 */}
+                            {/* multi mode */}
                             <div
                               class={featureCellBodyClickableClass}
                               onClick={(e) => {
@@ -1219,7 +1223,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       );
                     })()}
                   </Show>
-                  {/* 드래그 재정렬 기능 컬럼 바디 셀 */}
+                  {/* Drag reorder feature column body cell */}
                   <Show when={hasReorderFeature()}>
                     <td
                       class={twMerge(

package/src/components/data/sheet/DataSheetColumn.tsx

@@ -10,7 +10,7 @@ export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDe
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function DataSheetColumn<TItem>(props: DataSheetColumnProps<TItem>): JSX.Element {
   return {
     __type: "sheet-column",

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -35,7 +35,7 @@ export interface DataSheetConfigDialogProps {
 export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (props) => {
   const dialog = useDialogInstance<DataSheetConfig>();
 
-  /* eslint-disable solid/reactivity -- 모달 props는 마운트 시 한 번만 사용되는 정적 값 */
+  /* eslint-disable solid/reactivity -- modal props are static values only used once at mount time */
   const initialItems: EditColumnItem[] = props.columnInfos
     .filter((info) => !info.collapse)
     .map((info) => {
@@ -105,7 +105,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
   }
 
   function handleReset(): void {
-    if (!confirm("모든 시트 설정을 초기화하시겠습니까?")) return;
+    if (!confirm("Are you sure you want to reset all sheet settings?")) return;
     dialog?.close({ columnRecord: {} });
   }
 
@@ -115,13 +115,13 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
           <DataSheet.Column<EditColumnItem>
             key="header"
-            header="컬럼"
+            header="Column"
             class="px-2 py-1"
             sortable={false}
           >
             {(ctx) => ctx.item.headerText}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="fixed" header="고정" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="fixed" header="Fixed" sortable={false}>
             {(ctx) => (
               <Checkbox
                 inset
@@ -130,7 +130,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
               />
             )}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="hidden" header="숨김" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="hidden" header="Hidden" sortable={false}>
             {(ctx) => (
               <Checkbox
                 inset
@@ -139,7 +139,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
               />
             )}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="width" header="너비" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="width" header="Width" sortable={false}>
             {(ctx) => (
               <TextInput
                 value={ctx.item.width}
@@ -154,12 +154,12 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
 
       <div class={footerClass}>
         <Button onClick={handleReset} theme="warning" variant="solid">
-          초기화
+          Reset
         </Button>
         <div class={footerActionsClass}>
-          <Button onClick={() => dialog?.close(undefined)}>취소</Button>
+          <Button onClick={() => dialog?.close(undefined)}>Cancel</Button>
           <Button onClick={handleOk} theme="primary" variant="solid">
-            확인
+            Confirm
           </Button>
         </div>
       </div>

package/src/components/data/sheet/sheetUtils.ts

@@ -15,7 +15,7 @@ export function buildHeaderTable<TItem>(
   const maxDepth = Math.max(...columns.map((c) => c.header.length));
   if (maxDepth === 0) return [];
 
-  // occupied[r][c] = true이면 이미 다른 셀의 병합 영역
+  // occupied[r][c] = true indicates already merged area of another cell
   const occupied: boolean[][] = Array.from({ length: maxDepth }, () =>
     Array.from({ length: columns.length }, () => false),
   );
@@ -23,7 +23,7 @@ export function buildHeaderTable<TItem>(
     Array.from({ length: columns.length }, () => null),
   );
 
-  // 각 컬럼의 헤더를 maxDepth까지 패딩
+  // Pad header of each column to maxDepth
   const padded = columns.map((col) => {
     const h = col.header;
     const result: string[] = [];
@@ -38,10 +38,10 @@ export function buildHeaderTable<TItem>(
       if (occupied[r][c]) continue;
 
       const text = padded[c][r];
-      // 원본 header 길이 기반으로 판별: 현재 행이 원본 header의 마지막 레벨 이상이면 leaf
+      // Determined based on original header length: if current row is at or beyond the last level of original header, it's a leaf
       const isLastRow = r >= columns[c].header.length - 1;
 
-      // colspan: 같은 행에서 같은 텍스트 + 같은 상위 그룹 + 고정 경계를 넘지 않음
+      // colspan: same text in same row + same parent group + does not cross fixed boundary
       let colspan = 1;
       if (!isLastRow) {
         const startFixed = columns[c].fixed;
@@ -56,7 +56,7 @@ export function buildHeaderTable<TItem>(
         }
       }
 
-      // rowspan: isLastRow이면 남은 깊이만큼
+      // rowspan: if isLastRow, span the remaining depth
       const rowspan = isLastRow ? maxDepth - r : 1;
 
       const col = columns[c];
@@ -72,7 +72,7 @@ export function buildHeaderTable<TItem>(
         headerContent: isLastRow ? col.headerContent : undefined,
       };
 
-      // 병합 영역 마킹
+      // Mark merged area
       for (let dr = 0; dr < rowspan; dr++) {
         for (let dc = 0; dc < colspan; dc++) {
           if (dr === 0 && dc === 0) continue;
@@ -85,7 +85,7 @@ export function buildHeaderTable<TItem>(
   return table;
 }
 
-// 같은 병합 그룹에 속하는지 확인 (행 0~endRow까지 같은 텍스트 시퀀스)
+// Check if belongs to same merge group (same text sequence from row 0 to endRow)
 function isSameGroup(
   padded: string[][],
   colA: number,

package/src/components/data/sheet/types.ts

@@ -1,46 +1,46 @@
 import type { JSX } from "solid-js";
 
 export interface DataSheetProps<TItem> {
-  // 데이터
+  // Data
   items?: TItem[];
-  // 설정
+  // Config
   persistKey?: string;
   hideConfigBar?: boolean;
   inset?: boolean;
   contentStyle?: JSX.CSSProperties | string;
 
-  // 정렬
+  // Sorting
   sorts?: SortingDef[];
   onSortsChange?: (sorts: SortingDef[]) => void;
   autoSort?: boolean;
 
-  // 페이지네이션
+  // Pagination
   page?: number;
   onPageChange?: (page: number) => void;
   totalPageCount?: number;
   itemsPerPage?: number;
   displayPageCount?: number;
 
-  // 선택
+  // Selection
   selectMode?: "single" | "multiple";
   selectedItems?: TItem[];
   onSelectedItemsChange?: (items: TItem[]) => void;
   autoSelect?: "click";
   isItemSelectable?: (item: TItem) => boolean | string;
 
-  // 트리 확장
+  // Tree expansion
   expandedItems?: TItem[];
   onExpandedItemsChange?: (items: TItem[]) => void;
   getChildren?: (item: TItem, index: number) => TItem[] | undefined;
 
-  // 셀 스타일
+  // Cell styling
   cellClass?: (item: TItem, colKey: string) => string | undefined;
   cellStyle?: (item: TItem, colKey: string) => string | undefined;
 
-  // 재정렬
+  // Reordering
   onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
 
-  // 기타
+  // Other
   class?: string;
   children: JSX.Element;
 }
@@ -64,9 +64,9 @@ export interface DataSheetColumnProps<TItem> {
 
 export interface DataSheetCellContext<TItem> {
   item: TItem;
-  /** 소속 배열 내 위치 (루트: items[], 자식: parent.children[]) */
+  /** Position within belonging array (root: items[], children: parent.children[]) */
   index: number;
-  /** 플랫 표시 행 위치 (현재 페이지 내 순번) */
+  /** Flat display row position (sequence number within current page) */
   row: number;
   depth: number;
 }
@@ -119,26 +119,26 @@ export interface HeaderDef {
 
 export interface FlatItem<TItem> {
   item: TItem;
-  /** 소속 배열 내 위치 (루트: items[], 자식: parent.children[]) */
+  /** Position within belonging array (root: items[], children: parent.children[]) */
   index: number;
-  /** 플랫 표시 행 위치 (현재 페이지 내 순번) */
+  /** Flat display row position (sequence number within current page) */
   row: number;
   depth: number;
   hasChildren: boolean;
   parent?: TItem;
 }
 
-// 드래그 앤 드롭 위치
+// Drag and drop position
 export type DataSheetDragPosition = "before" | "after" | "inside";
 
-// 재정렬 이벤트
+// Reorder event
 export interface DataSheetReorderEvent<TItem> {
   item: TItem;
   targetItem: TItem;
   position: DataSheetDragPosition;
 }
 
-// 설정 모달에 전달할 컬럼 정보
+// Column information passed to config modal
 export interface DataSheetConfigColumnInfo {
   key: string;
   header: string[];