react-glide-table 1.4.1 → 1.7.0

package/dist/compound.js

@@ -1,6 +1,6 @@
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
@@ -16,6 +16,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;
@@ -103,6 +104,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);
@@ -439,7 +470,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 } : {}
   };
 }
 
@@ -456,6 +487,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
 import { useEffect, useMemo, useRef } from "react";
 
@@ -901,10 +1088,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,
@@ -1096,9 +1289,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__ */ jsxs2(
           "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,
@@ -1108,6 +1306,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,
@@ -1122,7 +1322,8 @@ function DataTableRow({
               event.preventDefault();
               onCellMouseDown(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
-                cellIndex
+                cellIndex,
+                { shiftKey: event.shiftKey }
               );
             },
             onMouseEnter: (event) => {
@@ -1159,6 +1360,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
             ),
@@ -1293,8 +1496,169 @@ function DataTableRow({
   );
 }
 
+// src/components/ui/table/components/DataTable/DataTableSearch.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchCloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx4("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx4("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__ */ jsxs3(
+    "div",
+    {
+      className: cn("data-table-search", classNames?.search),
+      role: "search",
+      onMouseDown: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "data-table-search-row", children: [
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "aria-label": previousLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onPrevious();
+              },
+              children: /* @__PURE__ */ jsx4(ChevronUp, { className: "data-table-search-icon" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "aria-label": nextLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onNext();
+              },
+              children: /* @__PURE__ */ jsx4(ChevronDown, { className: "data-table-search-icon" })
+            }
+          ),
+          canClose ? /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "aria-label": closeLabel,
+              className: cn("data-table-search-button", classNames?.searchButton),
+              onClick: (event) => {
+                event.stopPropagation();
+                onClose();
+              },
+              children: /* @__PURE__ */ jsx4(SearchCloseIcon, { className: "data-table-search-icon" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: cn("data-table-search-status", classNames?.searchStatus),
+            "aria-live": "polite",
+            children: resultString
+          }
+        ),
+        searchStatus !== void 0 ? /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: cn(
+              "data-table-search-progress",
+              classNames?.searchProgress
+            ),
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progress,
+            children: /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "data-table-search-progress-bar",
+                style: { width: `${progress}%` }
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
 // src/components/ui/table/components/DataTable/DataTableToolbar.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function DataTableToolbar({
   filteredCount,
   totalCount,
@@ -1312,24 +1676,56 @@ 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__ */ jsxs3("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
-      hasCount && /* @__PURE__ */ jsx4("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered }),
-        /* @__PURE__ */ jsxs3("span", { className: "toolbar-count-placeholder", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ jsx5("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered }),
+        /* @__PURE__ */ jsxs4("span", { className: "toolbar-count-placeholder", children: [
           " / ",
           totalCount
         ] })
-      ] }) : /* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
+      ] }) : /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx4("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ jsx4("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
+    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx5("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ jsx5("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
 import {
   getCoreRowModel,
@@ -1339,11 +1735,11 @@ import {
   useVirtualizer
 } from "@tanstack/react-virtual";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect5,
-  useMemo as useMemo2,
-  useRef as useRef5,
-  useState as useState3
+  useCallback as useCallback4,
+  useEffect as useEffect6,
+  useMemo as useMemo3,
+  useRef as useRef6,
+  useState as useState4
 } from "react";
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
@@ -1672,26 +2068,44 @@ function useCellSelection({
   data,
   rows,
   enabled = true,
+  columnCount = 0,
   enableSubtreeCopy = false,
   enableInsertPaste = true,
   onDataChange,
   onBatchChange,
-  onRowsPaste
+  onRowsPaste,
+  onCellNavigate
 }) {
   const [dragState, setDragState] = useState2(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = useRef4(null);
+  const dragStateRef = useRef4(dragState);
+  const onCellNavigateRef = useRef4(onCellNavigate);
+  dragStateRef.current = dragState;
+  onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
   const handleCellMouseDown = useCallback2(
-    (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]
@@ -1733,6 +2147,53 @@ function useCellSelection({
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
+  useEffect4(() => {
+    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 = useCallback2(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
@@ -1890,6 +2351,311 @@ function useCellSelection({
   };
 }
 
+// src/components/ui/table/features/inline-search/useInlineSearch.ts
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef5,
+  useState as useState3
+} from "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 = useId();
+  const searchInputRef = useRef5(null);
+  const [internalShowSearch, setInternalShowSearch] = useState3(false);
+  const [internalSearchValue, setInternalSearchValue] = useState3("");
+  const [internalResults, setInternalResults] = useState3(
+    []
+  );
+  const [searchStatus, setSearchStatus] = useState3();
+  const searchStatusRef = useRef5(searchStatus);
+  searchStatusRef.current = searchStatus;
+  const abortControllerRef = useRef5(null);
+  const searchHandleRef = useRef5(void 0);
+  const initialStartRowRef = useRef5(initialStartRow);
+  initialStartRowRef.current = initialStartRow;
+  const getCellValueRef = useRef5(getCellValue);
+  getCellValueRef.current = getCellValue;
+  const showSearch = controlledShowSearch ?? internalShowSearch;
+  const searchValue = controlledSearchValue ?? internalSearchValue;
+  const searchResults = controlledSearchResults ?? internalResults;
+  const setSearchValue = useCallback3(
+    (value) => {
+      setInternalSearchValue(value);
+      onSearchValueChange?.(value);
+    },
+    [onSearchValueChange]
+  );
+  const cancelSearch = useCallback3(() => {
+    if (searchHandleRef.current !== void 0) {
+      window.cancelAnimationFrame(searchHandleRef.current);
+      searchHandleRef.current = void 0;
+    }
+    abortControllerRef.current?.abort();
+  }, []);
+  const emitResultsChanged = useCallback3(
+    (results, navIndex) => {
+      onSearchResultsChanged?.(results, navIndex);
+    },
+    [onSearchResultsChanged]
+  );
+  const navigateToIndex = useCallback3(
+    (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 = useCallback3(
+    (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 = useCallback3(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(true);
+    }
+  }, [controlledShowSearch]);
+  const closeSearch = useCallback3(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(false);
+    }
+    onSearchClose?.();
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    cancelSearch();
+  }, [
+    cancelSearch,
+    controlledShowSearch,
+    emitResultsChanged,
+    onSearchClose
+  ]);
+  const goToNext = useCallback3(() => {
+    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 = useCallback3(() => {
+    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]);
+  useEffect5(() => {
+    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]);
+  useEffect5(() => {
+    if (!enabled) return;
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    if (showSearch) {
+      queueMicrotask(() => {
+        searchInputRef.current?.focus({ preventScroll: true });
+      });
+    } else {
+      cancelSearch();
+    }
+  }, [enabled, showSearch]);
+  useEffect5(() => {
+    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
+  ]);
+  useEffect5(() => {
+    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]);
+  useEffect5(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = useMemo2(
+    () => buildSearchMatchKeys(searchResults),
+    [searchResults]
+  );
+  const activeMatch = useMemo2(() => {
+    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 {};
@@ -1912,7 +2678,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 {
@@ -1923,6 +2694,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,
@@ -1963,9 +2735,16 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
-    enableColumnFreeze = false
+    enableColumnFreeze = false,
+    enableInlineSearch = false,
+    showSearch,
+    searchValue,
+    onSearchValueChange,
+    onSearchClose,
+    searchResults,
+    onSearchResultsChanged
   } = options;
-  const labels = useMemo2(() => {
+  const labels = useMemo3(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -1976,15 +2755,16 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = useState3({});
-  const [internalColumnSizing, setInternalColumnSizing] = useState3({});
-  const [internalExpandedRows, setInternalExpandedRows] = useState3(
+  const [internalRowSelection, setInternalRowSelection] = useState4({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState4({});
+  const [internalExpandedRows, setInternalExpandedRows] = useState4(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = useState3(null);
-  const scrollRef = useRef5(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = useState4(null);
+  const scrollRef = useRef6(null);
+  const rootRef = useRef6(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  useEffect5(() => {
+  useEffect6(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -1998,7 +2778,7 @@ function useGlideTable(options) {
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = useCallback3(
+  const handleExpandedRowsChange = useCallback4(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -2059,13 +2839,13 @@ function useGlideTable(options) {
     getCoreRowModel: getCoreRowModel(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = useMemo2(() => {
+  const rowSpanColumnKeys = useMemo3(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = useMemo2(
+  const columnRowSpanMap = useMemo3(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -2074,7 +2854,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = useMemo2(() => {
+  const columnFreezeOffsets = useMemo3(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -2094,13 +2874,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 = useMemo2(() => {
+  const selectedRowIndices = useMemo3(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
+  const scrollCellIntoView = useCallback4(
+    (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 = useCallback4(
+    (position) => {
+      scrollCellIntoView(position.row, position.col, { align: "nearest" });
+    },
+    [scrollCellIntoView]
+  );
   const {
     dragState,
     activeSelectionBounds,
@@ -2112,11 +2925,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,
@@ -2126,23 +2941,193 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const handleCellMouseDownWithCommit = useCallback3(
-    (rowIndex, colIndex) => {
+  const handleCellMouseDownWithCommit = useCallback4(
+    (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 = useCallback3(() => {
+  const navigateToSearchResult = useCallback4(
+    (item) => {
+      const [colIndex, rowIndex] = item;
+      handleCellMouseDownWithCommit(rowIndex, colIndex);
+      scrollCellIntoView(rowIndex, colIndex, { align: "center" });
+    },
+    [handleCellMouseDownWithCommit, scrollCellIntoView]
+  );
+  const resolveSearchRowId = useCallback4(
+    (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 = useMemo3(() => {
+    if (!enableInlineSearch) return [];
+    if (enableExpand && toggleField) {
+      return buildTreeSearchCorpus(tableData, {
+        toggleField,
+        getRowId: resolveSearchRowId
+      });
+    }
+    return buildFlatSearchCorpus(tableData, resolveSearchRowId);
+  }, [
+    enableExpand,
+    enableInlineSearch,
+    resolveSearchRowId,
+    tableData,
+    toggleField
+  ]);
+  const searchCorpusRef = useRef6(searchCorpus);
+  searchCorpusRef.current = searchCorpus;
+  const visibleRowIndexById = useMemo3(() => {
+    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 = useCallback4(
+    (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 = useRef6(null);
+  const focusSearchResult = useCallback4(
+    (colIndex, visibleRowIndex) => {
+      navigateToSearchResult([colIndex, visibleRowIndex]);
+    },
+    [navigateToSearchResult]
+  );
+  const navigateToCorpusSearchResult = useCallback4(
+    (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
+    ]
+  );
+  useEffect6(() => {
+    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 = useMemo3(() => {
+    if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
+    return mapSearchResultsToVisibleKeys(
+      inlineSearch.searchResults,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.searchResults,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const visibleActiveMatch = useMemo3(() => {
+    if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
+    return mapSearchResultToVisibleItem(
+      inlineSearch.activeMatch,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.activeMatch,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const clearHover = useCallback4(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = useCallback3((rowIndex, _rowData) => {
+  const handleRowHover = useCallback4((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = useCallback3(
+  const handleToggleSelect = useCallback4(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -2152,14 +3137,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = useCallback3(
+  const handleToggleExpand = useCallback4(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = useMemo2(() => {
+  const rowContextValue = useMemo3(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -2207,6 +3192,11 @@ function useGlideTable(options) {
       columnFreeze: {
         enableColumnFreeze,
         offsets: columnFreezeOffsets
+      },
+      inlineSearch: {
+        enabled: enableInlineSearch,
+        matchKeys: visibleSearchMatchKeys,
+        activeMatch: visibleActiveMatch
       }
     };
   }, [
@@ -2242,14 +3232,17 @@ function useGlideTable(options) {
     labels.collapseRow,
     enableColumnResize,
     enableColumnFreeze,
-    columnFreezeOffsets
+    columnFreezeOffsets,
+    enableInlineSearch,
+    visibleSearchMatchKeys,
+    visibleActiveMatch
   ]);
-  const copySelectionRef = useRef5(copySelection);
-  useEffect5(() => {
+  const copySelectionRef = useRef6(copySelection);
+  useEffect6(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = useCallback3((options2) => copySelectionRef.current(options2), []);
-  useEffect5(() => {
+  const stableCopySelection = useCallback4((options2) => copySelectionRef.current(options2), []);
+  useEffect6(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -2265,8 +3258,10 @@ function useGlideTable(options) {
     enableCellSelection,
     enableColumnResize,
     enableColumnFreeze,
+    enableInlineSearch,
     shouldVirtualize,
     scrollRef,
+    rootRef,
     rowVirtualizer,
     virtualRows,
     paddingTop,
@@ -2274,25 +3269,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
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DefaultScroll({
   scrollRef,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+  return /* @__PURE__ */ jsx6("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
 }
 function DefaultPending({
   loadingText,
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -2302,7 +3311,7 @@ function DefaultPending({
         classNames?.pending,
         className
       ),
-      children: /* @__PURE__ */ jsx5("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+      children: /* @__PURE__ */ jsx6("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
     }
   );
 }
@@ -2311,7 +3320,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("tr", { children: /* @__PURE__ */ jsx6(
     "td",
     {
       colSpan: columnCount,
@@ -2344,15 +3353,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;
@@ -2360,12 +3372,13 @@ function DataTable({
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
-  const contextValue = useMemo3(
+  const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
+  const contextValue = useMemo4(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       PendingSlot,
       {
         loadingText,
@@ -2374,19 +3387,21 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "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__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -2398,14 +3413,36 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ jsx5(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs4(
+        enableInlineSearch ? /* @__PURE__ */ jsx6(
+          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__ */ jsx6(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs5(
           "table",
           {
             className: cn("data-table", classNames?.table),
             style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ jsx5("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx6(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -2419,15 +3456,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__ */ jsxs4(
+                    return /* @__PURE__ */ jsxs5(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -2441,7 +3481,7 @@ function DataTable({
                         ),
                         children: [
                           header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()),
-                          canResize ? /* @__PURE__ */ jsx5(
+                          canResize ? /* @__PURE__ */ jsx6(
                             "div",
                             {
                               role: "separator",
@@ -2467,20 +3507,20 @@ function DataTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx5(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx6(
                 "tbody",
                 {
                   onMouseLeave: clearHover,
                   className: cn("data-table-body", classNames?.body),
-                  children: rows.length === 0 ? /* @__PURE__ */ jsx5(
+                  children: rows.length === 0 ? /* @__PURE__ */ jsx6(
                     EmptySlot,
                     {
                       emptyText,
                       columnCount,
                       classNames
                     }
-                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                    paddingTop > 0 && /* @__PURE__ */ jsx5(
+                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ jsx6(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -2488,7 +3528,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx5(
+                        children: /* @__PURE__ */ jsx6(
                           "td",
                           {
                             colSpan: columnCount,
@@ -2504,7 +3544,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ jsx5(
+                      return /* @__PURE__ */ jsx6(
                         RowSlot,
                         {
                           row,
@@ -2515,7 +3555,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ jsx5(
+                    paddingBottom > 0 && /* @__PURE__ */ jsx6(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -2523,7 +3563,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx5(
+                        children: /* @__PURE__ */ jsx6(
                           "td",
                           {
                             colSpan: columnCount,
@@ -2536,7 +3576,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ jsx5(
+                  ] }) : rows.map((row) => /* @__PURE__ */ jsx6(
                     RowSlot,
                     {
                       row,
@@ -2555,10 +3595,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback4, useMemo as useMemo4, useState as useState4 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function SortableHeader({
   label,
   field,
@@ -2567,15 +3607,15 @@ function SortableHeader({
 }) {
   const isActive = sort?.field === field;
   const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
       className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
       onClick: () => onSort(field),
       children: [
-        /* @__PURE__ */ jsx6("span", { children: label }),
-        /* @__PURE__ */ jsx6(Icon, { className: "sortable-header-icon" })
+        /* @__PURE__ */ jsx7("span", { children: label }),
+        /* @__PURE__ */ jsx7(Icon, { className: "sortable-header-icon" })
       ]
     }
   );
@@ -2608,7 +3648,7 @@ function buildColumnDef(props, sort, onSort) {
     ...minWidth != null ? { minSize: minWidth } : {},
     ...maxWidth != null ? { maxSize: maxWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
-    header: sortable ? () => /* @__PURE__ */ jsx6(SortableHeader, { label: children, field, sort, onSort }) : (
+    header: sortable ? () => /* @__PURE__ */ jsx7(SortableHeader, { label: children, field, sort, onSort }) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
     ),
@@ -2633,6 +3673,46 @@ 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
 import { Children, isValidElement as isValidElement2 } from "react";
@@ -2642,6 +3722,7 @@ import { isValidElement } from "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) {
@@ -2658,6 +3739,9 @@ function isTableBodyElement(child) {
 function isTableColumnElement(child) {
   return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
+function isTableColumnGroupElement(child) {
+  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
+}
 function isTablePaginationElement(child) {
   return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
@@ -2684,26 +3768,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
   for (const child of Children.toArray(children)) {
     if (isTableColumnElement(child)) {
-      result.push(child);
+      result.push({
+        type: "leaf",
+        props: child.props
+      });
+      continue;
+    }
+    if (isTableColumnGroupElement(child)) {
+      const groupProps = child.props;
+      result.push({
+        type: "group",
+        props: groupProps,
+        columns: walkColumnTreeNodes(groupProps.children)
+      });
       continue;
     }
     if (isValidElement2(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
@@ -2719,6 +3815,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;
@@ -2756,7 +3859,7 @@ function TableHeader(props) {
 TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/TablePagination.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function TablePagination({
   page,
   pageSize = 10,
@@ -2768,8 +3871,8 @@ function TablePagination({
   const safePage = Math.min(Math.max(1, page), totalPages);
   const canGoPrev = safePage > 1;
   const canGoNext = safePage < totalPages;
-  return /* @__PURE__ */ jsxs6("div", { className: cn("TablePaginationJSX", className), children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7("div", { className: cn("TablePaginationJSX", className), children: [
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -2777,15 +3880,15 @@ function TablePagination({
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ jsx7(ChevronLeft, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
-    /* @__PURE__ */ jsxs6("span", { className: "pagination-label", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "pagination-label", children: [
       safePage,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -2793,7 +3896,7 @@ function TablePagination({
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ jsx7(ChevronRight, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx8(ChevronRight, { className: "pagination-button-icon" })
       }
     )
   ] });
@@ -2801,7 +3904,7 @@ function TablePagination({
 TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/Table.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TableRoot({
   data,
   children,
@@ -2810,12 +3913,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = useMemo4(
+  const { header, pagination: paginationElement } = useMemo5(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = useState4(null);
-  const handleSort = useCallback4((field) => {
+  const [sort, setSort] = useState5(null);
+  const handleSort = useCallback5((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -2826,25 +3929,25 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = useMemo4(() => {
-    return extractColumnElements(header).map(
-      (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
-    );
-  }, [header, sort, handleSort]);
+  const columnTree = useMemo5(() => extractColumnTree(header), [header]);
+  const columns = useMemo5(
+    () => 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 = useMemo4(() => {
+  const tableData = useMemo5(() => {
     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__ */ jsxs7("div", { className: "TableJSX", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className: "TableJSX", children: [
+    /* @__PURE__ */ jsx9(
       DataTable,
       {
         ...dataTableProps,
@@ -2855,7 +3958,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ jsx8(
+    paginationProps && /* @__PURE__ */ jsx9(
       TablePagination,
       {
         page,
@@ -2873,13 +3976,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__ */ jsx8(TableRoot, { ...props });
+      return /* @__PURE__ */ jsx9(TableRoot, { ...props });
     },
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -2888,6 +3997,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });