react-glide-table 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -26,6 +26,8 @@ __export(index_exports, {
   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,
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
   applySelectionUpdater: () => applySelectionUpdater,
@@ -33,6 +35,7 @@ __export(index_exports, {
   canExpandRow: () => canExpandRow,
   collectFillChanges: () => collectFillChanges,
   collectRowSpanColumns: () => collectRowSpanColumns,
+  createTable: () => createTable,
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
   getColumnEditType: () => getColumnEditType,
@@ -79,6 +82,14 @@ 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;
 
@@ -1164,6 +1175,937 @@ function useGlideTable(options) {
     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,
+    onCellMouseEnter,
+    onFillHandleMouseDown
+  } = cellSelection;
+  const {
+    editingCell,
+    draftValue,
+    onDraftValueChange,
+    onStartEdit,
+    onCommitEdit,
+    onCancelEdit
+  } = cellEdit;
+  const {
+    enableExpand,
+    toggleField,
+    expandedRows,
+    preventExpand,
+    onToggleExpand,
+    expandRowLabel,
+    collapseRowLabel
+  } = 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 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_react6.useRef)(null);
+  const isRowEditing = editingCell?.rowIndex === rowIndex;
+  (0, import_react6.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 isMerged = cellRowSpan > 1;
+        const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
+          columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
+          rowIndex
+        ).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 selectionEdgeStyle = getCellSelectionEdgeStyle(
+          rowIndex,
+          cellIndex,
+          activeSelectionBounds,
+          cellRowSpan,
+          isVisuallySelectedAt
+        );
+        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;
+              }
+              if (!enableCellSelection) return;
+              event.preventDefault();
+              onCellMouseDown(
+                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),
+                cellIndex
+              );
+            },
+            onDoubleClick: (event) => {
+              if (!editable) return;
+              event.preventDefault();
+              event.stopPropagation();
+              onStartEdit(rowIndex, cellIndex);
+            },
+            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: [
+              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_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
+                ] }),
+                canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": isExpanded ? collapseRowLabel : expandRowLabel,
+                    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_table2.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 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?.(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({
+  isPending = false,
+  summary,
+  toolbar,
+  filteredCount,
+  totalCount,
+  className,
+  slots,
+  ...glideOptions
+}) {
+  const {
+    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)(PendingSlot, { loadingText, className });
+  }
+  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,
+                  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
+  };
+  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": "Previous page",
+        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": "Next page",
+        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] 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)(
+      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 = {
   CELL_SELECTION_EDGES_CLASS,
@@ -1172,6 +2114,8 @@ function useGlideTable(options) {
   DEFAULT_TREE_ID_FIELD,
   DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD,
+  DataTable,
+  Table,
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
@@ -1179,6 +2123,7 @@ function useGlideTable(options) {
   canExpandRow,
   collectFillChanges,
   collectRowSpanColumns,
+  createTable,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,