react-glide-table 1.0.2 → 1.1.1

package/dist/index.cjs

@@ -20,20 +20,66 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  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,
   DataTable: () => DataTable,
   Table: () => Table,
-  createTable: () => createTable
+  applyCellEdit: () => applyCellEdit,
+  applyFillData: () => applyFillData,
+  applySelectionUpdater: () => applySelectionUpdater,
+  buildColumnRowSpanMap: () => buildColumnRowSpanMap,
+  canExpandRow: () => canExpandRow,
+  collectFillChanges: () => collectFillChanges,
+  collectRowSpanColumns: () => collectRowSpanColumns,
+  createTable: () => createTable,
+  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/components/ui/table/components/DataTable/DataTableRow.tsx
+// 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/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 = {
@@ -47,23 +93,8 @@ 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 +142,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 +246,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 +265,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 +627,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 +651,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) => {
@@ -292,7 +725,7 @@ var useConvertTreeData = ({
     });
     return rootItems;
   }, [enabled, data, toggleField, childField, flattenField]);
-  const flattenTree = (0, import_react2.useMemo)(() => {
+  const flattenTree = (0, import_react3.useMemo)(() => {
     if (!enabled) return [];
     const flatten = (nodes, result = [], level = 0) => {
       nodes.forEach((node, index) => {
@@ -318,19 +751,28 @@ var useConvertTreeData = ({
         const parentItem = flattenedData.find(
           (parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
         );
-        const parentAmount = parentItem ? Number(getFieldValue(parentItem, "amount") ?? 1) : 1;
+        const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 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) => {
+  }, [
+    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++) {
@@ -346,185 +788,599 @@ var useConvertTreeData = ({
   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" })
-    }
-  );
+// src/components/ui/table/features/row-selection/rowSelection.ts
+function resolveRowSelection(mode, controlledSelection, internalSelection) {
+  if (mode === "none") return {};
+  return controlledSelection ?? internalSelection;
 }
-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 normalizeSingleSelection(next) {
+  const selectedIds = Object.keys(next).filter((id) => next[id]);
+  if (selectedIds.length <= 1) return next;
+  return { [selectedIds[selectedIds.length - 1]]: true };
 }
-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 applySelectionUpdater(mode, updater, previous) {
+  const next = typeof updater === "function" ? updater(previous) : updater;
+  return mode === "single" ? normalizeSingleSelection(next) : next;
 }
-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" })
-    }
-  );
+
+// src/components/ui/table/features/row-span/rowSpan.ts
+function getRowFieldValue(row, key) {
+  return row[key];
 }
-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 computeRowSpans(data, rowSpanKey) {
+  if (data.length === 0) return [];
+  const result = [];
+  for (let index = 0; index < data.length; index++) {
+    const currentValue = getRowFieldValue(data[index], rowSpanKey);
+    const previousValue = index > 0 ? getRowFieldValue(data[index - 1], rowSpanKey) : void 0;
+    if (index > 0 && currentValue === previousValue) {
+      result.push({ rowSpan: 0, isFirstInGroup: false });
+      continue;
     }
-  );
-}
-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" })
-      ]
+    let span = 1;
+    for (let nextIndex = index + 1; nextIndex < data.length; nextIndex++) {
+      if (getRowFieldValue(data[nextIndex], rowSpanKey) === currentValue) {
+        span++;
+      } else {
+        break;
+      }
     }
-  );
+    result.push({ rowSpan: span, isFirstInGroup: true });
+  }
+  return result;
 }
-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" })
-      ]
+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 };
 }
-
-// src/lib/cn.ts
-function cn(...inputs) {
-  return inputs.filter(Boolean).join(" ");
+function buildColumnRowSpanMap(data, columnKeys) {
+  const map = /* @__PURE__ */ new Map();
+  for (const { columnId, rowSpanKey } of columnKeys) {
+    map.set(columnId, computeRowSpans(data, rowSpanKey));
+  }
+  return map;
+}
+function collectRowSpanColumns(columns) {
+  const result = [];
+  const visit = (defs) => {
+    for (const columnDef of defs) {
+      if ("columns" in columnDef && columnDef.columns?.length) {
+        visit(columnDef.columns);
+        continue;
+      }
+      const columnId = columnDef.id ?? ("accessorKey" in columnDef && columnDef.accessorKey ? String(columnDef.accessorKey) : void 0);
+      if (!columnId || !columnDef.meta?.rowSpan) continue;
+      result.push({
+        columnId,
+        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId
+      });
+    }
+  };
+  visit(columns);
+  return result;
 }
 
-// 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
+// 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_react4.useState)({});
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
+    () => /* @__PURE__ */ new Set()
   );
-  if (matchedIndex >= 0) return matchedIndex;
-  const noColumnIndex = cells.findIndex(
-    (cell) => cell.column.id === "no" || cell.column.id === "treeNo"
+  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_react4.useEffect)(() => {
+    if (enableVirtualization && enableRowSpan) {
+      console.warn(
+        "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
+      );
+    }
+  }, [enableVirtualization, enableRowSpan]);
+  const rowSelection = resolveRowSelection(
+    rowSelectionMode,
+    controlledRowSelection,
+    internalRowSelection
   );
-  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
+  const expandedRows = controlledExpandedRows ?? internalExpandedRows;
+  const handleExpandedRowsChange = (0, import_react4.useCallback)(
+    (next) => {
+      if (onExpandedRowsChange) {
+        onExpandedRowsChange(next);
+        return;
+      }
+      setInternalExpandedRows(next);
+    },
+    [onExpandedRowsChange]
+  );
+  const tableData = useConvertTreeData({
+    data,
+    enabled: enableExpand,
+    toggleField,
+    childField,
+    flattenField,
+    qtyField,
+    expandedRows,
+    onExpandedRowsChange: enableExpand ? handleExpandedRowsChange : void 0,
+    preventExpand
+  });
+  const table = (0, import_react_table.useReactTable)({
+    data: tableData,
+    columns,
+    state: {
+      rowSelection: rowSelectionMode === "none" ? {} : rowSelection
+    },
+    enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
+    enableMultiRowSelection: rowSelectionMode === "multi",
+    onRowSelectionChange: (updater) => {
+      if (onRowSelectionChange) {
+        onRowSelectionChange(
+          (previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
+        );
+        return;
+      }
+      setInternalRowSelection(
+        (previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
+      );
+    },
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
+  });
+  const rowSpanColumnKeys = (0, import_react4.useMemo)(() => {
+    if (!enableRowSpan) return [];
+    return collectRowSpanColumns(columns);
+  }, [enableRowSpan, columns]);
+  const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
+  const columnRowSpanMap = (0, import_react4.useMemo)(
+    () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
+    [tableData, rowSpanColumnKeys]
+  );
+  const selectedRows = table.getSelectedRowModel().rows;
+  const selectedCount = selectedRows.length;
+  const rows = table.getRowModel().rows;
+  const columnCount = table.getAllLeafColumns().length || 1;
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: shouldVirtualize ? rows.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => estimateRowHeight,
+    overscan: virtualOverscan
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  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_react4.useMemo)(() => {
+    if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
+    const keys = /* @__PURE__ */ new Set();
+    for (const selectedRow of selectedRows) {
+      const value = selectedRow.original[primaryRowSpanKey];
+      if (value !== null && value !== void 0) keys.add(String(value));
+    }
+    return keys;
+  }, [enableRowSpan, primaryRowSpanKey, selectedRows]);
+  const {
+    dragState,
+    activeSelectionBounds,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+    handleFillHandleMouseDown
+  } = 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()) {
+        return;
+      }
+      handleCellMouseDown(rowIndex, colIndex);
+    },
+    [commitEdit, editingCell, handleCellMouseDown]
+  );
+  const clearHover = (0, import_react4.useCallback)(() => {
+    setHoveredRowIndex(null);
+    setHoveredGroupKey(null);
+  }, []);
+  const handleRowHover = (0, import_react4.useCallback)(
+    (rowIndex, rowData) => {
+      setHoveredRowIndex(rowIndex);
+      if (!primaryRowSpanKey) {
+        setHoveredGroupKey(null);
+        return;
+      }
+      const groupValue = rowData[primaryRowSpanKey];
+      setHoveredGroupKey(
+        groupValue === null || groupValue === void 0 ? null : String(groupValue)
+      );
+    },
+    [primaryRowSpanKey]
+  );
+  const handleToggleSelect = (0, import_react4.useCallback)(
+    (row) => {
+      if (!row.getCanSelect()) return;
+      if (preserveRowSelection && row.getIsSelected()) {
+        return;
+      }
+      row.toggleSelected();
+    },
+    [preserveRowSelection]
+  );
+  const handleToggleExpand = (0, import_react4.useCallback)(
+    (rowKey) => {
+      if (preventExpand) return;
+      handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
+    },
+    [preventExpand, handleExpandedRowsChange, expandedRows]
+  );
+  const rowContextValue = (0, import_react4.useMemo)(() => {
+    return {
+      rowSpan: {
+        enableRowSpan,
+        primaryRowSpanKey,
+        columnRowSpanMap,
+        hoveredRowIndex,
+        hoveredGroupKey,
+        selectedGroupKeys,
+        onRowHover: handleRowHover
+      },
+      selection: {
+        rowSelectionMode,
+        selectOnRowClick,
+        onRowClick,
+        getRowClassName
+      },
+      cellSelection: {
+        enableCellSelection,
+        activeSelectionBounds,
+        dragState,
+        onCellMouseDown: handleCellMouseDownWithCommit,
+        onCellMouseEnter: handleCellMouseEnter,
+        onFillHandleMouseDown: handleFillHandleMouseDown
+      },
+      cellEdit: {
+        editingCell,
+        draftValue,
+        onDraftValueChange: setDraftValue,
+        onStartEdit: startEdit,
+        onCommitEdit: commitEdit,
+        onCancelEdit: cancelEdit
+      },
+      expand: {
+        enableExpand,
+        toggleField,
+        expandedRows,
+        preventExpand,
+        onToggleExpand: handleToggleExpand,
+        expandRowLabel: labels.expandRow,
+        collapseRowLabel: labels.collapseRow
+      }
+    };
+  }, [
+    enableRowSpan,
+    primaryRowSpanKey,
+    columnRowSpanMap,
+    hoveredRowIndex,
+    hoveredGroupKey,
+    selectedGroupKeys,
+    handleRowHover,
+    rowSelectionMode,
+    selectOnRowClick,
+    onRowClick,
+    getRowClassName,
+    enableCellSelection,
+    activeSelectionBounds,
+    dragState,
+    handleCellMouseDownWithCommit,
+    handleCellMouseEnter,
+    handleFillHandleMouseDown,
+    editingCell,
+    draftValue,
+    setDraftValue,
+    startEdit,
+    commitEdit,
+    cancelEdit,
+    enableExpand,
+    toggleField,
+    expandedRows,
+    preventExpand,
+    handleToggleExpand,
+    labels.expandRow,
+    labels.collapseRow
+  ]);
+  return {
+    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
+  };
+}
+
+// src/components/ui/table/components/DataTable/DataTable.tsx
+var import_react_table3 = require("@tanstack/react-table");
+
+// src/components/ui/table/components/DataTable/DataTableRow.tsx
+var import_react_table2 = require("@tanstack/react-table");
+var import_react6 = require("react");
+
+// src/components/ui/table/DataTableContext.tsx
+var import_react5 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DataTableContext = (0, import_react5.createContext)(null);
+function useDataTableRowContext() {
+  const context = (0, import_react5.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/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 {
+    enableCellSelection,
     activeSelectionBounds,
     dragState,
     onCellMouseDown,
@@ -544,7 +1400,9 @@ function DataTableRow({
     toggleField,
     expandedRows,
     preventExpand,
-    onToggleExpand
+    onToggleExpand,
+    expandRowLabel,
+    collapseRowLabel
   } = expand;
   const rowIndex = row.index;
   const rowData = row.original;
@@ -554,14 +1412,31 @@ function DataTableRow({
   const isGroupHovered = enableRowSpan && hoveredGroupKey !== null && rowGroupKey === hoveredGroupKey;
   const isGroupSelected = enableRowSpan && rowGroupKey !== null && selectedGroupKeys.has(rowGroupKey);
   const visibleCells = row.getVisibleCells();
+  const columnIdsByIndex = visibleCells.map((cell) => cell.column.id);
+  const isVisuallySelectedAt = activeSelectionBounds ? (targetRow, targetCol) => {
+    if (targetCol < activeSelectionBounds.startCol || targetCol > activeSelectionBounds.endCol) {
+      return false;
+    }
+    const columnId = columnIdsByIndex[targetCol];
+    const { startRow, rowSpan: span } = resolveRowSpanAt(
+      columnId ? columnRowSpanMap.get(columnId) : void 0,
+      targetRow
+    );
+    return isCellInSelection(
+      startRow,
+      targetCol,
+      activeSelectionBounds,
+      span
+    );
+  } : void 0;
   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 editInputRef = (0, import_react6.useRef)(null);
   const isRowEditing = editingCell?.rowIndex === rowIndex;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isRowEditing) return;
     editInputRef.current?.focus();
     editInputRef.current?.select();
@@ -607,6 +1482,11 @@ function DataTableRow({
         const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
         const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMerged = cellRowSpan > 1;
+        const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
+          columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
+          rowIndex
+        ).rowSpan <= 1);
         const isCellDragSelected = isCellInSelection(
           rowIndex,
           cellIndex,
@@ -614,6 +1494,13 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const selectionEdgeStyle = getCellSelectionEdgeStyle(
+          rowIndex,
+          cellIndex,
+          activeSelectionBounds,
+          cellRowSpan,
+          isVisuallySelectedAt
+        );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
@@ -624,17 +1511,22 @@ function DataTableRow({
                 event.stopPropagation();
                 return;
               }
+              if (!enableCellSelection) return;
               event.preventDefault();
               onCellMouseDown(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
                 cellIndex
               );
             },
-            onMouseEnter: (event) => onCellMouseEnter(
-              resolveCellRowIndex(event.clientY, event.currentTarget),
-              cellIndex
-            ),
+            onMouseEnter: (event) => {
+              if (!enableCellSelection) return;
+              onCellMouseEnter(
+                resolveCellRowIndex(event.clientY, event.currentTarget),
+                cellIndex
+              );
+            },
             onMouseMove: (event) => {
+              if (!enableCellSelection) return;
               if (!dragState.isSelecting && !dragState.isFillDragging) return;
               onCellMouseEnter(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
@@ -647,19 +1539,17 @@ function DataTableRow({
               event.stopPropagation();
               onStartEdit(rowIndex, cellIndex);
             },
-            style: getCellSelectionEdgeStyle(
-              rowIndex,
-              cellIndex,
-              activeSelectionBounds,
-              cellRowSpan
-            ),
+            style: selectionEdgeStyle,
             className: cn(
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
+              isMerged && cellIndex > 0 && "is-merged",
+              showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
               isCellDragSelected && CELL_SELECTION_FILL_CLASS,
+              hasCellSelectionEdges(selectionEdgeStyle) && CELL_SELECTION_EDGES_CLASS,
               editable && "is-editable"
             ),
             children: [
@@ -690,13 +1580,13 @@ function DataTableRow({
               ) : 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()) })
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "expand-cell-value", children: (0, import_react_table2.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",
+                    "aria-label": isExpanded ? collapseRowLabel : expandRowLabel,
                     className: "expand-toggle-button",
                     onClick: (event) => {
                       event.stopPropagation();
@@ -706,7 +1596,7 @@ function DataTableRow({
                     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()),
+              ] }) : (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
               isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "div",
                 {
@@ -730,14 +1620,6 @@ function DataTableRow({
 
 // 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,
@@ -751,625 +1633,166 @@ function DataTableToolbar({
   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 } };
-      }
-      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 }
-      };
-    });
-  }, []);
-  (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);
-      }
-    };
-    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 };
-        }
-        if (prev.isFillDragging) {
-          return { ...prev, isFillDragging: false, fillAnchor: null, fillEnd: null };
-        }
-        return prev;
-      });
-    };
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => window.removeEventListener("mouseup", handleMouseUp);
-  }, [data, onDataChange, rows]);
-  return {
-    dragState,
-    activeSelectionBounds,
-    handleCellMouseDown,
-    handleCellMouseEnter,
-    handleFillHandleMouseDown
-  };
-}
-
-// src/components/ui/table/features/row-selection/rowSelection.ts
-function resolveRowSelection(mode, controlledSelection, internalSelection) {
-  if (mode === "none") return {};
-  return controlledSelection ?? internalSelection;
-}
-function normalizeSingleSelection(next) {
-  const selectedIds = Object.keys(next).filter((id) => next[id]);
-  if (selectedIds.length <= 1) return next;
-  return { [selectedIds[selectedIds.length - 1]]: true };
-}
-function applySelectionUpdater(mode, updater, previous) {
-  const next = typeof updater === "function" ? updater(previous) : updater;
-  return mode === "single" ? normalizeSingleSelection(next) : next;
-}
-
-// src/components/ui/table/features/row-span/rowSpan.ts
-function getRowFieldValue(row, key) {
-  return row[key];
-}
-function computeRowSpans(data, rowSpanKey) {
-  if (data.length === 0) return [];
-  const result = [];
-  for (let index = 0; index < data.length; index++) {
-    const currentValue = getRowFieldValue(data[index], rowSpanKey);
-    const previousValue = index > 0 ? getRowFieldValue(data[index - 1], rowSpanKey) : void 0;
-    if (index > 0 && currentValue === previousValue) {
-      result.push({ rowSpan: 0, isFirstInGroup: false });
-      continue;
-    }
-    let span = 1;
-    for (let nextIndex = index + 1; nextIndex < data.length; nextIndex++) {
-      if (getRowFieldValue(data[nextIndex], rowSpanKey) === currentValue) {
-        span++;
-      } else {
-        break;
-      }
-    }
-    result.push({ rowSpan: span, isFirstInGroup: true });
-  }
-  return result;
-}
-function buildColumnRowSpanMap(data, columnKeys) {
-  const map = /* @__PURE__ */ new Map();
-  for (const { columnId, rowSpanKey } of columnKeys) {
-    map.set(columnId, computeRowSpans(data, rowSpanKey));
-  }
-  return map;
-}
-function collectRowSpanColumns(columns) {
-  const result = [];
-  const visit = (defs) => {
-    for (const columnDef of defs) {
-      if ("columns" in columnDef && columnDef.columns?.length) {
-        visit(columnDef.columns);
-        continue;
-      }
-      const columnId = columnDef.id ?? ("accessorKey" in columnDef && columnDef.accessorKey ? String(columnDef.accessorKey) : void 0);
-      if (!columnId || !columnDef.meta?.rowSpan) continue;
-      result.push({
-        columnId,
-        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId
-      });
-    }
-  };
-  visit(columns);
-  return result;
+  const selectionContent = selectionLabel?.(selectedCount) ?? null;
+  const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
+  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: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-selection", children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-actions", children: toolbar })
+    ] })
+  ] });
 }
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function DefaultPending({
+  loadingText,
+  className
+}) {
+  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: loadingText }) });
+}
+function DefaultEmpty({
+  emptyText,
+  columnCount
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columnCount, className: "data-table-empty-cell", children: emptyText }) });
+}
 function DataTable({
-  data,
-  columns,
-  rowSelectionMode = "none",
-  rowSelection: controlledRowSelection,
-  onRowSelectionChange,
-  totalCount,
-  filteredCount,
+  isPending = false,
   summary,
   toolbar,
-  selectionLabel,
-  isPending = false,
-  emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
-  enableRowSpan = false,
-  getRowId,
-  onRowClick,
-  getRowClassName,
-  getRowCanSelect,
-  selectOnRowClick = true,
-  onDataChange,
+  filteredCount,
+  totalCount,
   className,
-  preserveRowSelection = false,
-  toggleField,
-  childField,
-  flattenField,
-  expandedRows: controlledExpandedRows,
-  onExpandedRowsChange,
-  preventExpand = false,
-  enableVirtualization = true,
-  estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
-  virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
+  slots,
+  ...glideOptions
 }) {
-  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 shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react6.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."
-      );
-    }
-  }, [enableVirtualization, enableRowSpan]);
-  const rowSelection = resolveRowSelection(
-    rowSelectionMode,
-    controlledRowSelection,
-    internalRowSelection
-  );
-  const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react6.useCallback)(
-    (next) => {
-      if (onExpandedRowsChange) {
-        onExpandedRowsChange(next);
-        return;
-      }
-      setInternalExpandedRows(next);
-    },
-    [onExpandedRowsChange]
-  );
-  const tableData = useConvertTreeData({
-    data,
-    enabled: enableExpand,
-    toggleField,
-    childField,
-    flattenField,
-    expandedRows,
-    onExpandedRowsChange: enableExpand ? handleExpandedRowsChange : void 0,
-    preventExpand
-  });
-  const table = (0, import_react_table2.useReactTable)({
-    data: tableData,
-    columns,
-    state: {
-      rowSelection: rowSelectionMode === "none" ? {} : rowSelection
-    },
-    enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
-    enableMultiRowSelection: rowSelectionMode === "multi",
-    onRowSelectionChange: (updater) => {
-      if (onRowSelectionChange) {
-        onRowSelectionChange(
-          (previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
-        );
-        return;
-      }
-      setInternalRowSelection(
-        (previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
-      );
-    },
-    getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
-    getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
-  });
-  const rowSpanColumnKeys = (0, import_react6.useMemo)(() => {
-    if (!enableRowSpan) return [];
-    return collectRowSpanColumns(columns);
-  }, [enableRowSpan, columns]);
-  const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
-  const columnRowSpanMap = (0, import_react6.useMemo)(
-    () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
-    [tableData, rowSpanColumnKeys]
-  );
-  const selectedRows = table.getSelectedRowModel().rows;
-  const selectedCount = selectedRows.length;
-  const rows = table.getRowModel().rows;
-  const columnCount = table.getAllLeafColumns().length || 1;
-  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: shouldVirtualize ? rows.length : 0,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => estimateRowHeight,
-    overscan: virtualOverscan
-  });
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  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)(() => {
-    if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
-    const keys = /* @__PURE__ */ new Set();
-    for (const selectedRow of selectedRows) {
-      const value = selectedRow.original[primaryRowSpanKey];
-      if (value !== null && value !== void 0) keys.add(String(value));
-    }
-    return keys;
-  }, [enableRowSpan, primaryRowSpanKey, selectedRows]);
   const {
-    dragState,
-    activeSelectionBounds,
-    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)(
-    (rowIndex, colIndex) => {
-      const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
-      if (editingCell && !isSameEditingCell && !commitEdit()) {
-        return;
-      }
-      handleCellMouseDown(rowIndex, colIndex);
-    },
-    [commitEdit, editingCell, handleCellMouseDown]
-  );
-  const clearHover = () => {
-    setHoveredRowIndex(null);
-    setHoveredGroupKey(null);
-  };
-  const handleRowHover = (0, import_react6.useCallback)(
-    (rowIndex, rowData) => {
-      setHoveredRowIndex(rowIndex);
-      if (!primaryRowSpanKey) {
-        setHoveredGroupKey(null);
-        return;
-      }
-      const groupValue = rowData[primaryRowSpanKey];
-      setHoveredGroupKey(
-        groupValue === null || groupValue === void 0 ? null : String(groupValue)
-      );
-    },
-    [primaryRowSpanKey]
-  );
-  const handleToggleSelect = (0, import_react6.useCallback)(
-    (row) => {
-      if (!row.getCanSelect()) return;
-      if (preserveRowSelection && row.getIsSelected()) {
-        return;
-      }
-      row.toggleSelected();
-    },
-    [preserveRowSelection]
-  );
-  const handleToggleExpand = (0, import_react6.useCallback)(
-    (rowKey) => {
-      if (preventExpand) return;
-      handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
-    },
-    [preventExpand, handleExpandedRowsChange, expandedRows]
-  );
-  const rowContextValue = (0, import_react6.useMemo)(() => {
-    return {
-      rowSpan: {
-        enableRowSpan,
-        primaryRowSpanKey,
-        columnRowSpanMap,
-        hoveredRowIndex,
-        hoveredGroupKey,
-        selectedGroupKeys,
-        onRowHover: handleRowHover
-      },
-      selection: {
-        rowSelectionMode,
-        selectOnRowClick,
-        onRowClick,
-        getRowClassName
-      },
-      cellSelection: {
-        activeSelectionBounds,
-        dragState,
-        onCellMouseDown: handleCellMouseDownWithCommit,
-        onCellMouseEnter: handleCellMouseEnter,
-        onFillHandleMouseDown: handleFillHandleMouseDown
-      },
-      cellEdit: {
-        editingCell,
-        draftValue,
-        onDraftValueChange: setDraftValue,
-        onStartEdit: startEdit,
-        onCommitEdit: commitEdit,
-        onCancelEdit: cancelEdit
-      },
-      expand: {
-        enableExpand,
-        toggleField,
-        expandedRows,
-        preventExpand,
-        onToggleExpand: handleToggleExpand
-      }
-    };
-  }, [
-    enableRowSpan,
-    primaryRowSpanKey,
-    columnRowSpanMap,
-    hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
-    handleRowHover,
-    rowSelectionMode,
-    selectOnRowClick,
-    onRowClick,
-    getRowClassName,
-    activeSelectionBounds,
-    dragState,
-    handleCellMouseDownWithCommit,
-    handleCellMouseEnter,
-    handleFillHandleMouseDown,
-    editingCell,
-    draftValue,
-    setDraftValue,
-    startEdit,
-    commitEdit,
-    cancelEdit,
-    enableExpand,
-    toggleField,
-    expandedRows,
-    preventExpand,
-    handleToggleExpand
-  ]);
+    table,
+    tableData,
+    rows,
+    columnCount,
+    selectedCount,
+    emptyText,
+    loadingText,
+    selectionLabel,
+    enableCellSelection,
+    shouldVirtualize,
+    scrollRef,
+    rowVirtualizer,
+    virtualRows,
+    paddingTop,
+    paddingBottom,
+    rowContextValue,
+    handleToggleSelect,
+    clearHover
+  } = useGlideTable(glideOptions);
+  const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
+  const RowSlot = slots?.Row ?? DataTableRow;
+  const PendingSlot = slots?.Pending ?? DefaultPending;
+  const EmptySlot = slots?.Empty ?? DefaultEmpty;
   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.jsx)(PendingSlot, { loadingText, className });
   }
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        "DataTableJSX",
+        !enableCellSelection && "DataTableJSX--no-cell-selection",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ToolbarSlot,
+          {
+            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: enableCellSelection ? (event) => event.preventDefault() : void 0,
+            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_table3.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)(EmptySlot, { emptyText, columnCount }) : 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)(
+                    RowSlot,
+                    {
+                      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)(
+                RowSlot,
                 {
                   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
@@ -1568,7 +1991,7 @@ function TablePagination({
         className: "pagination-button",
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
-        "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
+        "aria-label": "Previous page",
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
@@ -1584,7 +2007,7 @@ function TablePagination({
         className: "pagination-button",
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
-        "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
+        "aria-label": "Next page",
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: "pagination-button-icon" })
       }
     )
@@ -1633,7 +2056,7 @@ function TableRoot({
     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.");
+    console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
   }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "TableJSX", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1685,7 +2108,36 @@ var Table = Object.assign(TableRoot, {
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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,
   DataTable,
   Table,
-  createTable
+  applyCellEdit,
+  applyFillData,
+  applySelectionUpdater,
+  buildColumnRowSpanMap,
+  canExpandRow,
+  collectFillChanges,
+  collectRowSpanColumns,
+  createTable,
+  getCellEditDraftValue,
+  getCellSelectionEdgeStyle,
+  getColumnEditType,
+  getRowIndexInMergedCell,
+  hasCellSelectionEdges,
+  isCellInSelection,
+  isColumnEditable,
+  parseCellEditValue,
+  resolveDataTableLabels,
+  resolveRowSelection,
+  resolveRowSpanAt,
+  toggleExpandedRowId,
+  useCellEdit,
+  useCellSelection,
+  useConvertTreeData,
+  useGlideTable
 });