react-glide-table 1.4.1 → 1.7.0

package/dist/compound.cjs

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(compound_exports);
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table = require("@tanstack/react-table");
@@ -44,6 +44,7 @@ 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_HEADER_ROW_HEIGHT = 40;
 var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
 var DATA_TABLE_COLUMN_SIZE = 150;
 var DATA_TABLE_COLUMN_MIN_SIZE = 40;
@@ -131,6 +132,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function getCellNavigationDelta(key) {
+  switch (key) {
+    case "ArrowUp":
+    case "w":
+    case "W":
+      return { row: -1, col: 0 };
+    case "ArrowDown":
+    case "s":
+    case "S":
+      return { row: 1, col: 0 };
+    case "ArrowLeft":
+    case "a":
+    case "A":
+      return { row: 0, col: -1 };
+    case "ArrowRight":
+    case "d":
+    case "D":
+      return { row: 0, col: 1 };
+    default:
+      return null;
+  }
+}
+function clampCellPosition(position, rowCount, columnCount) {
+  const maxRow = Math.max(rowCount - 1, 0);
+  const maxCol = Math.max(columnCount - 1, 0);
+  return {
+    row: Math.min(Math.max(position.row, 0), maxRow),
+    col: Math.min(Math.max(position.col, 0), maxCol)
+  };
+}
 function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
   if (rowSpan <= 1) return void 0;
   const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
@@ -467,7 +498,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 
@@ -484,6 +515,162 @@ function getColumnSizeStyle(size, options) {
   };
 }
 
+// src/components/ui/table/features/inline-search/inlineSearch.ts
+var INLINE_SEARCH_MAX_RESULTS = 1e3;
+var INLINE_SEARCH_TARGET_TICK_MS = 10;
+var INLINE_SEARCH_INITIAL_STRIDE = 10;
+function escapeSearchRegex(value) {
+  return value.replace(/([$()*+.?[\\\]^{|}-])/g, "\\$1");
+}
+function createSearchRegex(query) {
+  const trimmed = query.trim();
+  if (!trimmed) return null;
+  return new RegExp(escapeSearchRegex(trimmed), "i");
+}
+function cellValueToSearchText(value) {
+  if (value == null) return void 0;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => cellValueToSearchText(item) ?? "").join(" ");
+  }
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function formatSearchResultLabel(status) {
+  const countLabel = status.results >= INLINE_SEARCH_MAX_RESULTS ? `over ${INLINE_SEARCH_MAX_RESULTS}` : `${status.results} result${status.results !== 1 ? "s" : ""}`;
+  if (status.selectedIndex >= 0 && status.results > 0) {
+    return `${status.selectedIndex + 1} of ${countLabel}`;
+  }
+  return countLabel;
+}
+function nextSearchIndex(selectedIndex, results) {
+  if (results <= 0) return -1;
+  if (selectedIndex < 0) return 0;
+  return (selectedIndex + 1) % results;
+}
+function previousSearchIndex(selectedIndex, results) {
+  if (results <= 0) return -1;
+  if (selectedIndex < 0) return results - 1;
+  let next = (selectedIndex - 1) % results;
+  if (next < 0) next += results;
+  return next;
+}
+function buildSearchMatchKey(colIndex, rowIndex) {
+  return `${colIndex}:${rowIndex}`;
+}
+function buildSearchMatchKeys(results) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const [colIndex, rowIndex] of results) {
+    keys.add(buildSearchMatchKey(colIndex, rowIndex));
+  }
+  return keys;
+}
+function collectSearchMatchesInRange(options) {
+  const {
+    query,
+    startRow,
+    rowCount,
+    columnCount,
+    getCellValue,
+    maxResults = INLINE_SEARCH_MAX_RESULTS
+  } = options;
+  const regex = createSearchRegex(query);
+  if (!regex || rowCount <= 0 || columnCount <= 0) return [];
+  const matches = [];
+  for (let rowOffset = 0; rowOffset < rowCount; rowOffset += 1) {
+    const rowIndex = startRow + rowOffset;
+    for (let colIndex = 0; colIndex < columnCount; colIndex += 1) {
+      const text = cellValueToSearchText(getCellValue(rowIndex, colIndex));
+      if (text !== void 0 && regex.test(text)) {
+        matches.push([colIndex, rowIndex]);
+        if (matches.length >= maxResults) {
+          return matches;
+        }
+      }
+    }
+  }
+  return matches;
+}
+function nextSearchStride(currentStride, elapsedMs, targetMs = INLINE_SEARCH_TARGET_TICK_MS) {
+  const rounded = Math.max(elapsedMs, 1);
+  const scalar = targetMs / rounded;
+  return Math.max(1, Math.ceil(currentStride * scalar));
+}
+function buildFlatSearchCorpus(rows, getRowId) {
+  return rows.map((data, index) => ({
+    id: getRowId(data, index),
+    data,
+    ancestorToggleKeys: []
+  }));
+}
+function buildTreeSearchCorpus(visibleRows, options) {
+  const { toggleField, getRowId } = options;
+  const corpus = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (node, ancestorToggleKeys) => {
+    const id = getRowId(node, corpus.length);
+    if (seen.has(id)) return;
+    seen.add(id);
+    corpus.push({
+      id,
+      data: node,
+      ancestorToggleKeys
+    });
+    const children = node.children;
+    if (!Array.isArray(children) || children.length === 0) return;
+    const toggleValue = node[toggleField];
+    const childAncestors = typeof toggleValue === "string" && toggleValue.length > 0 ? [...ancestorToggleKeys, toggleValue] : ancestorToggleKeys;
+    for (const child of children) {
+      if (child && typeof child === "object") {
+        walk(child, childAncestors);
+      }
+    }
+  };
+  for (const row of visibleRows) {
+    const level = row.level;
+    if (level === 0 || level === void 0) {
+      walk(row, []);
+    }
+  }
+  for (const row of visibleRows) {
+    const id = getRowId(row, corpus.length);
+    if (seen.has(id)) continue;
+    walk(row, []);
+  }
+  return corpus;
+}
+function mapSearchResultsToVisibleKeys(results, corpus, visibleRowIndexById) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const [colIndex, corpusRowIndex] of results) {
+    const corpusRow = corpus[corpusRowIndex];
+    if (!corpusRow) continue;
+    const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
+    if (visibleRowIndex === void 0) continue;
+    keys.add(buildSearchMatchKey(colIndex, visibleRowIndex));
+  }
+  return keys;
+}
+function mapSearchResultToVisibleItem(item, corpus, visibleRowIndexById) {
+  const [colIndex, corpusRowIndex] = item;
+  const corpusRow = corpus[corpusRowIndex];
+  if (!corpusRow) return null;
+  const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
+  if (visibleRowIndex === void 0) return null;
+  return [colIndex, visibleRowIndex];
+}
+function collectAncestorKeysToExpand(corpusRow, expandedRows) {
+  return corpusRow.ancestorToggleKeys.filter((key) => !expandedRows.has(key));
+}
+
 // src/components/ui/table/features/row-expand/row-expand.ts
 var import_react2 = require("react");
 
@@ -929,10 +1116,16 @@ function DataTableRow({
     cellEdit,
     expand,
     columnResize,
-    columnFreeze
+    columnFreeze,
+    inlineSearch
   } = useDataTableRowContext();
   const { enableColumnResize } = columnResize;
   const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
+  const {
+    enabled: enableInlineSearch,
+    matchKeys: searchMatchKeys,
+    activeMatch
+  } = inlineSearch;
   const {
     enableRowSpan,
     primaryRowSpanColumnId,
@@ -1124,9 +1317,14 @@ function DataTableRow({
           ...freezeStyle,
           ...selectionEdgeStyle
         };
+        const searchMatchKey = buildSearchMatchKey(cellIndex, rowIndex);
+        const isSearchMatch = enableInlineSearch && searchMatchKeys.has(searchMatchKey);
+        const isSearchActive = isSearchMatch && activeMatch !== null && activeMatch[0] === cellIndex && activeMatch[1] === rowIndex;
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
           {
+            "data-row-index": rowIndex,
+            "data-col-index": cellIndex,
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
@@ -1136,6 +1334,8 @@ function DataTableRow({
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
             "data-selection-edges": hasSelectionEdges ? "" : void 0,
+            "data-search-match": isSearchMatch ? "" : void 0,
+            "data-search-active": isSearchActive ? "" : void 0,
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-frozen": freezeOffset?.side,
@@ -1150,7 +1350,8 @@ function DataTableRow({
               event.preventDefault();
               onCellMouseDown(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
-                cellIndex
+                cellIndex,
+                { shiftKey: event.shiftKey }
               );
             },
             onMouseEnter: (event) => {
@@ -1187,6 +1388,8 @@ function DataTableRow({
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
               isCellDragSelected && CELL_SELECTION_FILL_CLASS,
               hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
+              isSearchMatch && "is-search-match",
+              isSearchActive && "is-search-active",
               editable && "is-editable",
               classNames?.cell
             ),
@@ -1321,8 +1524,169 @@ function DataTableRow({
   );
 }
 
-// src/components/ui/table/components/DataTable/DataTableToolbar.tsx
+// src/components/ui/table/components/DataTable/DataTableSearch.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function SearchCloseIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      className,
+      "aria-hidden": true,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function DataTableSearch({
+  showSearch,
+  searchValue,
+  searchStatus,
+  searchInputId,
+  searchInputRef,
+  canClose,
+  placeholder,
+  resultHint,
+  previousLabel,
+  nextLabel,
+  closeLabel,
+  rowsTotal,
+  classNames,
+  onSearchValueChange,
+  onClose,
+  onNext,
+  onPrevious
+}) {
+  if (!showSearch) return null;
+  const resultString = searchStatus ? formatSearchResultLabel(searchStatus) : resultHint;
+  const progress = rowsTotal > 0 ? Math.floor((searchStatus?.rowsSearched ?? 0) / rowsTotal * 100) : 0;
+  const handleKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.code === "KeyF" || event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (canClose) {
+        onClose();
+      }
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      onNext();
+      return;
+    }
+    if (event.key === "ArrowUp" || event.key === "Enter" && event.shiftKey) {
+      event.preventDefault();
+      onPrevious();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn("data-table-search", classNames?.search),
+      role: "search",
+      onMouseDown: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "data-table-search-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              ref: searchInputRef,
+              id: searchInputId,
+              type: "search",
+              value: searchValue,
+              placeholder,
+              autoComplete: "off",
+              spellCheck: false,
+              "aria-label": placeholder,
+              className: cn("data-table-search-input", classNames?.searchInput),
+              onChange: (event) => onSearchValueChange(event.target.value),
+              onKeyDown: handleKeyDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": previousLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onPrevious();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronUp, { className: "data-table-search-icon" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": nextLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onNext();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronDown, { className: "data-table-search-icon" })
+            }
+          ),
+          canClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": closeLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onClose();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchCloseIcon, { className: "data-table-search-icon" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: cn("data-table-search-status", classNames?.searchStatus),
+            "aria-live": "polite",
+            children: resultString
+          }
+        ),
+        searchStatus !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: cn(
+              "data-table-search-progress",
+              classNames?.searchProgress
+            ),
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progress,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "data-table-search-progress-bar",
+                style: { width: `${progress}%` }
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/ui/table/components/DataTable/DataTableToolbar.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function DataTableToolbar({
   filteredCount,
   totalCount,
@@ -1340,28 +1704,60 @@ function DataTableToolbar({
   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", classNames?.toolbar, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
-      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "toolbar-count-placeholder", children: [
           " / ",
           totalCount
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
 
+// src/components/ui/table/features/column-groups/mergeHeaderGroups.ts
+function getMergedHeaderGroups(headerGroups) {
+  if (headerGroups.length <= 1) {
+    return headerGroups.map((group) => ({
+      ...group,
+      headers: group.headers.map((header) => ({
+        ...header,
+        mergedRowSpan: 1
+      }))
+    }));
+  }
+  const seenColumnIds = /* @__PURE__ */ new Set();
+  const fullDepth = headerGroups.length;
+  return headerGroups.map((group, depth) => ({
+    ...group,
+    headers: group.headers.filter((header) => !seenColumnIds.has(header.column.id)).map((header) => {
+      seenColumnIds.add(header.column.id);
+      if (header.isPlaceholder) {
+        return {
+          ...header,
+          isPlaceholder: false,
+          mergedRowSpan: fullDepth - depth
+        };
+      }
+      return {
+        ...header,
+        mergedRowSpan: 1
+      };
+    })
+  }));
+}
+
 // src/core/useGlideTable.ts
 var import_react_table2 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 var import_react4 = require("react");
@@ -1689,26 +2085,44 @@ function useCellSelection({
   data,
   rows,
   enabled = true,
+  columnCount = 0,
   enableSubtreeCopy = false,
   enableInsertPaste = true,
   onDataChange,
   onBatchChange,
-  onRowsPaste
+  onRowsPaste,
+  onCellNavigate
 }) {
   const [dragState, setDragState] = (0, import_react5.useState)(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = (0, import_react5.useRef)(null);
+  const dragStateRef = (0, import_react5.useRef)(dragState);
+  const onCellNavigateRef = (0, import_react5.useRef)(onCellNavigate);
+  dragStateRef.current = dragState;
+  onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
   const handleCellMouseDown = (0, import_react5.useCallback)(
-    (rowIndex, colIndex) => {
+    (rowIndex, colIndex, options) => {
       if (!enabled) return;
-      setDragState({
-        isSelecting: true,
-        isFillDragging: false,
-        start: { row: rowIndex, col: colIndex },
-        end: { row: rowIndex, col: colIndex },
-        fillAnchor: null,
-        fillEnd: null
+      setDragState((prev) => {
+        if (options?.shiftKey && prev.start) {
+          return {
+            ...prev,
+            isSelecting: true,
+            isFillDragging: false,
+            end: { row: rowIndex, col: colIndex },
+            fillAnchor: null,
+            fillEnd: null
+          };
+        }
+        return {
+          isSelecting: true,
+          isFillDragging: false,
+          start: { row: rowIndex, col: colIndex },
+          end: { row: rowIndex, col: colIndex },
+          fillAnchor: null,
+          fillEnd: null
+        };
       });
     },
     [enabled]
@@ -1750,6 +2164,53 @@ function useCellSelection({
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
+  (0, import_react5.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      const delta = getCellNavigationDelta(e.key);
+      if (!delta) return;
+      const prev = dragStateRef.current;
+      if (!prev.start || !prev.end) return;
+      if (prev.isSelecting || prev.isFillDragging) return;
+      const rowCount = rows.length;
+      const resolvedColumnCount = columnCount > 0 ? columnCount : rows[0]?.getVisibleCells().length ?? 0;
+      if (rowCount <= 0 || resolvedColumnCount <= 0) return;
+      const nextEnd = clampCellPosition(
+        {
+          row: prev.end.row + delta.row,
+          col: prev.end.col + delta.col
+        },
+        rowCount,
+        resolvedColumnCount
+      );
+      if (nextEnd.row === prev.end.row && nextEnd.col === prev.end.col) return;
+      e.preventDefault();
+      const nextState = e.shiftKey ? {
+        ...prev,
+        isSelecting: false,
+        isFillDragging: false,
+        end: nextEnd,
+        fillAnchor: null,
+        fillEnd: null
+      } : {
+        isSelecting: false,
+        isFillDragging: false,
+        start: nextEnd,
+        end: nextEnd,
+        fillAnchor: null,
+        fillEnd: null
+      };
+      dragStateRef.current = nextState;
+      setDragState(nextState);
+      onCellNavigateRef.current?.(nextEnd);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [columnCount, enabled, rows]);
   const copySelection = (0, import_react5.useCallback)(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
@@ -1907,6 +2368,304 @@ function useCellSelection({
   };
 }
 
+// src/components/ui/table/features/inline-search/useInlineSearch.ts
+var import_react6 = require("react");
+var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
+function useInlineSearch({
+  enabled = false,
+  rowCount,
+  columnCount,
+  getCellValue,
+  initialStartRow = 0,
+  showSearch: controlledShowSearch,
+  searchValue: controlledSearchValue,
+  searchResults: controlledSearchResults,
+  onSearchValueChange,
+  onSearchClose,
+  onSearchResultsChanged,
+  onNavigateToResult,
+  rootRef
+}) {
+  const searchInputId = (0, import_react6.useId)();
+  const searchInputRef = (0, import_react6.useRef)(null);
+  const [internalShowSearch, setInternalShowSearch] = (0, import_react6.useState)(false);
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react6.useState)("");
+  const [internalResults, setInternalResults] = (0, import_react6.useState)(
+    []
+  );
+  const [searchStatus, setSearchStatus] = (0, import_react6.useState)();
+  const searchStatusRef = (0, import_react6.useRef)(searchStatus);
+  searchStatusRef.current = searchStatus;
+  const abortControllerRef = (0, import_react6.useRef)(null);
+  const searchHandleRef = (0, import_react6.useRef)(void 0);
+  const initialStartRowRef = (0, import_react6.useRef)(initialStartRow);
+  initialStartRowRef.current = initialStartRow;
+  const getCellValueRef = (0, import_react6.useRef)(getCellValue);
+  getCellValueRef.current = getCellValue;
+  const showSearch = controlledShowSearch ?? internalShowSearch;
+  const searchValue = controlledSearchValue ?? internalSearchValue;
+  const searchResults = controlledSearchResults ?? internalResults;
+  const setSearchValue = (0, import_react6.useCallback)(
+    (value) => {
+      setInternalSearchValue(value);
+      onSearchValueChange?.(value);
+    },
+    [onSearchValueChange]
+  );
+  const cancelSearch = (0, import_react6.useCallback)(() => {
+    if (searchHandleRef.current !== void 0) {
+      window.cancelAnimationFrame(searchHandleRef.current);
+      searchHandleRef.current = void 0;
+    }
+    abortControllerRef.current?.abort();
+  }, []);
+  const emitResultsChanged = (0, import_react6.useCallback)(
+    (results, navIndex) => {
+      onSearchResultsChanged?.(results, navIndex);
+    },
+    [onSearchResultsChanged]
+  );
+  const navigateToIndex = (0, import_react6.useCallback)(
+    (results, navIndex) => {
+      if (onSearchResultsChanged) return;
+      if (navIndex < 0 || navIndex >= results.length) return;
+      const item = results[navIndex];
+      if (!item) return;
+      onNavigateToResult?.(item);
+    },
+    [onNavigateToResult, onSearchResultsChanged]
+  );
+  const beginSearch = (0, import_react6.useCallback)(
+    (query) => {
+      if (controlledSearchResults !== void 0) return;
+      const totalRows = rowCount;
+      if (totalRows === 0 || columnCount === 0) {
+        setSearchStatus(void 0);
+        setInternalResults([]);
+        emitResultsChanged([], -1);
+        return;
+      }
+      let startY = Math.min(
+        Math.max(0, initialStartRowRef.current),
+        totalRows - 1
+      );
+      let searchStride = Math.min(INLINE_SEARCH_INITIAL_STRIDE, totalRows);
+      let rowsSearched = 0;
+      const runningResult = [];
+      setSearchStatus(void 0);
+      setInternalResults([]);
+      const tick = () => {
+        if (abortControllerRef.current?.signal.aborted) return;
+        const tStart = performance.now();
+        const rowsLeft = totalRows - rowsSearched;
+        const height = Math.min(searchStride, rowsLeft, totalRows - startY);
+        if (height <= 0) {
+          return;
+        }
+        const chunk = collectSearchMatchesInRange({
+          query,
+          startRow: startY,
+          rowCount: height,
+          columnCount,
+          getCellValue: (rowIndex, colIndex) => getCellValueRef.current(rowIndex, colIndex),
+          maxResults: INLINE_SEARCH_MAX_RESULTS - runningResult.length
+        });
+        if (chunk.length > 0) {
+          runningResult.push(...chunk);
+          setInternalResults([...runningResult]);
+        }
+        rowsSearched += height;
+        const selectedIndex = searchStatusRef.current?.selectedIndex ?? -1;
+        setSearchStatus({
+          results: runningResult.length,
+          rowsSearched,
+          selectedIndex
+        });
+        emitResultsChanged(runningResult, selectedIndex);
+        if (startY + height >= totalRows) {
+          startY = 0;
+        } else {
+          startY += height;
+        }
+        searchStride = nextSearchStride(
+          searchStride,
+          performance.now() - tStart
+        );
+        if (rowsSearched < totalRows && runningResult.length < INLINE_SEARCH_MAX_RESULTS) {
+          searchHandleRef.current = window.requestAnimationFrame(tick);
+        }
+      };
+      cancelSearch();
+      abortControllerRef.current = new AbortController();
+      searchHandleRef.current = window.requestAnimationFrame(tick);
+    },
+    [
+      cancelSearch,
+      columnCount,
+      controlledSearchResults,
+      emitResultsChanged,
+      rowCount
+    ]
+  );
+  const openSearch = (0, import_react6.useCallback)(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(true);
+    }
+  }, [controlledShowSearch]);
+  const closeSearch = (0, import_react6.useCallback)(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(false);
+    }
+    onSearchClose?.();
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    cancelSearch();
+  }, [
+    cancelSearch,
+    controlledShowSearch,
+    emitResultsChanged,
+    onSearchClose
+  ]);
+  const goToNext = (0, import_react6.useCallback)(() => {
+    if (!searchStatus || searchStatus.results === 0) return;
+    const newIndex = nextSearchIndex(
+      searchStatus.selectedIndex,
+      searchStatus.results
+    );
+    setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
+    emitResultsChanged(searchResults, newIndex);
+    navigateToIndex(searchResults, newIndex);
+  }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
+  const goToPrevious = (0, import_react6.useCallback)(() => {
+    if (!searchStatus || searchStatus.results === 0) return;
+    const newIndex = previousSearchIndex(
+      searchStatus.selectedIndex,
+      searchStatus.results
+    );
+    setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
+    emitResultsChanged(searchResults, newIndex);
+    navigateToIndex(searchResults, newIndex);
+  }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
+  (0, import_react6.useEffect)(() => {
+    if (controlledSearchResults === void 0) return;
+    if (controlledSearchResults.length > 0) {
+      setSearchStatus((current) => ({
+        rowsSearched: rowCount,
+        results: controlledSearchResults.length,
+        selectedIndex: current?.selectedIndex ?? -1
+      }));
+    } else {
+      setSearchStatus(void 0);
+    }
+  }, [controlledSearchResults, rowCount]);
+  (0, import_react6.useEffect)(() => {
+    if (!enabled) return;
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    if (showSearch) {
+      queueMicrotask(() => {
+        searchInputRef.current?.focus({ preventScroll: true });
+      });
+    } else {
+      cancelSearch();
+    }
+  }, [enabled, showSearch]);
+  (0, import_react6.useEffect)(() => {
+    if (!enabled || !showSearch) return;
+    if (controlledSearchResults !== void 0) return;
+    if (searchValue.trim() === "") {
+      setSearchStatus(void 0);
+      setInternalResults([]);
+      cancelSearch();
+      emitResultsChanged([], -1);
+      return;
+    }
+    beginSearch(searchValue);
+  }, [
+    beginSearch,
+    cancelSearch,
+    controlledSearchResults,
+    emitResultsChanged,
+    enabled,
+    searchValue,
+    showSearch
+  ]);
+  (0, import_react6.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (!(event.ctrlKey || event.metaKey)) return;
+      if (event.key.toLowerCase() !== "f") return;
+      const root = rootRef?.current;
+      if (root) {
+        const active = document.activeElement;
+        const focusInside = active === root || active instanceof Node && root.contains(active);
+        if (!focusInside && active !== document.body) {
+          return;
+        }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (showSearch) {
+        searchInputRef.current?.focus({ preventScroll: true });
+        searchInputRef.current?.select();
+        return;
+      }
+      if (controlledShowSearch === void 0) {
+        setInternalShowSearch(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [controlledShowSearch, enabled, rootRef, showSearch]);
+  (0, import_react6.useEffect)(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = (0, import_react6.useMemo)(
+    () => buildSearchMatchKeys(searchResults),
+    [searchResults]
+  );
+  const activeMatch = (0, import_react6.useMemo)(() => {
+    if (!searchStatus || searchStatus.selectedIndex < 0) return null;
+    return searchResults[searchStatus.selectedIndex] ?? null;
+  }, [searchResults, searchStatus]);
+  if (!enabled) {
+    return {
+      enabled: false,
+      showSearch: false,
+      searchValue: "",
+      searchResults: [],
+      searchStatus: void 0,
+      searchMatchKeys: EMPTY_MATCH_KEYS,
+      activeMatch: null,
+      searchInputRef,
+      searchInputId,
+      canClose: false,
+      openSearch,
+      closeSearch,
+      setSearchValue,
+      goToNext,
+      goToPrevious
+    };
+  }
+  return {
+    enabled: true,
+    showSearch,
+    searchValue,
+    searchResults,
+    searchStatus,
+    searchMatchKeys,
+    activeMatch,
+    searchInputRef,
+    searchInputId,
+    canClose: controlledShowSearch === void 0 || onSearchClose !== void 0,
+    openSearch,
+    closeSearch,
+    setSearchValue,
+    goToNext,
+    goToPrevious
+  };
+}
+
 // src/components/ui/table/features/row-selection/rowSelection.ts
 function resolveRowSelection(mode, controlledSelection, internalSelection) {
   if (mode === "none") return {};
@@ -1929,7 +2688,12 @@ var DEFAULT_DATA_TABLE_LABELS = {
   selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
   expandRow: "Expand row",
   collapseRow: "Collapse row",
-  resizeColumn: "Resize column"
+  resizeColumn: "Resize column",
+  searchPlaceholder: "Search\u2026",
+  searchResultHint: "Type to search",
+  searchPrevious: "Previous result",
+  searchNext: "Next result",
+  searchClose: "Close search"
 };
 function resolveDataTableLabels(partial) {
   return {
@@ -1940,6 +2704,7 @@ function resolveDataTableLabels(partial) {
 
 // src/core/useGlideTable.ts
 var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
+var EMPTY_SEARCH_MATCH_KEYS = /* @__PURE__ */ new Set();
 function useGlideTable(options) {
   const {
     data,
@@ -1980,9 +2745,16 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
-    enableColumnFreeze = false
+    enableColumnFreeze = false,
+    enableInlineSearch = false,
+    showSearch,
+    searchValue,
+    onSearchValueChange,
+    onSearchClose,
+    searchResults,
+    onSearchResultsChanged
   } = options;
-  const labels = (0, import_react6.useMemo)(() => {
+  const labels = (0, import_react7.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -1993,15 +2765,16 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react6.useState)({});
-  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react6.useState)({});
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react6.useState)(
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react7.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react7.useState)({});
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react7.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react6.useState)(null);
-  const scrollRef = (0, import_react6.useRef)(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react7.useState)(null);
+  const scrollRef = (0, import_react7.useRef)(null);
+  const rootRef = (0, import_react7.useRef)(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -2015,7 +2788,7 @@ function useGlideTable(options) {
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react6.useCallback)(
+  const handleExpandedRowsChange = (0, import_react7.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -2076,13 +2849,13 @@ function useGlideTable(options) {
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react6.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react7.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = (0, import_react6.useMemo)(
+  const columnRowSpanMap = (0, import_react7.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -2091,7 +2864,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = (0, import_react6.useMemo)(() => {
+  const columnFreezeOffsets = (0, import_react7.useMemo)(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -2111,13 +2884,46 @@ function useGlideTable(options) {
   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 selectedRowIndices = (0, import_react6.useMemo)(() => {
+  const selectedRowIndices = (0, import_react7.useMemo)(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
+  const scrollCellIntoView = (0, import_react7.useCallback)(
+    (rowIndex, colIndex, options2) => {
+      const align = options2?.align ?? "nearest";
+      const blockAlign = align === "center" ? "center" : "nearest";
+      if (shouldVirtualize) {
+        rowVirtualizer.scrollToIndex(rowIndex, {
+          align: align === "nearest" ? "auto" : align
+        });
+      }
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) return;
+      const scrollToMatchedCell = () => {
+        const cell = scrollElement.querySelector(
+          `[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`
+        );
+        if (cell instanceof HTMLElement) {
+          cell.scrollIntoView({ block: blockAlign, inline: "nearest" });
+        }
+      };
+      if (shouldVirtualize) {
+        requestAnimationFrame(scrollToMatchedCell);
+        return;
+      }
+      scrollToMatchedCell();
+    },
+    [rowVirtualizer, shouldVirtualize]
+  );
+  const handleCellNavigate = (0, import_react7.useCallback)(
+    (position) => {
+      scrollCellIntoView(position.row, position.col, { align: "nearest" });
+    },
+    [scrollCellIntoView]
+  );
   const {
     dragState,
     activeSelectionBounds,
@@ -2129,11 +2935,13 @@ function useGlideTable(options) {
     data: tableData,
     rows,
     enabled: enableCellSelection,
+    columnCount: visibleLeafColumns.length,
     enableSubtreeCopy: resolvedEnableSubtreeCopy,
     enableInsertPaste: enableInsertPaste ?? true,
     onDataChange,
     onBatchChange,
-    onRowsPaste
+    onRowsPaste,
+    onCellNavigate: handleCellNavigate
   });
   const {
     editingCell,
@@ -2143,23 +2951,193 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const handleCellMouseDownWithCommit = (0, import_react6.useCallback)(
-    (rowIndex, colIndex) => {
+  const handleCellMouseDownWithCommit = (0, import_react7.useCallback)(
+    (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
         return;
       }
-      handleCellMouseDown(rowIndex, colIndex);
+      handleCellMouseDown(rowIndex, colIndex, options2);
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const clearHover = (0, import_react6.useCallback)(() => {
+  const navigateToSearchResult = (0, import_react7.useCallback)(
+    (item) => {
+      const [colIndex, rowIndex] = item;
+      handleCellMouseDownWithCommit(rowIndex, colIndex);
+      scrollCellIntoView(rowIndex, colIndex, { align: "center" });
+    },
+    [handleCellMouseDownWithCommit, scrollCellIntoView]
+  );
+  const resolveSearchRowId = (0, import_react7.useCallback)(
+    (row, index) => {
+      if (getRowId) return getRowId(row, index);
+      if (enableExpand) {
+        const record = row;
+        const idValue = record.id;
+        if (idValue != null && String(idValue).length > 0) {
+          return String(idValue);
+        }
+        const uniqueId = record.uniqueId;
+        if (uniqueId != null && String(uniqueId).length > 0) {
+          return String(uniqueId);
+        }
+        if (toggleField) {
+          const toggleValue = record[toggleField];
+          if (toggleValue != null && String(toggleValue).length > 0) {
+            return String(toggleValue);
+          }
+        }
+      }
+      return String(index);
+    },
+    [enableExpand, getRowId, toggleField]
+  );
+  const searchCorpus = (0, import_react7.useMemo)(() => {
+    if (!enableInlineSearch) return [];
+    if (enableExpand && toggleField) {
+      return buildTreeSearchCorpus(tableData, {
+        toggleField,
+        getRowId: resolveSearchRowId
+      });
+    }
+    return buildFlatSearchCorpus(tableData, resolveSearchRowId);
+  }, [
+    enableExpand,
+    enableInlineSearch,
+    resolveSearchRowId,
+    tableData,
+    toggleField
+  ]);
+  const searchCorpusRef = (0, import_react7.useRef)(searchCorpus);
+  searchCorpusRef.current = searchCorpus;
+  const visibleRowIndexById = (0, import_react7.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      map.set(resolveSearchRowId(row.original, row.index), row.index);
+    }
+    return map;
+  }, [resolveSearchRowId, rows]);
+  const getSearchCellValue = (0, import_react7.useCallback)(
+    (rowIndex, colIndex) => {
+      const corpusRow = searchCorpusRef.current[rowIndex];
+      const column = visibleLeafColumns[colIndex];
+      if (!corpusRow || !column) return void 0;
+      const visibleIndex = visibleRowIndexById.get(corpusRow.id);
+      if (visibleIndex !== void 0) {
+        const visibleRow = rows[visibleIndex];
+        if (visibleRow) {
+          return visibleRow.getValue(column.id);
+        }
+      }
+      const columnDef = column.columnDef;
+      if ("accessorFn" in columnDef && typeof columnDef.accessorFn === "function") {
+        return columnDef.accessorFn(corpusRow.data, rowIndex);
+      }
+      if ("accessorKey" in columnDef && columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+        return corpusRow.data[String(columnDef.accessorKey)];
+      }
+      return corpusRow.data[column.id];
+    },
+    [rows, visibleLeafColumns, visibleRowIndexById]
+  );
+  const pendingSearchNavRef = (0, import_react7.useRef)(null);
+  const focusSearchResult = (0, import_react7.useCallback)(
+    (colIndex, visibleRowIndex) => {
+      navigateToSearchResult([colIndex, visibleRowIndex]);
+    },
+    [navigateToSearchResult]
+  );
+  const navigateToCorpusSearchResult = (0, import_react7.useCallback)(
+    (item) => {
+      const [colIndex, corpusRowIndex] = item;
+      const corpusRow = searchCorpusRef.current[corpusRowIndex];
+      if (!corpusRow) return;
+      const missingKeys = collectAncestorKeysToExpand(corpusRow, expandedRows);
+      if (missingKeys.length > 0) {
+        pendingSearchNavRef.current = {
+          colIndex,
+          rowId: corpusRow.id
+        };
+        const next = new Set(expandedRows);
+        for (const key of corpusRow.ancestorToggleKeys) {
+          next.add(key);
+        }
+        handleExpandedRowsChange(next);
+        return;
+      }
+      const visibleItem = mapSearchResultToVisibleItem(
+        item,
+        searchCorpusRef.current,
+        visibleRowIndexById
+      );
+      if (!visibleItem) return;
+      focusSearchResult(visibleItem[0], visibleItem[1]);
+    },
+    [
+      expandedRows,
+      focusSearchResult,
+      handleExpandedRowsChange,
+      visibleRowIndexById
+    ]
+  );
+  (0, import_react7.useEffect)(() => {
+    const pending = pendingSearchNavRef.current;
+    if (!pending) return;
+    const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
+    if (visibleRowIndex === void 0) return;
+    pendingSearchNavRef.current = null;
+    focusSearchResult(pending.colIndex, visibleRowIndex);
+  }, [focusSearchResult, rows, visibleRowIndexById]);
+  const initialSearchStartRow = virtualRows[0]?.index ?? 0;
+  const inlineSearch = useInlineSearch({
+    enabled: enableInlineSearch,
+    rowCount: searchCorpus.length,
+    columnCount: visibleLeafColumns.length,
+    getCellValue: getSearchCellValue,
+    initialStartRow: initialSearchStartRow,
+    showSearch,
+    searchValue,
+    searchResults,
+    onSearchValueChange,
+    onSearchClose,
+    onSearchResultsChanged,
+    onNavigateToResult: navigateToCorpusSearchResult,
+    rootRef
+  });
+  const visibleSearchMatchKeys = (0, import_react7.useMemo)(() => {
+    if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
+    return mapSearchResultsToVisibleKeys(
+      inlineSearch.searchResults,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.searchResults,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const visibleActiveMatch = (0, import_react7.useMemo)(() => {
+    if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
+    return mapSearchResultToVisibleItem(
+      inlineSearch.activeMatch,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.activeMatch,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const clearHover = (0, import_react7.useCallback)(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = (0, import_react6.useCallback)((rowIndex, _rowData) => {
+  const handleRowHover = (0, import_react7.useCallback)((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = (0, import_react6.useCallback)(
+  const handleToggleSelect = (0, import_react7.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -2169,14 +3147,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react6.useCallback)(
+  const handleToggleExpand = (0, import_react7.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react6.useMemo)(() => {
+  const rowContextValue = (0, import_react7.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -2224,6 +3202,11 @@ function useGlideTable(options) {
       columnFreeze: {
         enableColumnFreeze,
         offsets: columnFreezeOffsets
+      },
+      inlineSearch: {
+        enabled: enableInlineSearch,
+        matchKeys: visibleSearchMatchKeys,
+        activeMatch: visibleActiveMatch
       }
     };
   }, [
@@ -2259,14 +3242,17 @@ function useGlideTable(options) {
     labels.collapseRow,
     enableColumnResize,
     enableColumnFreeze,
-    columnFreezeOffsets
+    columnFreezeOffsets,
+    enableInlineSearch,
+    visibleSearchMatchKeys,
+    visibleActiveMatch
   ]);
-  const copySelectionRef = (0, import_react6.useRef)(copySelection);
-  (0, import_react6.useEffect)(() => {
+  const copySelectionRef = (0, import_react7.useRef)(copySelection);
+  (0, import_react7.useEffect)(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = (0, import_react6.useCallback)((options2) => copySelectionRef.current(options2), []);
-  (0, import_react6.useEffect)(() => {
+  const stableCopySelection = (0, import_react7.useCallback)((options2) => copySelectionRef.current(options2), []);
+  (0, import_react7.useEffect)(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -2282,8 +3268,10 @@ function useGlideTable(options) {
     enableCellSelection,
     enableColumnResize,
     enableColumnFreeze,
+    enableInlineSearch,
     shouldVirtualize,
     scrollRef,
+    rootRef,
     rowVirtualizer,
     virtualRows,
     paddingTop,
@@ -2291,25 +3279,39 @@ function useGlideTable(options) {
     rowContextValue,
     handleToggleSelect,
     clearHover,
-    copySelection: stableCopySelection
+    copySelection: stableCopySelection,
+    inlineSearch: {
+      showSearch: inlineSearch.showSearch,
+      searchValue: inlineSearch.searchValue,
+      searchStatus: inlineSearch.searchStatus,
+      searchInputRef: inlineSearch.searchInputRef,
+      searchInputId: inlineSearch.searchInputId,
+      canClose: inlineSearch.canClose,
+      searchRowCount: searchCorpus.length,
+      setSearchValue: inlineSearch.setSearchValue,
+      closeSearch: inlineSearch.closeSearch,
+      goToNext: inlineSearch.goToNext,
+      goToPrevious: inlineSearch.goToPrevious,
+      openSearch: inlineSearch.openSearch
+    }
   };
 }
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function DefaultScroll({
   scrollRef,
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
 }
 function DefaultPending({
   loadingText,
   className,
   classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: cn(
@@ -2319,7 +3321,7 @@ function DefaultPending({
         classNames?.pending,
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
     }
   );
 }
@@ -2328,7 +3330,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "td",
     {
       colSpan: columnCount,
@@ -2361,15 +3363,18 @@ function DataTable({
     enableCellSelection,
     enableColumnResize,
     enableColumnFreeze,
+    enableInlineSearch,
     shouldVirtualize,
     scrollRef,
+    rootRef,
     rowVirtualizer,
     virtualRows,
     paddingTop,
     paddingBottom,
     rowContextValue,
     handleToggleSelect,
-    clearHover
+    clearHover,
+    inlineSearch
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
   const ScrollSlot = slots?.Scroll ?? DefaultScroll;
@@ -2377,12 +3382,13 @@ function DataTable({
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
-  const contextValue = (0, import_react7.useMemo)(
+  const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
+  const contextValue = (0, import_react8.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       PendingSlot,
       {
         loadingText,
@@ -2391,19 +3397,21 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
+      ref: rootRef,
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
         enableColumnResize && "DataTableJSX--column-resize",
         enableColumnFreeze && "DataTableJSX--column-freeze",
+        enableInlineSearch && "DataTableJSX--inline-search",
         classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -2415,14 +3423,36 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          DataTableSearch,
+          {
+            showSearch: inlineSearch.showSearch,
+            searchValue: inlineSearch.searchValue,
+            searchStatus: inlineSearch.searchStatus,
+            searchInputId: inlineSearch.searchInputId,
+            searchInputRef: inlineSearch.searchInputRef,
+            canClose: inlineSearch.canClose,
+            placeholder: labels.searchPlaceholder,
+            resultHint: labels.searchResultHint,
+            previousLabel: labels.searchPrevious,
+            nextLabel: labels.searchNext,
+            closeLabel: labels.searchClose,
+            rowsTotal: inlineSearch.searchRowCount,
+            classNames,
+            onSearchValueChange: inlineSearch.setSearchValue,
+            onClose: inlineSearch.closeSearch,
+            onNext: inlineSearch.goToNext,
+            onPrevious: inlineSearch.goToPrevious
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "table",
           {
             className: cn("data-table", classNames?.table),
             style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -2436,15 +3466,18 @@ function DataTable({
                     });
                     const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
                       ...freezeStyle
                     };
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -2458,7 +3491,7 @@ function DataTable({
                         ),
                         children: [
                           header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
-                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                             "div",
                             {
                               role: "separator",
@@ -2484,20 +3517,20 @@ function DataTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "tbody",
                 {
                   onMouseLeave: clearHover,
                   className: cn("data-table-body", classNames?.body),
-                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     EmptySlot,
                     {
                       emptyText,
                       columnCount,
                       classNames
                     }
-                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -2505,7 +3538,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                           "td",
                           {
                             colSpan: columnCount,
@@ -2521,7 +3554,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         RowSlot,
                         {
                           row,
@@ -2532,7 +3565,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -2540,7 +3573,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                           "td",
                           {
                             colSpan: columnCount,
@@ -2553,7 +3586,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     RowSlot,
                     {
                       row,
@@ -2572,10 +3605,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SortableHeader({
   label,
   field,
@@ -2584,15 +3617,15 @@ function SortableHeader({
 }) {
   const isActive = sort?.field === field;
   const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "sortable-header-icon" })
       ]
     }
   );
@@ -2625,7 +3658,7 @@ function buildColumnDef(props, sort, onSort) {
     ...minWidth != null ? { minSize: minWidth } : {},
     ...maxWidth != null ? { maxSize: maxWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
-    header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
+    header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
     ),
@@ -2650,15 +3683,56 @@ function buildColumnDef(props, sort, onSort) {
     }
   };
 }
+function resolveGroupId(props, index) {
+  if (props.id) return props.id;
+  if (typeof props.header === "string" || typeof props.header === "number") {
+    return `group:${props.header}:${index}`;
+  }
+  return `group:${index}`;
+}
+function buildColumnDefsFromTree(nodes, sort, onSort) {
+  return nodes.map((node, index) => {
+    if (node.type === "leaf") {
+      return buildColumnDef(node.props, sort, onSort);
+    }
+    const childDefs = buildColumnDefsFromTree(node.columns, sort, onSort);
+    const { header, align, headerClassName } = node.props;
+    return {
+      id: resolveGroupId(node.props, index),
+      header: (
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
+        () => header
+      ),
+      columns: childDefs,
+      enableResizing: false,
+      meta: {
+        align,
+        headerClassName
+      }
+    };
+  });
+}
+function countLeafColumns(nodes) {
+  let count = 0;
+  for (const node of nodes) {
+    if (node.type === "leaf") {
+      count += 1;
+    } else {
+      count += countLeafColumns(node.columns);
+    }
+  }
+  return count;
+}
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react8 = require("react");
+var import_react9 = 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_COLUMN_GROUP_DISPLAY_NAME = "Table.ColumnGroup";
 var TABLE_PAGINATION_DISPLAY_NAME = "Table.Pagination";
 function getComponentDisplayName(type) {
   if (typeof type === "function" || typeof type === "object" && type !== null) {
@@ -2667,16 +3741,19 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+}
+function isTableColumnGroupElement(child) {
+  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -2686,7 +3763,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react9.Children.toArray(children)) {
+  for (const child of import_react10.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -2701,26 +3778,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
-  for (const child of import_react9.Children.toArray(children)) {
+  for (const child of import_react10.Children.toArray(children)) {
     if (isTableColumnElement(child)) {
-      result.push(child);
+      result.push({
+        type: "leaf",
+        props: child.props
+      });
       continue;
     }
-    if ((0, import_react9.isValidElement)(child)) {
+    if (isTableColumnGroupElement(child)) {
+      const groupProps = child.props;
+      result.push({
+        type: "group",
+        props: groupProps,
+        columns: walkColumnTreeNodes(groupProps.children)
+      });
+      continue;
+    }
+    if ((0, import_react10.isValidElement)(child)) {
       const nested = child.props.children;
       if (nested != null) {
-        result.push(...flattenColumnElements(nested));
+        result.push(...walkColumnTreeNodes(nested));
       }
     }
   }
   return result;
 }
-function extractColumnElements(header) {
+function extractColumnTree(header) {
   if (!header) return [];
   const { children } = header.props;
-  return flattenColumnElements(children);
+  return walkColumnTreeNodes(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -2736,6 +3825,13 @@ function TableColumn(props) {
 }
 TableColumn.displayName = TABLE_COLUMN_DISPLAY_NAME;
 
+// src/components/ui/table/components/Table/TableColumnGroup.tsx
+function TableColumnGroup(props) {
+  void props;
+  return null;
+}
+TableColumnGroup.displayName = TABLE_COLUMN_GROUP_DISPLAY_NAME;
+
 // src/components/ui/table/components/Table/tableDataPipeline.ts
 function sortTableData(data, sort) {
   if (!sort) return data;
@@ -2773,7 +3869,7 @@ function TableHeader(props) {
 TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/TablePagination.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function TablePagination({
   page,
   pageSize = 10,
@@ -2785,8 +3881,8 @@ function TablePagination({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -2794,15 +3890,15 @@ function TablePagination({
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "pagination-label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "pagination-label", children: [
       safePage,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -2810,7 +3906,7 @@ function TablePagination({
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "pagination-button-icon" })
       }
     )
   ] });
@@ -2818,7 +3914,7 @@ function TablePagination({
 TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TableRoot({
   data,
   children,
@@ -2827,12 +3923,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react10.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react11.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react10.useState)(null);
-  const handleSort = (0, import_react10.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react11.useState)(null);
+  const handleSort = (0, import_react11.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -2843,25 +3939,25 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = (0, import_react10.useMemo)(() => {
-    return extractColumnElements(header).map(
-      (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
-    );
-  }, [header, sort, handleSort]);
+  const columnTree = (0, import_react11.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react11.useMemo)(
+    () => buildColumnDefsFromTree(columnTree, sort, handleSort),
+    [columnTree, 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_react10.useMemo)(() => {
+  const tableData = (0, import_react11.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);
   }, [data, sort, paginationProps, page, pageSize]);
-  if (columns.length === 0) {
+  if (countLeafColumns(columnTree) === 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       DataTable,
       {
         ...dataTableProps,
@@ -2872,7 +3968,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    paginationProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       TablePagination,
       {
         page,
@@ -2890,13 +3986,19 @@ function createTable() {
     return null;
   }
   Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
+  function ColumnGroup(props) {
+    void props;
+    return null;
+  }
+  ColumnGroup.displayName = TABLE_COLUMN_GROUP_DISPLAY_NAME;
   return Object.assign(
     function BoundTable(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableRoot, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRoot, { ...props });
     },
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -2905,6 +4007,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });