react-glide-table 1.0.1 → 1.1.0

package/dist/index.cjs

@@ -20,50 +20,70 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DataTable: () => DataTable,
-  Table: () => Table,
-  createTable: () => createTable
+  CELL_SELECTION_EDGES_CLASS: () => CELL_SELECTION_EDGES_CLASS,
+  DEFAULT_DATA_TABLE_LABELS: () => DEFAULT_DATA_TABLE_LABELS,
+  DEFAULT_TREE_CHILDREN_FIELD: () => DEFAULT_TREE_CHILDREN_FIELD,
+  DEFAULT_TREE_ID_FIELD: () => DEFAULT_TREE_ID_FIELD,
+  DEFAULT_TREE_PARENT_ID_FIELD: () => DEFAULT_TREE_PARENT_ID_FIELD,
+  DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
+  applyCellEdit: () => applyCellEdit,
+  applyFillData: () => applyFillData,
+  applySelectionUpdater: () => applySelectionUpdater,
+  buildColumnRowSpanMap: () => buildColumnRowSpanMap,
+  canExpandRow: () => canExpandRow,
+  collectFillChanges: () => collectFillChanges,
+  collectRowSpanColumns: () => collectRowSpanColumns,
+  getCellEditDraftValue: () => getCellEditDraftValue,
+  getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
+  getColumnEditType: () => getColumnEditType,
+  getRowIndexInMergedCell: () => getRowIndexInMergedCell,
+  hasCellSelectionEdges: () => hasCellSelectionEdges,
+  isCellInSelection: () => isCellInSelection,
+  isColumnEditable: () => isColumnEditable,
+  parseCellEditValue: () => parseCellEditValue,
+  resolveDataTableLabels: () => resolveDataTableLabels,
+  resolveRowSelection: () => resolveRowSelection,
+  resolveRowSpanAt: () => resolveRowSpanAt,
+  toggleExpandedRowId: () => toggleExpandedRowId,
+  useCellEdit: () => useCellEdit,
+  useCellSelection: () => useCellSelection,
+  useConvertTreeData: () => useConvertTreeData,
+  useGlideTable: () => useGlideTable
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/ui/table/components/DataTable/DataTable.tsx
-var import_react_table2 = require("@tanstack/react-table");
-var import_react_virtual = require("@tanstack/react-virtual");
-var import_react6 = require("react");
+// src/core/labels.ts
+var DEFAULT_DATA_TABLE_LABELS = {
+  empty: "No data",
+  loading: "Loading...",
+  selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
+  expandRow: "Expand row",
+  collapseRow: "Collapse row"
+};
+function resolveDataTableLabels(partial) {
+  return {
+    ...DEFAULT_DATA_TABLE_LABELS,
+    ...partial
+  };
+}
+
+// src/core/treeDefaults.ts
+var DEFAULT_TREE_ID_FIELD = "id";
+var DEFAULT_TREE_PARENT_ID_FIELD = "parentId";
+var DEFAULT_TREE_CHILDREN_FIELD = "children";
+var DEFAULT_TREE_QTY_FIELD = "qty";
 
-// src/components/ui/table/components/DataTable/DataTableRow.tsx
+// src/core/useGlideTable.ts
 var import_react_table = require("@tanstack/react-table");
-var import_react3 = require("react");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_react4 = require("react");
 
 // src/components/ui/table/constants.ts
-var CELL_ALIGN_CLASS = {
-  left: "cell-align-left",
-  center: "cell-align-center",
-  right: "cell-align-right"
-};
-var ROW_HOVER_CLASS = "row-hoverable";
-var ROW_HOVERED_BG_CLASS = "row-hovered";
-var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
 var DATA_TABLE_ROW_HEIGHT = 44;
 var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
 
-// src/components/ui/table/DataTableContext.tsx
+// src/components/ui/table/features/cell-edit/useCellEdit.ts
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DataTableContext = (0, import_react.createContext)(null);
-function useDataTableRowContext() {
-  const context = (0, import_react.use)(DataTableContext);
-  if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
-  }
-  return context;
-}
-function DataTableContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableContext, { value, children });
-}
 
 // src/components/ui/table/features/cell-edit/cellEdit.ts
 function getColumnAccessorKey(columnDef) {
@@ -111,6 +131,87 @@ function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
   return newData;
 }
 
+// src/components/ui/table/features/cell-edit/useCellEdit.ts
+function useCellEdit({
+  data,
+  rows,
+  onDataChange,
+  onCellChange
+}) {
+  const [editingCell, setEditingCell] = (0, import_react.useState)(null);
+  const [draftValue, setDraftValue] = (0, import_react.useState)("");
+  const draftValueRef = (0, import_react.useRef)(draftValue);
+  const editingCellRef = (0, import_react.useRef)(editingCell);
+  (0, import_react.useEffect)(() => {
+    draftValueRef.current = draftValue;
+  }, [draftValue]);
+  (0, import_react.useEffect)(() => {
+    editingCellRef.current = editingCell;
+  }, [editingCell]);
+  const cancelEdit = (0, import_react.useCallback)(() => {
+    setEditingCell(null);
+    setDraftValue("");
+  }, []);
+  const commitEdit = (0, import_react.useCallback)(
+    (raw) => {
+      const current = editingCellRef.current;
+      if (!current) return true;
+      if (!onCellChange && !onDataChange) {
+        cancelEdit();
+        return true;
+      }
+      const row = rows[current.rowIndex];
+      const cell = row?.getVisibleCells()[current.colIndex];
+      if (!row || !cell) {
+        cancelEdit();
+        return true;
+      }
+      const value = raw ?? draftValueRef.current;
+      if (!isColumnEditable(cell.column.columnDef)) {
+        cancelEdit();
+        return true;
+      }
+      const parsed = parseCellEditValue(value, getColumnEditType(cell.column.columnDef));
+      if (!parsed.ok) return false;
+      if (onCellChange) {
+        onCellChange(row.id, cell.column.id, parsed.value);
+        cancelEdit();
+        return true;
+      }
+      const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
+      if (!next) return false;
+      onDataChange?.(next);
+      cancelEdit();
+      return true;
+    },
+    [cancelEdit, data, onCellChange, onDataChange, rows]
+  );
+  const startEdit = (0, import_react.useCallback)(
+    (rowIndex, colIndex) => {
+      const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
+      if (!cell || !isColumnEditable(cell.column.columnDef)) return;
+      const current = editingCellRef.current;
+      if (current && (current.rowIndex !== rowIndex || current.colIndex !== colIndex) && !commitEdit()) {
+        return;
+      }
+      setEditingCell({ rowIndex, colIndex });
+      setDraftValue(getCellEditDraftValue(cell.getValue()));
+    },
+    [commitEdit, rows]
+  );
+  return {
+    editingCell,
+    draftValue,
+    setDraftValue,
+    startEdit,
+    commitEdit,
+    cancelEdit
+  };
+}
+
+// src/components/ui/table/features/cell-selection/useCellSelection.ts
+var import_react2 = require("react");
+
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
   isSelecting: false,
@@ -134,7 +235,10 @@ function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
   const rowHeight = rect.height / rowSpan;
-  const offset = Math.min(Math.max(Math.floor(relativeY / rowHeight), 0), rowSpan - 1);
+  const offset = Math.min(
+    Math.max(Math.floor(relativeY / rowHeight), 0),
+    rowSpan - 1
+  );
   return rowIndex + offset;
 }
 function isCellInSelection(rowIndex, colIndex, bounds, rowSpan = 1) {
@@ -150,31 +254,348 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 }
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1) {
-  if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds) return void 0;
+var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+  const cellEndRow = rowIndex + rowSpan - 1;
+  const span = cellEndRow - rowIndex + 1;
+  if (span <= 1) return [];
+  const edges = [];
+  const isNeighborSelected = (row, neighborCol) => {
+    if (isVisuallySelectedAt) {
+      return isVisuallySelectedAt(row, neighborCol);
+    }
+    return row >= bounds.startRow && row <= bounds.endRow && neighborCol >= bounds.startCol && neighborCol <= bounds.endCol;
+  };
+  const pushUnselectedRuns = (side, neighborCol, fromRow, toRowExclusive) => {
+    let runStart = null;
+    for (let row = fromRow; row < toRowExclusive; row++) {
+      if (!isNeighborSelected(row, neighborCol)) {
+        if (runStart === null) runStart = row;
+        continue;
+      }
+      if (runStart !== null) {
+        edges.push({
+          side,
+          offsetRatio: (runStart - rowIndex) / span,
+          heightRatio: (row - runStart) / span
+        });
+        runStart = null;
+      }
+    }
+    if (runStart !== null) {
+      edges.push({
+        side,
+        offsetRatio: (runStart - rowIndex) / span,
+        heightRatio: (toRowExclusive - runStart) / span
+      });
+    }
+  };
+  const collectSide = (side, neighborCol) => {
+    if (bounds.startRow > rowIndex) {
+      pushUnselectedRuns(
+        side,
+        neighborCol,
+        rowIndex,
+        Math.min(bounds.startRow, cellEndRow + 1)
+      );
+    }
+    if (bounds.endRow < cellEndRow) {
+      pushUnselectedRuns(
+        side,
+        neighborCol,
+        Math.max(bounds.endRow + 1, rowIndex),
+        cellEndRow + 1
+      );
+    }
+  };
+  if (colIndex < bounds.endCol) {
+    collectSide("right", colIndex + 1);
+  }
+  if (colIndex > bounds.startCol) {
+    collectSide("left", colIndex - 1);
+  }
+  return edges;
+}
+function buildPartialVerticalGradient(edge) {
+  const startPct = edge.offsetRatio * 100;
+  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
+  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
+  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
+  const isBottomProtrusion = edge.offsetRatio > 0;
+  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const xPos = edge.side === "left" ? "0" : "100%";
+  const layers = [
+    {
+      image: `linear-gradient(to bottom, transparent 0%, transparent ${startStop}, ${SELECTION_EDGE_COLOR} ${startStop}, ${SELECTION_EDGE_COLOR} ${endStop}, transparent ${endStop}, transparent 100%)`,
+      size: `${SELECTION_EDGE_WIDTH_PX}px 100%`,
+      position: `${xPos} 0`
+    }
+  ];
+  if (isTopProtrusion || isBottomProtrusion) {
+    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    layers.push({
+      image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
+      size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
+      position: `${xPos} ${capTop}`
+    });
+  }
+  return layers;
+}
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+  if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
+    return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
   const isTopEdge = bounds.startRow >= rowIndex && bounds.startRow <= cellEndRow;
   const isBottomEdge = bounds.endRow >= rowIndex && bounds.endRow <= cellEndRow;
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
+  const selectionContinuesBelow = cellEndRow < bounds.endRow;
   const shadows = [];
   if (isTopEdge) {
-    shadows.push(`inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`);
+    shadows.push(
+      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+    );
   }
   if (isBottomEdge) {
-    shadows.push(`inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`);
+    shadows.push(
+      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+    );
   }
   if (isLeftEdge) {
-    shadows.push(`inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`);
+    shadows.push(
+      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+    );
   }
   if (isRightEdge) {
-    shadows.push(`inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`);
+    shadows.push(
+      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+    );
+  }
+  const stepEdges = getMergedCellStepEdges(
+    rowIndex,
+    colIndex,
+    bounds,
+    rowSpan,
+    isVisuallySelectedAt
+  );
+  const gradients = [];
+  const sizes = [];
+  const positions = [];
+  for (const edge of stepEdges) {
+    for (const partial of buildPartialVerticalGradient(edge)) {
+      gradients.push(partial.image);
+      sizes.push(partial.size);
+      positions.push(partial.position);
+    }
+  }
+  if (shadows.length === 0 && gradients.length === 0 && !selectionContinuesBelow) {
+    return void 0;
+  }
+  const style = {};
+  if (shadows.length > 0) {
+    style["--selection-edge-shadows"] = shadows.join(", ");
+  }
+  if (gradients.length > 0) {
+    style["--selection-edge-gradients"] = gradients.join(", ");
+    style["--selection-edge-sizes"] = sizes.join(", ");
+    style["--selection-edge-positions"] = positions.join(", ");
+  }
+  if (selectionContinuesBelow) {
+    style.borderBottomColor = "var(--color-brand-surface)";
+  }
+  return style;
+}
+function hasCellSelectionEdges(style) {
+  return Boolean(
+    style?.["--selection-edge-shadows"] || style?.["--selection-edge-gradients"]
+  );
+}
+
+// src/components/ui/table/features/cell-selection/fillData.ts
+function getColumnAccessorKey2(columnDef) {
+  if ("accessorKey" in columnDef && columnDef.accessorKey) {
+    return String(columnDef.accessorKey);
+  }
+  return columnDef.id;
+}
+function collectFillTargets(rows, sourceBounds, fillBounds) {
+  const targets = [];
+  const sourceHeight = sourceBounds.endRow - sourceBounds.startRow + 1;
+  const sourceWidth = sourceBounds.endCol - sourceBounds.startCol + 1;
+  for (let rowIndex = fillBounds.startRow; rowIndex <= fillBounds.endRow; rowIndex += 1) {
+    for (let colIndex = fillBounds.startCol; colIndex <= fillBounds.endCol; colIndex += 1) {
+      if (isCellInSelection(rowIndex, colIndex, sourceBounds)) continue;
+      const offsetRow = rowIndex - sourceBounds.startRow;
+      const offsetCol = colIndex - sourceBounds.startCol;
+      const sourceRowIndex = sourceBounds.startRow + (offsetRow % sourceHeight + sourceHeight) % sourceHeight;
+      const sourceColIndex = sourceBounds.startCol + (offsetCol % sourceWidth + sourceWidth) % sourceWidth;
+      const targetRow = rows[rowIndex];
+      const targetCell = targetRow?.getVisibleCells()[colIndex];
+      const sourceCell = rows[sourceRowIndex]?.getVisibleCells()[sourceColIndex];
+      if (!targetRow || !targetCell || !sourceCell) continue;
+      const accessorKey = getColumnAccessorKey2(
+        targetCell.column.columnDef
+      );
+      if (!accessorKey) continue;
+      targets.push({
+        rowIndex,
+        accessorKey,
+        columnId: targetCell.column.id,
+        value: sourceCell.getValue(),
+        rowId: targetRow.id
+      });
+    }
+  }
+  return targets;
+}
+function collectFillChanges(rows, sourceBounds, fillBounds) {
+  return collectFillTargets(rows, sourceBounds, fillBounds).map(
+    ({ rowId, columnId, value }) => ({ rowId, columnId, value })
+  );
+}
+function applyFillData(data, rows, sourceBounds, fillBounds) {
+  const newData = data.map((row) => ({ ...row }));
+  const targets = collectFillTargets(rows, sourceBounds, fillBounds);
+  for (const target of targets) {
+    if (!newData[target.rowIndex]) continue;
+    newData[target.rowIndex][target.accessorKey] = target.value;
   }
-  return shadows.length > 0 ? { boxShadow: shadows.join(", ") } : void 0;
+  return newData;
+}
+function hasFillExtension(sourceBounds, fillBounds) {
+  if (!sourceBounds) return false;
+  return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
+}
+
+// src/components/ui/table/features/cell-selection/useCellSelection.ts
+function useCellSelection({
+  data,
+  rows,
+  enabled = true,
+  onDataChange,
+  onBatchChange
+}) {
+  const [dragState, setDragState] = (0, import_react2.useState)(INITIAL_DRAG_STATE);
+  const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
+  const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
+  const handleCellMouseDown = (0, import_react2.useCallback)(
+    (rowIndex, colIndex) => {
+      if (!enabled) return;
+      setDragState({
+        isSelecting: true,
+        isFillDragging: false,
+        start: { row: rowIndex, col: colIndex },
+        end: { row: rowIndex, col: colIndex },
+        fillAnchor: null,
+        fillEnd: null
+      });
+    },
+    [enabled]
+  );
+  const handleCellMouseEnter = (0, import_react2.useCallback)(
+    (rowIndex, colIndex) => {
+      if (!enabled) return;
+      setDragState((prev) => {
+        if (prev.isSelecting) {
+          return { ...prev, end: { row: rowIndex, col: colIndex } };
+        }
+        if (prev.isFillDragging) {
+          return { ...prev, fillEnd: { row: rowIndex, col: colIndex } };
+        }
+        return prev;
+      });
+    },
+    [enabled]
+  );
+  const handleFillHandleMouseDown = (0, import_react2.useCallback)(
+    (rowIndex, colIndex) => {
+      if (!enabled) return;
+      setDragState((prev) => {
+        const bounds = getCellSelectionBounds(prev.start, prev.end);
+        if (!bounds) return prev;
+        return {
+          ...prev,
+          isSelecting: false,
+          isFillDragging: true,
+          fillAnchor: { row: bounds.startRow, col: bounds.startCol },
+          fillEnd: { row: rowIndex, col: colIndex }
+        };
+      });
+    },
+    [enabled]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) {
+      setDragState(INITIAL_DRAG_STATE);
+    }
+  }, [enabled]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "c" && activeSelectionBounds) {
+        const { startRow, endRow, startCol, endCol } = activeSelectionBounds;
+        const selectedData = rows.slice(startRow, endRow + 1).map((row) => {
+          const cells = row.getVisibleCells();
+          return cells.slice(startCol, endCol + 1).map((cell) => cell.getValue()).join("	");
+        }).join("\n");
+        navigator.clipboard.writeText(selectedData);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeSelectionBounds, enabled, rows]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) return;
+    const handleMouseUp = () => {
+      setDragState((prev) => {
+        if (prev.isFillDragging && prev.fillAnchor && prev.fillEnd) {
+          const sourceBounds = getCellSelectionBounds(prev.start, prev.end);
+          const newBounds = getCellSelectionBounds(prev.fillAnchor, prev.fillEnd);
+          if (newBounds) {
+            if (hasFillExtension(sourceBounds, newBounds) && sourceBounds) {
+              if (onBatchChange) {
+                const changes = collectFillChanges(rows, sourceBounds, newBounds);
+                if (changes.length > 0) {
+                  onBatchChange(changes);
+                }
+              } else if (onDataChange) {
+                onDataChange(applyFillData(data, rows, sourceBounds, newBounds));
+              }
+            }
+            return {
+              isSelecting: false,
+              isFillDragging: false,
+              start: { row: newBounds.startRow, col: newBounds.startCol },
+              end: { row: newBounds.endRow, col: newBounds.endCol },
+              fillAnchor: null,
+              fillEnd: null
+            };
+          }
+        }
+        if (prev.isSelecting) {
+          return { ...prev, isSelecting: false };
+        }
+        if (prev.isFillDragging) {
+          return { ...prev, isFillDragging: false, fillAnchor: null, fillEnd: null };
+        }
+        return prev;
+      });
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, [data, enabled, onBatchChange, onDataChange, rows]);
+  return {
+    dragState: enabled ? dragState : INITIAL_DRAG_STATE,
+    activeSelectionBounds,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+    handleFillHandleMouseDown
+  };
 }
 
 // src/components/ui/table/features/row-expand/row-expand.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function getFieldValue(row, key) {
   return row[key];
 }
@@ -195,20 +616,21 @@ function toggleExpandedRowId(rowId, previous) {
 var useConvertTreeData = ({
   data,
   enabled = true,
-  toggleField = "materialCode",
-  childField = "assemblyCode",
-  flattenField = "assemblyMaterials",
+  toggleField = DEFAULT_TREE_ID_FIELD,
+  childField = DEFAULT_TREE_PARENT_ID_FIELD,
+  flattenField = DEFAULT_TREE_CHILDREN_FIELD,
+  qtyField = DEFAULT_TREE_QTY_FIELD,
   preventExpand = false,
   startIndex = 1,
   expandedRows,
   onExpandedRowsChange
 }) => {
-  const onExpandedRowsChangeRef = (0, import_react2.useRef)(onExpandedRowsChange);
-  const hasInitializedRef = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const onExpandedRowsChangeRef = (0, import_react3.useRef)(onExpandedRowsChange);
+  const hasInitializedRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
     onExpandedRowsChangeRef.current = onExpandedRowsChange;
   }, [onExpandedRowsChange]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!data || data.length === 0) {
       hasInitializedRef.current = false;
       return;
@@ -218,7 +640,7 @@ var useConvertTreeData = ({
     onExpandedRowsChangeRef.current?.(new Set(ids));
     hasInitializedRef.current = true;
   }, [enabled, data, toggleField]);
-  const processedData = (0, import_react2.useMemo)(() => {
+  const processedData = (0, import_react3.useMemo)(() => {
     if (!enabled || !data || data.length === 0) return [];
     const flattenedData = [];
     const flattenItems = (items) => {
@@ -236,738 +658,124 @@ var useConvertTreeData = ({
               ;
               child[childField] = newItem[toggleField];
             }
-          });
-          flattenItems(children);
-        } else {
-          flattenedData.push(newItem);
-        }
-      });
-    };
-    flattenItems(data);
-    const dataWithLevels = flattenedData.map((item) => ({
-      ...item,
-      level: 0,
-      children: [],
-      processed: false
-    }));
-    const itemMap = /* @__PURE__ */ new Map();
-    dataWithLevels.forEach((item) => {
-      const key = getFieldValue(item, toggleField);
-      if (typeof key !== "string" || !key) return;
-      if (!itemMap.has(key)) {
-        itemMap.set(key, []);
-      }
-      itemMap.get(key)?.push(item);
-    });
-    const rootItems = [];
-    dataWithLevels.forEach((item) => {
-      if (!getFieldValue(item, childField)) {
-        rootItems.push(item);
-        item.processed = true;
-      }
-    });
-    dataWithLevels.forEach((item) => {
-      const parentKey = getFieldValue(item, childField);
-      if (!parentKey || item.processed) return;
-      const parentItems = dataWithLevels.filter(
-        (parent) => getFieldValue(parent, toggleField) === parentKey && !getFieldValue(parent, childField)
-      );
-      if (parentItems.length > 0) {
-        const parent = parentItems[0];
-        item.level = parent.level + 1;
-        parent.children.push(item);
-        item.processed = true;
-      } else {
-        const otherParents = itemMap.get(String(parentKey)) || [];
-        if (otherParents.length > 0) {
-          const parent = otherParents[0];
-          item.level = parent.level + 1;
-          parent.children.push(item);
-          item.processed = true;
-        } else {
-          rootItems.push(item);
-          item.processed = true;
-        }
-      }
-    });
-    return rootItems;
-  }, [enabled, data, toggleField, childField, flattenField]);
-  const flattenTree = (0, import_react2.useMemo)(() => {
-    if (!enabled) return [];
-    const flatten = (nodes, result = [], level = 0) => {
-      nodes.forEach((node, index) => {
-        const currentIndex = level === 0 ? `${index + startIndex}` : `${level}-${index + 1}`;
-        const toggleValue = getFieldValue(node, toggleField);
-        const uniqueId = `${index}-${String(toggleValue ?? "")}`;
-        result.push({
-          ...node,
-          treeNo: currentIndex,
-          uniqueId,
-          processed: true
-        });
-        const shouldExpandChildren = node.children.length > 0 && (preventExpand || typeof toggleValue === "string" && expandedRows?.has(toggleValue));
-        if (shouldExpandChildren) {
-          flatten(node.children, result, index + startIndex);
-        }
-      });
-      return result;
-    };
-    const flattenedData = flatten(processedData, [], 0);
-    flattenedData.forEach((item) => {
-      if (getFieldValue(item, childField)) {
-        const parentItem = flattenedData.find(
-          (parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
-        );
-        const parentAmount = parentItem ? Number(getFieldValue(parentItem, "amount") ?? 1) : 1;
-        item.parentCount = parentAmount || 1;
-      } else {
-        item.parentCount = 1;
-      }
-    });
-    return flattenedData;
-  }, [enabled, processedData, startIndex, toggleField, childField, preventExpand, expandedRows]);
-  const sortedData = (0, import_react2.useMemo)(() => {
-    if (!enabled) {
-      return data ?? [];
-    }
-    return [...flattenTree].sort((a, b) => {
-      const aParts = String(a.treeNo ?? "").split("-").map(Number);
-      const bParts = String(b.treeNo ?? "").split("-").map(Number);
-      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-        const aVal = aParts[i] || 0;
-        const bVal = bParts[i] || 0;
-        if (aVal !== bVal) {
-          return aVal - bVal;
-        }
-      }
-      return 0;
-    });
-  }, [enabled, data, flattenTree]);
-  return sortedData;
-};
-
-// src/components/ui/table/components/icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" })
-    }
-  );
-}
-function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18 15-6-6-6 6" })
-    }
-  );
-}
-function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" })
-    }
-  );
-}
-function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 18 6-6-6-6" })
-    }
-  );
-}
-function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18 15-6-6-6 6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 21V9" })
-      ]
-    }
-  );
-}
-function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3v12" })
-      ]
-    }
-  );
-}
-function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
-    {
-      className,
-      "aria-hidden": ariaHidden,
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 16-4 4-4-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17 20V4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 8 4-4 4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7 4v16" })
-      ]
-    }
-  );
-}
-
-// src/lib/cn.ts
-function cn(...inputs) {
-  return inputs.filter(Boolean).join(" ");
-}
-
-// src/components/ui/table/components/DataTable/DataTableRow.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function resolveExpandCellIndex(cells, toggleField) {
-  if (!toggleField) return 0;
-  const matchedIndex = cells.findIndex(
-    (cell) => cell.column.id === toggleField
-  );
-  if (matchedIndex >= 0) return matchedIndex;
-  const noColumnIndex = cells.findIndex(
-    (cell) => cell.column.id === "no" || cell.column.id === "treeNo"
-  );
-  if (noColumnIndex >= 0 && noColumnIndex + 1 < cells.length) {
-    return noColumnIndex + 1;
-  }
-  return 0;
-}
-function DataTableRow({
-  row,
-  onToggleSelect,
-  virtualIndex,
-  measureElement
-}) {
-  const { rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
-  const {
-    enableRowSpan,
-    primaryRowSpanKey,
-    columnRowSpanMap,
-    hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
-    onRowHover
-  } = rowSpan;
-  const { rowSelectionMode, selectOnRowClick, onRowClick, getRowClassName } = selection;
-  const {
-    activeSelectionBounds,
-    dragState,
-    onCellMouseDown,
-    onCellMouseEnter,
-    onFillHandleMouseDown
-  } = cellSelection;
-  const {
-    editingCell,
-    draftValue,
-    onDraftValueChange,
-    onStartEdit,
-    onCommitEdit,
-    onCancelEdit
-  } = cellEdit;
-  const {
-    enableExpand,
-    toggleField,
-    expandedRows,
-    preventExpand,
-    onToggleExpand
-  } = expand;
-  const rowIndex = row.index;
-  const rowData = row.original;
-  const isRowHovered = hoveredRowIndex === rowIndex;
-  const isRowSelected = row.getIsSelected();
-  const rowGroupKey = primaryRowSpanKey !== void 0 && rowData[primaryRowSpanKey] !== null && rowData[primaryRowSpanKey] !== void 0 ? String(rowData[primaryRowSpanKey]) : null;
-  const isGroupHovered = enableRowSpan && hoveredGroupKey !== null && rowGroupKey === hoveredGroupKey;
-  const isGroupSelected = enableRowSpan && rowGroupKey !== null && selectedGroupKeys.has(rowGroupKey);
-  const visibleCells = row.getVisibleCells();
-  const expandCellIndex = enableExpand ? resolveExpandCellIndex(visibleCells, toggleField) : -1;
-  const canExpand = enableExpand && !preventExpand && canExpandRow(rowData);
-  const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
-  const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
-  const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
-  const editInputRef = (0, import_react3.useRef)(null);
-  const isRowEditing = editingCell?.rowIndex === rowIndex;
-  (0, import_react3.useEffect)(() => {
-    if (!isRowEditing) return;
-    editInputRef.current?.focus();
-    editInputRef.current?.select();
-  }, [isRowEditing, editingCell?.colIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "tr",
-    {
-      ref: measureElement,
-      "data-index": virtualIndex,
-      className: cn(
-        "DataTableRowJSX",
-        !enableRowSpan && ROW_HOVER_CLASS,
-        enableRowSpan && isRowHovered && !isRowSelected && ROW_HOVERED_BG_CLASS,
-        isRowSelected && "is-selected",
-        enableExpand && canExpand && "is-expandable",
-        getRowClassName?.(rowData, rowIndex)
-      ),
-      onMouseEnter: () => onRowHover(rowIndex, rowData),
-      onClick: () => {
-        if (isRowEditing) return;
-        onRowClick?.(rowData, rowIndex);
-        if (rowSelectionMode !== "none" && selectOnRowClick) {
-          onToggleSelect();
-        }
-      },
-      children: visibleCells.map((cell, cellIndex) => {
-        const columnId = cell.column.id;
-        const meta = cell.column.columnDef.meta;
-        const align = meta?.align ?? "center";
-        const cellClassName = meta?.className;
-        const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
-        const isExpandCell = cellIndex === expandCellIndex;
-        const editable = isColumnEditable(cell.column.columnDef);
-        const editType = getColumnEditType(cell.column.columnDef);
-        let rowSpanInfo;
-        if (isRowSpanColumn) {
-          rowSpanInfo = columnRowSpanMap.get(columnId)?.[rowIndex];
-          if (rowSpanInfo && rowSpanInfo.rowSpan === 0) {
-            return null;
-          }
-        }
-        const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
-        const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
-        const isCellDragSelected = isCellInSelection(
-          rowIndex,
-          cellIndex,
-          activeSelectionBounds,
-          cellRowSpan
-        );
-        const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
-        const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "td",
-          {
-            rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
-            onMouseDown: (event) => {
-              if (isEditing) {
-                event.stopPropagation();
-                return;
-              }
-              event.preventDefault();
-              onCellMouseDown(
-                resolveCellRowIndex(event.clientY, event.currentTarget),
-                cellIndex
-              );
-            },
-            onMouseEnter: (event) => onCellMouseEnter(
-              resolveCellRowIndex(event.clientY, event.currentTarget),
-              cellIndex
-            ),
-            onMouseMove: (event) => {
-              if (!dragState.isSelecting && !dragState.isFillDragging) return;
-              onCellMouseEnter(
-                resolveCellRowIndex(event.clientY, event.currentTarget),
-                cellIndex
-              );
-            },
-            onDoubleClick: (event) => {
-              if (!editable) return;
-              event.preventDefault();
-              event.stopPropagation();
-              onStartEdit(rowIndex, cellIndex);
-            },
-            style: getCellSelectionEdgeStyle(
-              rowIndex,
-              cellIndex,
-              activeSelectionBounds,
-              cellRowSpan
-            ),
-            className: cn(
-              "data-table-cell",
-              CELL_ALIGN_CLASS[align],
-              cellClassName,
-              enableRowSpan && showCellSelected && "is-group-selected",
-              enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
-              isCellDragSelected && CELL_SELECTION_FILL_CLASS,
-              editable && "is-editable"
-            ),
-            children: [
-              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "input",
-                {
-                  ref: editInputRef,
-                  type: editType === "number" ? "number" : "text",
-                  defaultValue: draftValue,
-                  className: cn("cell-edit-input", CELL_ALIGN_CLASS[align]),
-                  onChange: (event) => onDraftValueChange(event.target.value),
-                  onMouseDown: (event) => event.stopPropagation(),
-                  onClick: (event) => event.stopPropagation(),
-                  onKeyDown: (event) => {
-                    if (event.key === "Enter") {
-                      event.preventDefault();
-                      onCommitEdit(event.currentTarget.value);
-                    }
-                    if (event.key === "Escape") {
-                      event.preventDefault();
-                      onCancelEdit();
-                    }
-                  },
-                  onBlur: (event) => {
-                    onCommitEdit(event.currentTarget.value);
-                  }
-                }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell-content", children: [
-                  rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "expand-cell-indent", children: "\xB7" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "expand-cell-value", children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
-                ] }),
-                canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": isExpanded ? "\uD589 \uC811\uAE30" : "\uD589 \uD3BC\uCE58\uAE30",
-                    className: "expand-toggle-button",
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      onToggleExpand?.(expandKey);
-                    },
-                    onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronUp, { className: "expand-toggle-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { className: "expand-toggle-icon" })
-                  }
-                )
-              ] }) : (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-              isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "div",
-                {
-                  role: "presentation",
-                  className: "fill-handle",
-                  onMouseDown: (event) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    onFillHandleMouseDown(rowIndex, cellIndex);
-                  }
-                }
-              )
-            ]
-          },
-          cell.id
-        );
-      })
-    }
-  );
-}
-
-// src/components/ui/table/components/DataTable/DataTableToolbar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function DefaultSelectionLabel({ selectedCount }) {
-  if (selectedCount <= 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "toolbar-selection", children: [
-    "\u2713 ",
-    selectedCount,
-    "\uAC1C \uC120\uD0DD\uB428"
-  ] });
-}
-function DataTableToolbar({
-  filteredCount,
-  totalCount,
-  summary,
-  selectedCount,
-  selectionLabel,
-  toolbar,
-  className
-}) {
-  const displayFiltered = filteredCount ?? totalCount;
-  const hasCount = displayFiltered !== void 0 || totalCount !== void 0;
-  const hasLeftContent = hasCount || Boolean(summary);
-  const hasToolbar = Boolean(toolbar);
-  const selectionContent = selectionLabel ? selectionLabel(selectedCount) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DefaultSelectionLabel, { selectedCount });
-  const hasSelectionContent = selectionContent !== null && selectionContent !== false;
-  if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("DataTableToolbarJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-left", children: [
-      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count", children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "toolbar-count-placeholder", children: [
-          " / ",
-          totalCount
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
-      summary
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-right", children: [
-      selectionContent,
-      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-actions", children: toolbar })
-    ] })
-  ] });
-}
-
-// src/components/ui/table/features/cell-edit/useCellEdit.ts
-var import_react4 = require("react");
-function useCellEdit({
-  data,
-  rows,
-  onDataChange
-}) {
-  const [editingCell, setEditingCell] = (0, import_react4.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react4.useState)("");
-  const draftValueRef = (0, import_react4.useRef)(draftValue);
-  const editingCellRef = (0, import_react4.useRef)(editingCell);
-  (0, import_react4.useEffect)(() => {
-    draftValueRef.current = draftValue;
-  }, [draftValue]);
-  (0, import_react4.useEffect)(() => {
-    editingCellRef.current = editingCell;
-  }, [editingCell]);
-  const cancelEdit = (0, import_react4.useCallback)(() => {
-    setEditingCell(null);
-    setDraftValue("");
-  }, []);
-  const commitEdit = (0, import_react4.useCallback)(
-    (raw) => {
-      const current = editingCellRef.current;
-      if (!current) return true;
-      if (!onDataChange) {
-        cancelEdit();
-        return true;
-      }
-      const value = raw ?? draftValueRef.current;
-      const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
-      if (!next) return false;
-      onDataChange(next);
-      cancelEdit();
-      return true;
-    },
-    [cancelEdit, data, onDataChange, rows]
-  );
-  const startEdit = (0, import_react4.useCallback)(
-    (rowIndex, colIndex) => {
-      const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
-      if (!cell || !isColumnEditable(cell.column.columnDef)) return;
-      const current = editingCellRef.current;
-      if (current && (current.rowIndex !== rowIndex || current.colIndex !== colIndex) && !commitEdit()) {
-        return;
-      }
-      setEditingCell({ rowIndex, colIndex });
-      setDraftValue(getCellEditDraftValue(cell.getValue()));
-    },
-    [commitEdit, rows]
-  );
-  return {
-    editingCell,
-    draftValue,
-    setDraftValue,
-    startEdit,
-    commitEdit,
-    cancelEdit
-  };
-}
-
-// src/components/ui/table/features/cell-selection/useCellSelection.ts
-var import_react5 = require("react");
-
-// src/components/ui/table/features/cell-selection/fillData.ts
-function getColumnAccessorKey2(columnDef) {
-  if ("accessorKey" in columnDef && columnDef.accessorKey) {
-    return String(columnDef.accessorKey);
-  }
-  return columnDef.id;
-}
-function applyFillData(data, rows, sourceBounds, fillBounds) {
-  const newData = data.map((row) => ({ ...row }));
-  const sourceHeight = sourceBounds.endRow - sourceBounds.startRow + 1;
-  const sourceWidth = sourceBounds.endCol - sourceBounds.startCol + 1;
-  for (let rowIndex = fillBounds.startRow; rowIndex <= fillBounds.endRow; rowIndex += 1) {
-    for (let colIndex = fillBounds.startCol; colIndex <= fillBounds.endCol; colIndex += 1) {
-      if (isCellInSelection(rowIndex, colIndex, sourceBounds)) continue;
-      const offsetRow = rowIndex - sourceBounds.startRow;
-      const offsetCol = colIndex - sourceBounds.startCol;
-      const sourceRowIndex = sourceBounds.startRow + (offsetRow % sourceHeight + sourceHeight) % sourceHeight;
-      const sourceColIndex = sourceBounds.startCol + (offsetCol % sourceWidth + sourceWidth) % sourceWidth;
-      const targetCell = rows[rowIndex]?.getVisibleCells()[colIndex];
-      const sourceCell = rows[sourceRowIndex]?.getVisibleCells()[sourceColIndex];
-      if (!targetCell || !sourceCell) continue;
-      const accessorKey = getColumnAccessorKey2(
-        targetCell.column.columnDef
-      );
-      if (!accessorKey) continue;
-      newData[rowIndex][accessorKey] = sourceCell.getValue();
-    }
-  }
-  return newData;
-}
-function hasFillExtension(sourceBounds, fillBounds) {
-  if (!sourceBounds) return false;
-  return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
-}
-
-// src/components/ui/table/features/cell-selection/useCellSelection.ts
-function useCellSelection({
-  data,
-  rows,
-  onDataChange
-}) {
-  const [dragState, setDragState] = (0, import_react5.useState)(INITIAL_DRAG_STATE);
-  const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
-  const activeSelectionBounds = getActiveSelectionBounds(dragState, cellSelectionBounds);
-  const handleCellMouseDown = (0, import_react5.useCallback)((rowIndex, colIndex) => {
-    setDragState({
-      isSelecting: true,
-      isFillDragging: false,
-      start: { row: rowIndex, col: colIndex },
-      end: { row: rowIndex, col: colIndex },
-      fillAnchor: null,
-      fillEnd: null
-    });
-  }, []);
-  const handleCellMouseEnter = (0, import_react5.useCallback)((rowIndex, colIndex) => {
-    setDragState((prev) => {
-      if (prev.isSelecting) {
-        return { ...prev, end: { row: rowIndex, col: colIndex } };
-      }
-      if (prev.isFillDragging) {
-        return { ...prev, fillEnd: { row: rowIndex, col: colIndex } };
+          });
+          flattenItems(children);
+        } else {
+          flattenedData.push(newItem);
+        }
+      });
+    };
+    flattenItems(data);
+    const dataWithLevels = flattenedData.map((item) => ({
+      ...item,
+      level: 0,
+      children: [],
+      processed: false
+    }));
+    const itemMap = /* @__PURE__ */ new Map();
+    dataWithLevels.forEach((item) => {
+      const key = getFieldValue(item, toggleField);
+      if (typeof key !== "string" || !key) return;
+      if (!itemMap.has(key)) {
+        itemMap.set(key, []);
       }
-      return prev;
-    });
-  }, []);
-  const handleFillHandleMouseDown = (0, import_react5.useCallback)((rowIndex, colIndex) => {
-    setDragState((prev) => {
-      const bounds = getCellSelectionBounds(prev.start, prev.end);
-      if (!bounds) return prev;
-      return {
-        ...prev,
-        isSelecting: false,
-        isFillDragging: true,
-        fillAnchor: { row: bounds.startRow, col: bounds.startCol },
-        fillEnd: { row: rowIndex, col: colIndex }
-      };
+      itemMap.get(key)?.push(item);
     });
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    const handleKeyDown = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "c" && activeSelectionBounds) {
-        const { startRow, endRow, startCol, endCol } = activeSelectionBounds;
-        const selectedData = rows.slice(startRow, endRow + 1).map((row) => {
-          const cells = row.getVisibleCells();
-          return cells.slice(startCol, endCol + 1).map((cell) => cell.getValue()).join("	");
-        }).join("\n");
-        navigator.clipboard.writeText(selectedData);
+    const rootItems = [];
+    dataWithLevels.forEach((item) => {
+      if (!getFieldValue(item, childField)) {
+        rootItems.push(item);
+        item.processed = true;
       }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [activeSelectionBounds, rows]);
-  (0, import_react5.useEffect)(() => {
-    const handleMouseUp = () => {
-      setDragState((prev) => {
-        if (prev.isFillDragging && prev.fillAnchor && prev.fillEnd) {
-          const sourceBounds = getCellSelectionBounds(prev.start, prev.end);
-          const newBounds = getCellSelectionBounds(prev.fillAnchor, prev.fillEnd);
-          if (newBounds) {
-            if (hasFillExtension(sourceBounds, newBounds) && sourceBounds && onDataChange) {
-              onDataChange(applyFillData(data, rows, sourceBounds, newBounds));
-            }
-            return {
-              isSelecting: false,
-              isFillDragging: false,
-              start: { row: newBounds.startRow, col: newBounds.startCol },
-              end: { row: newBounds.endRow, col: newBounds.endCol },
-              fillAnchor: null,
-              fillEnd: null
-            };
-          }
-        }
-        if (prev.isSelecting) {
-          return { ...prev, isSelecting: false };
+    });
+    dataWithLevels.forEach((item) => {
+      const parentKey = getFieldValue(item, childField);
+      if (!parentKey || item.processed) return;
+      const parentItems = dataWithLevels.filter(
+        (parent) => getFieldValue(parent, toggleField) === parentKey && !getFieldValue(parent, childField)
+      );
+      if (parentItems.length > 0) {
+        const parent = parentItems[0];
+        item.level = parent.level + 1;
+        parent.children.push(item);
+        item.processed = true;
+      } else {
+        const otherParents = itemMap.get(String(parentKey)) || [];
+        if (otherParents.length > 0) {
+          const parent = otherParents[0];
+          item.level = parent.level + 1;
+          parent.children.push(item);
+          item.processed = true;
+        } else {
+          rootItems.push(item);
+          item.processed = true;
         }
-        if (prev.isFillDragging) {
-          return { ...prev, isFillDragging: false, fillAnchor: null, fillEnd: null };
+      }
+    });
+    return rootItems;
+  }, [enabled, data, toggleField, childField, flattenField]);
+  const flattenTree = (0, import_react3.useMemo)(() => {
+    if (!enabled) return [];
+    const flatten = (nodes, result = [], level = 0) => {
+      nodes.forEach((node, index) => {
+        const currentIndex = level === 0 ? `${index + startIndex}` : `${level}-${index + 1}`;
+        const toggleValue = getFieldValue(node, toggleField);
+        const uniqueId = `${index}-${String(toggleValue ?? "")}`;
+        result.push({
+          ...node,
+          treeNo: currentIndex,
+          uniqueId,
+          processed: true
+        });
+        const shouldExpandChildren = node.children.length > 0 && (preventExpand || typeof toggleValue === "string" && expandedRows?.has(toggleValue));
+        if (shouldExpandChildren) {
+          flatten(node.children, result, index + startIndex);
         }
-        return prev;
       });
+      return result;
     };
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => window.removeEventListener("mouseup", handleMouseUp);
-  }, [data, onDataChange, rows]);
-  return {
-    dragState,
-    activeSelectionBounds,
-    handleCellMouseDown,
-    handleCellMouseEnter,
-    handleFillHandleMouseDown
-  };
-}
+    const flattenedData = flatten(processedData, [], 0);
+    flattenedData.forEach((item) => {
+      if (getFieldValue(item, childField)) {
+        const parentItem = flattenedData.find(
+          (parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
+        );
+        const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
+        item.parentCount = parentAmount || 1;
+      } else {
+        item.parentCount = 1;
+      }
+    });
+    return flattenedData;
+  }, [
+    enabled,
+    processedData,
+    startIndex,
+    toggleField,
+    childField,
+    qtyField,
+    preventExpand,
+    expandedRows
+  ]);
+  const sortedData = (0, import_react3.useMemo)(() => {
+    if (!enabled) {
+      return data ?? [];
+    }
+    return [...flattenTree].sort((a, b) => {
+      const aParts = String(a.treeNo ?? "").split("-").map(Number);
+      const bParts = String(b.treeNo ?? "").split("-").map(Number);
+      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+        const aVal = aParts[i] || 0;
+        const bVal = bParts[i] || 0;
+        if (aVal !== bVal) {
+          return aVal - bVal;
+        }
+      }
+      return 0;
+    });
+  }, [enabled, data, flattenTree]);
+  return sortedData;
+};
 
 // src/components/ui/table/features/row-selection/rowSelection.ts
 function resolveRowSelection(mode, controlledSelection, internalSelection) {
@@ -1010,6 +818,22 @@ function computeRowSpans(data, rowSpanKey) {
   }
   return result;
 }
+function resolveRowSpanAt(rowSpans, rowIndex) {
+  if (!rowSpans?.[rowIndex]) {
+    return { startRow: rowIndex, rowSpan: 1 };
+  }
+  const current = rowSpans[rowIndex];
+  if (current.rowSpan > 0) {
+    return { startRow: rowIndex, rowSpan: current.rowSpan };
+  }
+  for (let row = rowIndex - 1; row >= 0; row--) {
+    const info = rowSpans[row];
+    if (info && info.rowSpan > 0) {
+      return { startRow: row, rowSpan: info.rowSpan };
+    }
+  }
+  return { startRow: rowIndex, rowSpan: 1 };
+}
 function buildColumnRowSpanMap(data, columnKeys) {
   const map = /* @__PURE__ */ new Map();
   for (const { columnId, rowSpanKey } of columnKeys) {
@@ -1037,51 +861,62 @@ function collectRowSpanColumns(columns) {
   return result;
 }
 
-// src/components/ui/table/components/DataTable/DataTable.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function DataTable({
-  data,
-  columns,
-  rowSelectionMode = "none",
-  rowSelection: controlledRowSelection,
-  onRowSelectionChange,
-  totalCount,
-  filteredCount,
-  summary,
-  toolbar,
-  selectionLabel,
-  isPending = false,
-  emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
-  enableRowSpan = false,
-  getRowId,
-  onRowClick,
-  getRowClassName,
-  getRowCanSelect,
-  selectOnRowClick = true,
-  onDataChange,
-  className,
-  preserveRowSelection = false,
-  toggleField,
-  childField,
-  flattenField,
-  expandedRows: controlledExpandedRows,
-  onExpandedRowsChange,
-  preventExpand = false,
-  enableVirtualization = true,
-  estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
-  virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
-}) {
+// src/core/useGlideTable.ts
+function useGlideTable(options) {
+  const {
+    data,
+    columns,
+    rowSelectionMode = "none",
+    rowSelection: controlledRowSelection,
+    onRowSelectionChange,
+    selectionLabel,
+    emptyText,
+    loadingText,
+    labels: labelsProp,
+    enableRowSpan = false,
+    getRowId,
+    onRowClick,
+    getRowClassName,
+    getRowCanSelect,
+    selectOnRowClick = true,
+    enableCellSelection = true,
+    onDataChange,
+    onCellChange,
+    onBatchChange,
+    preserveRowSelection = false,
+    toggleField,
+    childField,
+    flattenField,
+    qtyField,
+    expandedRows: controlledExpandedRows,
+    onExpandedRowsChange,
+    preventExpand = false,
+    enableVirtualization = true,
+    estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
+    virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
+  } = options;
+  const labels = (0, import_react4.useMemo)(() => {
+    const resolved = resolveDataTableLabels(labelsProp);
+    return {
+      ...resolved,
+      empty: labelsProp?.empty ?? emptyText ?? resolved.empty,
+      loading: labelsProp?.loading ?? loadingText ?? resolved.loading,
+      selection: labelsProp?.selection ?? selectionLabel ?? resolved.selection
+    };
+  }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react6.useState)({});
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react6.useState)(null);
-  const [hoveredGroupKey, setHoveredGroupKey] = (0, import_react6.useState)(null);
-  const scrollRef = (0, import_react6.useRef)(null);
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react4.useState)({});
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react4.useState)(null);
+  const [hoveredGroupKey, setHoveredGroupKey] = (0, import_react4.useState)(null);
+  const scrollRef = (0, import_react4.useRef)(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
-        "[DataTable] enableRowSpan\uC774 \uCF1C\uC838 \uC788\uC73C\uBA74 \uC140 \uBCD1\uD569 \uC720\uC9C0\uB97C \uC704\uD574 \uAC00\uC0C1\uD654\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4."
+        "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
       );
     }
   }, [enableVirtualization, enableRowSpan]);
@@ -1091,7 +926,7 @@ function DataTable({
     internalRowSelection
   );
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react6.useCallback)(
+  const handleExpandedRowsChange = (0, import_react4.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -1107,11 +942,12 @@ function DataTable({
     toggleField,
     childField,
     flattenField,
+    qtyField,
     expandedRows,
     onExpandedRowsChange: enableExpand ? handleExpandedRowsChange : void 0,
     preventExpand
   });
-  const table = (0, import_react_table2.useReactTable)({
+  const table = (0, import_react_table.useReactTable)({
     data: tableData,
     columns,
     state: {
@@ -1130,15 +966,15 @@ function DataTable({
         (previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
       );
     },
-    getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react6.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react4.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
-  const columnRowSpanMap = (0, import_react6.useMemo)(
+  const columnRowSpanMap = (0, import_react4.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -1156,7 +992,7 @@ function DataTable({
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedGroupKeys = (0, import_react6.useMemo)(() => {
+  const selectedGroupKeys = (0, import_react4.useMemo)(() => {
     if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
     const keys = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
@@ -1171,11 +1007,22 @@ function DataTable({
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown
-  } = useCellSelection({ data: tableData, rows, onDataChange });
-  const { editingCell, draftValue, setDraftValue, startEdit, commitEdit, cancelEdit } = useCellEdit(
-    { data: tableData, rows, onDataChange }
-  );
-  const handleCellMouseDownWithCommit = (0, import_react6.useCallback)(
+  } = useCellSelection({
+    data: tableData,
+    rows,
+    enabled: enableCellSelection,
+    onDataChange,
+    onBatchChange
+  });
+  const {
+    editingCell,
+    draftValue,
+    setDraftValue,
+    startEdit,
+    commitEdit,
+    cancelEdit
+  } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const handleCellMouseDownWithCommit = (0, import_react4.useCallback)(
     (rowIndex, colIndex) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
@@ -1185,11 +1032,11 @@ function DataTable({
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const clearHover = () => {
+  const clearHover = (0, import_react4.useCallback)(() => {
     setHoveredRowIndex(null);
     setHoveredGroupKey(null);
-  };
-  const handleRowHover = (0, import_react6.useCallback)(
+  }, []);
+  const handleRowHover = (0, import_react4.useCallback)(
     (rowIndex, rowData) => {
       setHoveredRowIndex(rowIndex);
       if (!primaryRowSpanKey) {
@@ -1203,7 +1050,7 @@ function DataTable({
     },
     [primaryRowSpanKey]
   );
-  const handleToggleSelect = (0, import_react6.useCallback)(
+  const handleToggleSelect = (0, import_react4.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -1213,14 +1060,14 @@ function DataTable({
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react6.useCallback)(
+  const handleToggleExpand = (0, import_react4.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react6.useMemo)(() => {
+  const rowContextValue = (0, import_react4.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -1238,6 +1085,7 @@ function DataTable({
         getRowClassName
       },
       cellSelection: {
+        enableCellSelection,
         activeSelectionBounds,
         dragState,
         onCellMouseDown: handleCellMouseDownWithCommit,
@@ -1257,7 +1105,9 @@ function DataTable({
         toggleField,
         expandedRows,
         preventExpand,
-        onToggleExpand: handleToggleExpand
+        onToggleExpand: handleToggleExpand,
+        expandRowLabel: labels.expandRow,
+        collapseRowLabel: labels.collapseRow
       }
     };
   }, [
@@ -1272,6 +1122,7 @@ function DataTable({
     selectOnRowClick,
     onRowClick,
     getRowClassName,
+    enableCellSelection,
     activeSelectionBounds,
     dragState,
     handleCellMouseDownWithCommit,
@@ -1287,405 +1138,61 @@ function DataTable({
     toggleField,
     expandedRows,
     preventExpand,
-    handleToggleExpand
+    handleToggleExpand,
+    labels.expandRow,
+    labels.collapseRow
   ]);
-  if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("DataTableJSX", "DataTableJSX--pending", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "data-table-loading-text", children: "\uB85C\uB529 \uC911..." }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("DataTableJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      DataTableToolbar,
-      {
-        filteredCount: filteredCount ?? tableData.length,
-        totalCount,
-        summary,
-        selectedCount,
-        selectionLabel,
-        toolbar
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: "data-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "table",
-      {
-        className: "data-table",
-        onDragStart: (event) => event.preventDefault(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "data-table-head", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "data-table-head-row", children: headerGroup.headers.map((header) => {
-            const align = header.column.columnDef.meta?.align ?? "center";
-            const headerClassName = header.column.columnDef.meta?.headerClassName;
-            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "th",
-              {
-                style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
-                className: cn(
-                  "data-table-head-cell",
-                  CELL_ALIGN_CLASS[align],
-                  headerClassName
-                ),
-                children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext())
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: rowContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { onMouseLeave: clearHover, className: "data-table-body", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columnCount, className: "data-table-empty-cell", children: emptyText }) }) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "td",
-              {
-                colSpan: columnCount,
-                style: { height: paddingTop },
-                className: "data-table-virtual-spacer-cell"
-              }
-            ) }),
-            virtualRows.map((virtualRow) => {
-              const row = rows[virtualRow.index];
-              if (!row) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                DataTableRow,
-                {
-                  row,
-                  virtualIndex: virtualRow.index,
-                  measureElement: rowVirtualizer.measureElement,
-                  onToggleSelect: () => handleToggleSelect(row)
-                },
-                row.id
-              );
-            }),
-            paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "td",
-              {
-                colSpan: columnCount,
-                style: { height: paddingBottom },
-                className: "data-table-virtual-spacer-cell"
-              }
-            ) })
-          ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            DataTableRow,
-            {
-              row,
-              onToggleSelect: () => handleToggleSelect(row)
-            },
-            row.id
-          )) }) })
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/components/ui/table/components/Table/Table.tsx
-var import_react9 = require("react");
-
-// src/components/ui/table/components/Table/buildColumnDef.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function SortableHeader({
-  label,
-  field,
-  sort,
-  onSort
-}) {
-  const isActive = sort?.field === field;
-  const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "button",
-    {
-      type: "button",
-      className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
-      onClick: () => onSort(field),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "sortable-header-icon" })
-      ]
-    }
-  );
-}
-function buildColumnDef(props, sort, onSort) {
-  const {
-    field,
-    virtual = false,
-    children,
-    sortable = false,
-    width,
-    align,
-    rowSpan,
-    rowSpanKey,
-    editable,
-    editType,
-    className,
-    headerClassName,
-    render
-  } = props;
   return {
-    id: field,
-    ...!virtual ? { accessorKey: field } : {},
-    size: width ?? 150,
-    header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
-      // eslint-disable-next-line @typescript-eslint/promise-function-async
-      () => children
-    ),
-    ...render ? {
-      // eslint-disable-next-line @typescript-eslint/promise-function-async
-      cell: ({ row, getValue }) => render(
-        getValue(),
-        row,
-        row.index
-      )
-    } : {},
-    meta: {
-      align,
-      rowSpan,
-      rowSpanKey,
-      editable,
-      editType,
-      className,
-      headerClassName
-    }
-  };
-}
-
-// src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react8 = require("react");
-
-// src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react7 = require("react");
-var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
-var TABLE_BODY_DISPLAY_NAME = "Table.Body";
-var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
-var TABLE_PAGINATION_DISPLAY_NAME = "Table.Pagination";
-function getComponentDisplayName(type) {
-  if (typeof type === "function" || typeof type === "object" && type !== null) {
-    return type.displayName;
-  }
-  return void 0;
-}
-function isTableHeaderElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
-}
-function isTableBodyElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
-}
-function isTableColumnElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
-}
-function isTablePaginationElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
-}
-
-// src/components/ui/table/components/Table/parseTableChildren.ts
-function parseTableChildren(children) {
-  const slots = {
-    header: null,
-    body: null,
-    pagination: null
+    table,
+    tableData,
+    rows,
+    columnCount,
+    selectedCount,
+    labels,
+    emptyText: labels.empty,
+    loadingText: labels.loading,
+    selectionLabel: labels.selection,
+    enableCellSelection,
+    shouldVirtualize,
+    scrollRef,
+    rowVirtualizer,
+    virtualRows,
+    paddingTop,
+    paddingBottom,
+    rowContextValue,
+    handleToggleSelect,
+    clearHover
   };
-  for (const child of import_react8.Children.toArray(children)) {
-    if (isTableHeaderElement(child)) {
-      slots.header = child;
-      continue;
-    }
-    if (isTableBodyElement(child)) {
-      slots.body = child;
-      continue;
-    }
-    if (isTablePaginationElement(child)) {
-      slots.pagination = child;
-    }
-  }
-  return slots;
-}
-function extractColumnElements(header) {
-  if (!header) return [];
-  const { children } = header.props;
-  return import_react8.Children.toArray(children).filter(isTableColumnElement);
-}
-
-// src/components/ui/table/components/Table/TableBody.tsx
-function TableBody() {
-  return null;
-}
-TableBody.displayName = TABLE_BODY_DISPLAY_NAME;
-
-// src/components/ui/table/components/Table/TableColumn.tsx
-function TableColumn(props) {
-  void props;
-  return null;
-}
-TableColumn.displayName = TABLE_COLUMN_DISPLAY_NAME;
-
-// src/components/ui/table/components/Table/tableDataPipeline.ts
-function sortTableData(data, sort) {
-  if (!sort) return data;
-  const { field, direction } = sort;
-  const multiplier = direction === "asc" ? 1 : -1;
-  return [...data].sort((left, right) => {
-    const leftValue = left[field];
-    const rightValue = right[field];
-    if ((leftValue === null || leftValue === void 0) && (rightValue === null || rightValue === void 0)) {
-      return 0;
-    }
-    if (leftValue === null || leftValue === void 0) return 1;
-    if (rightValue === null || rightValue === void 0) return -1;
-    if (typeof leftValue === "number" && typeof rightValue === "number") {
-      return (leftValue - rightValue) * multiplier;
-    }
-    return String(leftValue).localeCompare(String(rightValue), "ko") * multiplier;
-  });
-}
-function paginateTableData(data, page, pageSize) {
-  const safePage = Math.max(1, page);
-  const start = (safePage - 1) * pageSize;
-  return data.slice(start, start + pageSize);
-}
-function getTotalPages(totalCount, pageSize) {
-  if (pageSize <= 0) return 1;
-  return Math.max(1, Math.ceil(totalCount / pageSize));
-}
-
-// src/components/ui/table/components/Table/TableHeader.tsx
-function TableHeader(props) {
-  void props;
-  return null;
-}
-TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
-
-// src/components/ui/table/components/Table/TablePagination.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function TablePagination({
-  page,
-  pageSize = 10,
-  totalCount = 0,
-  onChange,
-  className
-}) {
-  const totalPages = getTotalPages(totalCount, pageSize);
-  const safePage = Math.min(Math.max(1, page), totalPages);
-  const canGoPrev = safePage > 1;
-  const canGoNext = safePage < totalPages;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "pagination-button",
-        disabled: !canGoPrev,
-        onClick: () => onChange(safePage - 1),
-        "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: "pagination-button-icon" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "pagination-label", children: [
-      safePage,
-      " / ",
-      totalPages
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "pagination-button",
-        disabled: !canGoNext,
-        onClick: () => onChange(safePage + 1),
-        "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: "pagination-button-icon" })
-      }
-    )
-  ] });
-}
-TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
-
-// src/components/ui/table/components/Table/Table.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function TableRoot({
-  data,
-  children,
-  className,
-  totalCount,
-  filteredCount,
-  ...dataTableProps
-}) {
-  const { header, pagination: paginationElement } = (0, import_react9.useMemo)(
-    () => parseTableChildren(children),
-    [children]
-  );
-  const [sort, setSort] = (0, import_react9.useState)(null);
-  const handleSort = (0, import_react9.useCallback)((field) => {
-    setSort((previous) => {
-      if (previous?.field !== field) {
-        return { field, direction: "asc" };
-      }
-      if (previous.direction === "asc") {
-        return { field, direction: "desc" };
-      }
-      return null;
-    });
-  }, []);
-  const columns = (0, import_react9.useMemo)(() => {
-    return extractColumnElements(header).map(
-      (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
-    );
-  }, [header, sort, handleSort]);
-  const paginationProps = paginationElement?.props;
-  const pageSize = paginationProps?.pageSize ?? 10;
-  const page = paginationProps?.page ?? 1;
-  const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react9.useMemo)(() => {
-    const sortedData = sortTableData(data, sort);
-    if (!paginationProps) return sortedData;
-    return paginateTableData(sortedData, page, pageSize);
-  }, [data, sort, paginationProps, page, pageSize]);
-  if (columns.length === 0) {
-    console.warn("[Table] Table.Header \uC548\uC5D0 Table.Column\uC744 \uD558\uB098 \uC774\uC0C1 \uC120\uC5B8\uD574 \uC8FC\uC138\uC694.");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "TableJSX", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      DataTable,
-      {
-        ...dataTableProps,
-        data: tableData,
-        columns,
-        totalCount: paginationProps ? resolvedTotalCount : totalCount,
-        filteredCount: filteredCount ?? data.length,
-        className: cn(className, paginationProps && "DataTableJSX--with-pagination")
-      }
-    ),
-    paginationProps && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      TablePagination,
-      {
-        page,
-        pageSize,
-        totalCount: resolvedTotalCount,
-        onChange: paginationProps.onChange,
-        className: paginationProps.className
-      }
-    )
-  ] });
-}
-function createTable() {
-  function Column(props) {
-    void props;
-    return null;
-  }
-  Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
-  return Object.assign(
-    function BoundTable(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableRoot, { ...props });
-    },
-    {
-      Header: TableHeader,
-      Column,
-      Body: TableBody,
-      Pagination: TablePagination
-    }
-  );
 }
-var Table = Object.assign(TableRoot, {
-  Header: TableHeader,
-  Column: TableColumn,
-  Body: TableBody,
-  Pagination: TablePagination
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DataTable,
-  Table,
-  createTable
+  CELL_SELECTION_EDGES_CLASS,
+  DEFAULT_DATA_TABLE_LABELS,
+  DEFAULT_TREE_CHILDREN_FIELD,
+  DEFAULT_TREE_ID_FIELD,
+  DEFAULT_TREE_PARENT_ID_FIELD,
+  DEFAULT_TREE_QTY_FIELD,
+  applyCellEdit,
+  applyFillData,
+  applySelectionUpdater,
+  buildColumnRowSpanMap,
+  canExpandRow,
+  collectFillChanges,
+  collectRowSpanColumns,
+  getCellEditDraftValue,
+  getCellSelectionEdgeStyle,
+  getColumnEditType,
+  getRowIndexInMergedCell,
+  hasCellSelectionEdges,
+  isCellInSelection,
+  isColumnEditable,
+  parseCellEditValue,
+  resolveDataTableLabels,
+  resolveRowSelection,
+  resolveRowSpanAt,
+  toggleExpandedRowId,
+  useCellEdit,
+  useCellSelection,
+  useConvertTreeData,
+  useGlideTable
 });