bolt-table 0.1.23 → 0.1.24

package/dist/index.mjs

@@ -1,10 +1,10 @@
 // src/BoltTable.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
 import React4, {
-  useCallback,
+  useCallback as useCallback2,
   useMemo as useMemo2,
   useRef as useRef4,
-  useState as useState2
+  useState as useState3
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -80,6 +80,10 @@ var CopyIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBas
   /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
   /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 ] });
+var PencilIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+] });
 var EyeOffIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
   /* @__PURE__ */ jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
   /* @__PURE__ */ jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
@@ -117,7 +121,10 @@ var DraggableHeader = React.memo(
     customContextMenuItems,
     icons,
     onColumnDragStart,
-    disabledFilters
+    disabledFilters,
+    headerGridRow = 1,
+    headerHeight = 36,
+    stickyTop = 0
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -191,23 +198,23 @@ var DraggableHeader = React.memo(
     const zIndex = isPinned ? 12 : 10;
     const headerStyle = {
       position: "sticky",
-      top: 0,
+      top: stickyTop,
       zIndex,
       width: isLastColumn ? "100%" : widthPx,
       minWidth: widthPx,
       ...isLastColumn ? {} : { maxWidth: widthPx },
       gridColumn: visualIndex + 1,
-      gridRow: 1,
+      gridRow: headerGridRow,
       display: "flex",
-      height: 36,
+      height: headerHeight,
       alignItems: "center",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       borderTop: "none",
-      borderRight: "none",
+      borderRight: "0.5px solid rgba(128,128,128,0.2)",
       borderBottom: "1px solid rgba(128,128,128,0.2)",
-      borderLeft: "none",
+      borderLeft: "0.5px solid rgba(128,128,128,0.2)",
       ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
       ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
       ...column.style,
@@ -601,7 +608,7 @@ var DraggableHeader = React.memo(
     ] });
   },
   (prevProps, nextProps) => {
-    return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters;
+    return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop;
   }
 );
 DraggableHeader.displayName = "DraggableHeader";
@@ -744,9 +751,64 @@ ResizeOverlay.displayName = "ResizeOverlay";
 var ResizeOverlay_default = ResizeOverlay;
 
 // src/TableBody.tsx
-import React3, { useEffect as useEffect2, useMemo, useRef as useRef3 } from "react";
+import React3, { useCallback, useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState2 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SHIMMER_WIDTHS = [55, 70, 45, 80, 60, 50, 75, 65];
+var EditableCell = ({
+  value,
+  record,
+  column,
+  rowIndex,
+  onEdit,
+  onEditComplete
+}) => {
+  const [draft, setDraft] = useState2(String(value ?? ""));
+  const inputRef = useRef3(null);
+  useEffect2(() => {
+    setDraft(String(value ?? ""));
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, [value]);
+  const commit = useCallback(() => {
+    const raw = String(value ?? "");
+    if (draft !== raw && column.dataIndex) {
+      const coerced = typeof value === "number" && !Number.isNaN(Number(draft)) ? Number(draft) : draft;
+      onEdit(coerced, record, column.dataIndex, rowIndex);
+    }
+    onEditComplete();
+  }, [draft, value, column.dataIndex, record, rowIndex, onEdit, onEditComplete]);
+  const cancel = useCallback(() => {
+    onEditComplete();
+  }, [onEditComplete]);
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref: inputRef,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") cancel();
+      },
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        outline: "none",
+        background: "transparent",
+        font: "inherit",
+        color: "inherit",
+        padding: 0,
+        margin: 0,
+        boxSizing: "border-box"
+      }
+    }
+  );
+};
+EditableCell.displayName = "EditableCell";
 var Cell = React3.memo(
   ({
     value,
@@ -762,7 +824,10 @@ var Cell = React3.memo(
     getRowKey,
     getRawRowKey,
     accentColor,
-    isLoading
+    isLoading,
+    onEdit,
+    isEditing,
+    onEditComplete
   }) => {
     const isPinned = Boolean(column.pinned);
     if (isLoading && column.key !== "__select__" && column.key !== "__expand__") {
@@ -841,7 +906,7 @@ var Cell = React3.memo(
               type: "multiple"
             });
           },
-          style: { cursor: "pointer", accentColor }
+          style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
         }
       );
       return /* @__PURE__ */ jsx4(
@@ -866,8 +931,22 @@ var Cell = React3.memo(
         }
       );
     }
+    const isEditable = !!column.editable && !column.render && !!onEdit;
+    const showEditor = isEditable && isEditing && onEditComplete;
     let content;
-    if (column.render) {
+    if (showEditor) {
+      content = /* @__PURE__ */ jsx4(
+        EditableCell,
+        {
+          value,
+          record,
+          column,
+          rowIndex,
+          onEdit,
+          onEditComplete
+        }
+      );
+    } else if (column.render) {
       try {
         content = column.render(value, record, rowIndex);
       } catch {
@@ -896,7 +975,7 @@ var Cell = React3.memo(
           ...isPinned ? styles?.pinnedCell : void 0,
           ...styles?.cell
         },
-        children: isSystem ? content : /* @__PURE__ */ jsx4(
+        children: isSystem ? content : showEditor ? content : /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -917,6 +996,10 @@ var Cell = React3.memo(
     if (prev.column.pinned !== next.column.pinned) return false;
     if (prev.classNames !== next.classNames) return false;
     if (prev.styles !== next.styles) return false;
+    if (prev.column.editable !== next.column.editable) return false;
+    if (prev.onEdit !== next.onEdit) return false;
+    if (prev.isEditing !== next.isEditing) return false;
+    if (prev.onEditComplete !== next.onEditComplete) return false;
     if (prev.column.key === "__select__") {
       return prev.isSelected === next.isSelected && prev.normalizedSelectedKeys === next.normalizedSelectedKeys;
     }
@@ -984,7 +1067,11 @@ var TableBody = ({
   gridTemplateColumns,
   headerHeight = 36,
   rowClassName,
-  rowStyle
+  rowStyle,
+  bodyGridRow = 2,
+  onEdit,
+  editingCell,
+  onEditComplete
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1006,7 +1093,7 @@ var TableBody = ({
       else if (isPinned) zIndex = 2;
       const style = {
         gridColumn: colIndex + 1,
-        gridRow: 2,
+        gridRow: bodyGridRow,
         height: `${totalSize}px`,
         position: isPinned ? "sticky" : "relative",
         zIndex
@@ -1020,7 +1107,7 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [safeColumns, columnOffsets, totalSize, styles]);
+  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow]);
   if (safeData.length === 0 || safeColumns.length === 0) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     columnStyles.map((colStyle, colIndex) => {
@@ -1038,7 +1125,7 @@ var TableBody = ({
             const rowKey = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
             const isSelected = selectedKeySet.has(rowKey);
             const isExpanded = resolvedExpandedKeys?.has(rowKey) ?? false;
-            const cellValue = row[col.dataIndex];
+            const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             let recordFingerprint;
             if (hasRender && !isRowShimmer) {
@@ -1100,7 +1187,10 @@ var TableBody = ({
                         getRawRowKey,
                         accentColor,
                         isLoading: isRowShimmer,
-                        recordFingerprint
+                        recordFingerprint,
+                        onEdit,
+                        isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
+                        onEditComplete
                       }
                     )
                   }
@@ -1118,7 +1208,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 15,
@@ -1182,7 +1272,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1224,7 +1314,7 @@ var TableBody = ({
                     ...rowSty
                   },
                   children: safeColumns.map((col) => {
-                    const cellValue = row[col.dataIndex];
+                    const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
                     let zIndex = 0;
@@ -1282,7 +1372,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1304,7 +1397,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1349,7 +1442,7 @@ var TableBody = ({
                     ...rowSty
                   },
                   children: safeColumns.map((col) => {
-                    const cellValue = row[col.dataIndex];
+                    const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
                     let zIndex = 0;
@@ -1407,7 +1500,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1437,6 +1533,18 @@ function arrayMove(arr, from, to) {
   result.splice(to, 0, item);
   return result;
 }
+function flattenColumns(columns) {
+  const result = [];
+  for (const col of columns) {
+    if (col == null) continue;
+    if (col.children && col.children.length > 0) {
+      result.push(...flattenColumns(col.children));
+    } else {
+      result.push(col);
+    }
+  }
+  return result;
+}
 var SHIMMER_WIDTHS2 = [55, 70, 45, 80, 60, 50, 75, 65, 40, 72];
 var EMPTY_CLASSNAMES = {};
 var EMPTY_STYLES = {};
@@ -1479,7 +1587,8 @@ function BoltTable({
   rowStyle,
   disabledFilters,
   onCopy,
-  keepPinnedRowsAcrossPages
+  keepPinnedRowsAcrossPages,
+  onEdit
 }) {
   const data = useMemo2(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1488,17 +1597,49 @@ function BoltTable({
   }, [rawData]);
   const initialColumns = useMemo2(() => {
     if (!Array.isArray(rawInitialColumns)) return STABLE_EMPTY_COLS;
-    const filtered = rawInitialColumns.filter(
+    const safe = rawInitialColumns.filter(
       (col) => col != null && typeof col.key === "string"
     );
-    return filtered.length > 0 ? filtered : STABLE_EMPTY_COLS;
+    const flattened = flattenColumns(safe);
+    const validated = flattened.filter(
+      (col) => col != null && typeof col.key === "string"
+    );
+    return validated.length > 0 ? validated : STABLE_EMPTY_COLS;
+  }, [rawInitialColumns]);
+  const headerGroups = useMemo2(() => {
+    if (!Array.isArray(rawInitialColumns)) return [];
+    const groups = [];
+    for (const col of rawInitialColumns) {
+      if (col != null && typeof col.key === "string" && col.children && col.children.length > 0) {
+        const leafKeys = flattenColumns([col]).filter((c) => c != null && typeof c.key === "string").map((c) => c.key);
+        if (leafKeys.length > 0) {
+          groups.push({
+            key: col.key,
+            title: col.title,
+            childKeys: leafKeys,
+            style: col.style,
+            className: col.className
+          });
+        }
+      }
+    }
+    return groups;
   }, [rawInitialColumns]);
-  const [columns, setColumns] = useState2(initialColumns);
-  const [columnOrder, setColumnOrder] = useState2(
+  const hasColumnGroups = headerGroups.length > 0;
+  const groupedColumnKeySet = useMemo2(() => {
+    if (!hasColumnGroups) return null;
+    const keys = /* @__PURE__ */ new Set();
+    for (const g of headerGroups) {
+      for (const k of g.childKeys) keys.add(k);
+    }
+    return keys;
+  }, [headerGroups, hasColumnGroups]);
+  const [columns, setColumns] = useState3(initialColumns);
+  const [columnOrder, setColumnOrder] = useState3(
     () => initialColumns.map((c) => c.key)
   );
-  const [activeId, setActiveId] = useState2(null);
-  const [mounted, setMounted] = useState2(false);
+  const [activeId, setActiveId] = useState3(null);
+  const [mounted, setMounted] = useState3(false);
   React4.useEffect(() => {
     setMounted(true);
   }, []);
@@ -1516,7 +1657,7 @@ function BoltTable({
     setColumnOrder(initialColumnsRef.current.map((c) => c.key));
   }, [newFingerprint]);
   const safeWidth = (w, fallback = 150) => typeof w === "number" && Number.isFinite(w) ? w : fallback;
-  const [columnWidths, setColumnWidths] = useState2(
+  const [columnWidths, setColumnWidths] = useState3(
     () => /* @__PURE__ */ new Map()
   );
   const manuallyResizedRef = useRef4(/* @__PURE__ */ new Set());
@@ -1527,7 +1668,7 @@ function BoltTable({
     })),
     [columns, columnWidths]
   );
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState2(() => {
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState3(() => {
     if (expandable?.defaultExpandAllRows && data.length > 0) {
       return new Set(
         data.map((row, idx) => {
@@ -1553,7 +1694,7 @@ function BoltTable({
   }, [expandedKeysFingerprint, internalExpandedKeys]);
   const expandableRef = useRef4(expandable);
   expandableRef.current = expandable;
-  const toggleExpand = useCallback((key) => {
+  const toggleExpand = useCallback2((key) => {
     const exp = expandableRef.current;
     if (exp?.expandedRowKeys !== void 0) {
       const next = new Set(exp.expandedRowKeys);
@@ -1568,7 +1709,7 @@ function BoltTable({
       });
     }
   }, []);
-  const getRowKey = useCallback(
+  const getRowKey = useCallback2(
     (record, index) => {
       if (record == null) return String(index);
       try {
@@ -1584,7 +1725,7 @@ function BoltTable({
     },
     [rowKey]
   );
-  const getRawRowKey = useCallback(
+  const getRawRowKey = useCallback2(
     (record, index) => {
       if (record == null) return index;
       try {
@@ -1683,11 +1824,11 @@ function BoltTable({
   }, [rowSelection, columnsWithExpand]);
   const resizeOverlayRef = useRef4(null);
   const tableAreaRef = useRef4(null);
-  const [scrollAreaWidth, setScrollAreaWidth] = useState2(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState3(0);
   const prevScrollAreaWidthRef = useRef4(0);
   const roRef = useRef4(null);
   const rafRef = useRef4(null);
-  const tableAreaCallbackRef = useCallback((el) => {
+  const tableAreaCallbackRef = useCallback2((el) => {
     roRef.current?.disconnect();
     roRef.current = null;
     if (rafRef.current !== null) {
@@ -1745,12 +1886,23 @@ function BoltTable({
     };
   }, []);
   const resizeStateRef = useRef4(null);
+  const columnGroupMapRef = useRef4(/* @__PURE__ */ new Map());
+  useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const g of headerGroups) {
+      for (const k of g.childKeys) map.set(k, g.key);
+    }
+    for (const col of initialColumns) {
+      if (!map.has(col.key)) map.set(col.key, null);
+    }
+    columnGroupMapRef.current = map;
+  }, [headerGroups, initialColumns]);
   const overIdRef = useRef4(null);
   const dragActiveIdRef = useRef4(null);
   const ghostRef = useRef4(null);
   const onColumnOrderChangeRef = useRef4(onColumnOrderChange);
   onColumnOrderChangeRef.current = onColumnOrderChange;
-  const handleColumnDragStart = useCallback(
+  const handleColumnDragStart = useCallback2(
     (columnKey, e) => {
       if (columnKey === "__select__" || columnKey === "__expand__") return;
       const headerEl = e.currentTarget.closest(
@@ -1773,6 +1925,7 @@ function BoltTable({
       const grabStyle = document.createElement("style");
       grabStyle.textContent = "* { cursor: grabbing !important; }";
       document.head.appendChild(grabStyle);
+      const draggedGroup = columnGroupMapRef.current.get(columnKey);
       const onMove = (ev) => {
         if (ghost) {
           ghost.style.left = `${ev.clientX - offsetX}px`;
@@ -1788,6 +1941,11 @@ function BoltTable({
             h.removeAttribute("data-drag-over");
             return;
           }
+          const targetGroup = columnGroupMapRef.current.get(key);
+          if (draggedGroup !== targetGroup) {
+            h.removeAttribute("data-drag-over");
+            return;
+          }
           const r = h.getBoundingClientRect();
           if (ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top - 20 && ev.clientY <= r.bottom + 20) {
             newOverId = key;
@@ -1810,7 +1968,7 @@ function BoltTable({
         if (ghost) ghost.style.display = "none";
         const currentOverId = overIdRef.current;
         const currentActiveId = dragActiveIdRef.current;
-        if (currentOverId && currentActiveId && currentOverId !== currentActiveId) {
+        if (currentOverId && currentActiveId && currentOverId !== currentActiveId && columnGroupMapRef.current.get(currentActiveId) === columnGroupMapRef.current.get(currentOverId)) {
           React4.startTransition(() => {
             setColumnOrder((items) => {
               const oldIndex = items.indexOf(currentActiveId);
@@ -1977,9 +2135,9 @@ function BoltTable({
     const column = columns.find((col) => col.key === columnKey);
     if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
   };
-  const [internalRowPinning, setInternalRowPinning] = useState2({ top: [], bottom: [] });
+  const [internalRowPinning, setInternalRowPinning] = useState3({ top: [], bottom: [] });
   const resolvedRowPinning = rowPinning === true ? internalRowPinning : rowPinning && typeof rowPinning === "object" ? rowPinning : void 0;
-  const handleRowPin = useCallback((rk, pinned) => {
+  const handleRowPin = useCallback2((rk, pinned) => {
     if (onRowPin) {
       onRowPin(rk, pinned);
       return;
@@ -1997,8 +2155,8 @@ function BoltTable({
   }, [onRowPin, rowPinning]);
   const onSortChangeRef = useRef4(onSortChange);
   onSortChangeRef.current = onSortChange;
-  const [sortState, setSortState] = useState2({ key: "", direction: null });
-  const handleSort = useCallback(
+  const [sortState, setSortState] = useState3({ key: "", direction: null });
+  const handleSort = useCallback2(
     (columnKey, direction) => {
       setSortState((prev) => {
         let next;
@@ -2014,10 +2172,10 @@ function BoltTable({
     },
     []
   );
-  const [columnFilters, setColumnFilters] = useState2(
+  const [columnFilters, setColumnFilters] = useState3(
     {}
   );
-  const handleColumnFilter = useCallback(
+  const handleColumnFilter = useCallback2(
     (columnKey, value) => {
       setColumnFilters((prev) => {
         const next = { ...prev };
@@ -2029,7 +2187,7 @@ function BoltTable({
     },
     [onFilterChange]
   );
-  const handleClearFilter = useCallback(
+  const handleClearFilter = useCallback2(
     (columnKey) => {
       handleColumnFilter(columnKey, "");
     },
@@ -2050,7 +2208,7 @@ function BoltTable({
             try {
               const col = columnsLookupRef.current.find((c) => c.key === key);
               if (typeof col?.filterFn === "function") {
-                return col.filterFn(columnFilters[key], row, col.dataIndex);
+                return col.filterFn(columnFilters[key], row, col.dataIndex ?? key);
               }
               const cellVal = String(row[key] ?? "").toLowerCase();
               return cellVal.includes(columnFilters[key].toLowerCase());
@@ -2156,13 +2314,17 @@ function BoltTable({
     () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
     [resolvedRowPinning?.bottom]
   );
-  const [cellContextMenu, setCellContextMenu] = useState2(null);
+  const [editingCell, setEditingCell] = useState3(null);
+  const handleEditComplete = useCallback2(() => {
+    setEditingCell(null);
+  }, []);
+  const [cellContextMenu, setCellContextMenu] = useState3(null);
   const cellMenuRef = useRef4(null);
   const cellLongPressTimer = useRef4(
     null
   );
   const cellTouchStart = useRef4(null);
-  const cancelCellLongPress = useCallback(() => {
+  const cancelCellLongPress = useCallback2(() => {
     if (cellLongPressTimer.current) {
       clearTimeout(cellLongPressTimer.current);
       cellLongPressTimer.current = null;
@@ -2192,8 +2354,8 @@ function BoltTable({
     tableAreaRef.current?.scrollTo({ top: 0 });
   }, [columnFiltersKey]);
   const DEFAULT_PAGE_SIZE = 15;
-  const [internalPage, setInternalPage] = useState2(1);
-  const [internalPageSize, setInternalPageSize] = useState2(DEFAULT_PAGE_SIZE);
+  const [internalPage, setInternalPage] = useState3(1);
+  const [internalPageSize, setInternalPageSize] = useState3(DEFAULT_PAGE_SIZE);
   const dataLength = data.length;
   const autoPagination = pagination === void 0 && dataLength > DEFAULT_PAGE_SIZE;
   const pgEnabled = pagination === false ? false : !!pagination || autoPagination;
@@ -2237,7 +2399,7 @@ function BoltTable({
   }, [shimmerData, infiniteLoadingShimmer, paginatedData]);
   const measuredExpandedHeights = useRef4(/* @__PURE__ */ new Map());
   const expandedRowMeasureRafRef = useRef4(null);
-  const handleExpandedRowResize = useCallback(
+  const handleExpandedRowResize = useCallback2(
     (rk, contentHeight) => {
       const prev = measuredExpandedHeights.current.get(rk);
       const rounded = Math.round(contentHeight);
@@ -2366,7 +2528,7 @@ function BoltTable({
       totalPages
     ];
   };
-  const HEADER_HEIGHT = 36;
+  const HEADER_HEIGHT = hasColumnGroups ? 72 : 36;
   const MAX_AUTO_ROWS = 10;
   const virtualTotalSize = rowVirtualizer.getTotalSize();
   const naturalContentHeight = virtualTotalSize + HEADER_HEIGHT;
@@ -2561,7 +2723,7 @@ function BoltTable({
                         style: {
                           display: "grid",
                           gridTemplateColumns,
-                          gridTemplateRows: isEmpty ? "36px 1fr" : `36px ${virtualTotalSize}px`,
+                          gridTemplateRows: isEmpty ? hasColumnGroups ? "36px 36px 1fr" : "36px 1fr" : hasColumnGroups ? `36px 36px ${virtualTotalSize}px` : `36px ${virtualTotalSize}px`,
                           minWidth: `${totalTableWidth}px`,
                           width: "100%",
                           position: "relative",
@@ -2579,7 +2741,8 @@ function BoltTable({
                           const hasCopy = !!col?.copy;
                           const hasRowPin = !!rowPinning;
                           const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
-                          if (!hasCopy && !hasRowPin && !hasCellItems) return;
+                          const hasEdit = !!col?.editable && !col?.render && !!onEdit;
+                          if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit) return;
                           e.preventDefault();
                           setCellContextMenu({
                             x: Math.min(e.clientX, window.innerWidth - 200),
@@ -2608,7 +2771,8 @@ function BoltTable({
                             const hasCopy = !!col?.copy;
                             const hasRowPin = !!rowPinning;
                             const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
-                            if (!hasCopy && !hasRowPin && !hasCellItems) return;
+                            const hasEdit = !!col?.editable && !col?.render && !!onEdit;
+                            if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit) return;
                             setCellContextMenu({
                               x: Math.min(touch.clientX, window.innerWidth - 200),
                               y: Math.min(touch.clientY, window.innerHeight - 200),
@@ -2628,7 +2792,50 @@ function BoltTable({
                         onTouchEnd: cancelCellLongPress,
                         onTouchCancel: cancelCellLongPress,
                         children: [
+                          hasColumnGroups && headerGroups.map((group) => {
+                            let minIdx = Infinity;
+                            let maxIdx = -1;
+                            orderedColumns.forEach((col, idx) => {
+                              if (group.childKeys.includes(col.key)) {
+                                minIdx = Math.min(minIdx, idx);
+                                maxIdx = Math.max(maxIdx, idx);
+                              }
+                            });
+                            if (minIdx === Infinity) return null;
+                            return /* @__PURE__ */ jsx5(
+                              "div",
+                              {
+                                "data-bt-header": "",
+                                className: `${group.className ?? ""} ${classNames.header ?? ""}`,
+                                style: {
+                                  gridColumn: `${minIdx + 1} / ${maxIdx + 2}`,
+                                  gridRow: 1,
+                                  position: "sticky",
+                                  top: 0,
+                                  zIndex: 10,
+                                  display: "flex",
+                                  height: 36,
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap",
+                                  borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                  fontWeight: 500,
+                                  userSelect: "none",
+                                  ...group.style,
+                                  ...styles.header
+                                },
+                                children: group.title
+                              },
+                              `group-${group.key}`
+                            );
+                          }),
                           orderedColumns.map((column, visualIndex) => {
+                            const isInGroup = groupedColumnKeySet?.has(column.key) ?? false;
+                            const leafGridRow = hasColumnGroups ? isInGroup ? 2 : "1 / 3" : 1;
+                            const leafHeight = hasColumnGroups && !isInGroup ? 72 : 36;
+                            const leafStickyTop = hasColumnGroups && isInGroup ? 36 : 0;
                             if (column.key === "__select__" && rowSelection) {
                               return /* @__PURE__ */ jsx5(
                                 "div",
@@ -2638,7 +2845,7 @@ function BoltTable({
                                   className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
                                   style: {
                                     display: "flex",
-                                    height: 36,
+                                    height: leafHeight,
                                     alignItems: "center",
                                     justifyContent: "center",
                                     overflow: "hidden",
@@ -2650,6 +2857,7 @@ function BoltTable({
                                     top: 0,
                                     zIndex: 13,
                                     width: "48px",
+                                    gridRow: leafGridRow,
                                     ...styles.header,
                                     ...styles.pinnedHeader
                                   },
@@ -2683,7 +2891,7 @@ function BoltTable({
                                           });
                                         }
                                       },
-                                      style: { cursor: "pointer", accentColor }
+                                      style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
                                     }
                                   )
                                 },
@@ -2699,7 +2907,7 @@ function BoltTable({
                                   className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
                                   style: {
                                     display: "flex",
-                                    height: 36,
+                                    height: leafHeight,
                                     alignItems: "center",
                                     justifyContent: "center",
                                     overflow: "hidden",
@@ -2711,6 +2919,7 @@ function BoltTable({
                                     top: 0,
                                     zIndex: 13,
                                     width: "40px",
+                                    gridRow: leafGridRow,
                                     ...styles.header,
                                     ...styles.pinnedHeader
                                   }
@@ -2741,7 +2950,10 @@ function BoltTable({
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
                                 customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
-                                disabledFilters
+                                disabledFilters,
+                                headerGridRow: leafGridRow,
+                                headerHeight: leafHeight,
+                                stickyTop: leafStickyTop
                               },
                               column.key
                             );
@@ -2812,7 +3024,11 @@ function BoltTable({
                               gridTemplateColumns,
                               headerHeight: HEADER_HEIGHT,
                               rowClassName,
-                              rowStyle
+                              rowStyle,
+                              bodyGridRow: hasColumnGroups ? 3 : 2,
+                              onEdit,
+                              editingCell,
+                              onEditComplete: handleEditComplete
                             }
                           )
                         ]
@@ -2826,6 +3042,7 @@ function BoltTable({
           pgEnabled && /* @__PURE__ */ jsxs5(
             "div",
             {
+              className: classNames.pagination ?? "",
               style: {
                 display: "flex",
                 height: 36,
@@ -2837,27 +3054,42 @@ function BoltTable({
                 fontSize: 12,
                 backdropFilter: "blur(8px)",
                 backgroundColor: "rgba(128,128,128,0.06)",
-                gap: 12
+                gap: 12,
+                ...styles.pagination
               },
               children: [
                 /* @__PURE__ */ jsx5("div", { style: { display: "flex", flex: "1 1 0%", alignItems: "center" }, children: (() => {
                   const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
                   const rangeEnd = Math.min(currentPage * pageSize, total);
-                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ jsxs5("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    "Showing",
-                    " ",
-                    pagination.showTotal(total, [rangeStart, rangeEnd]),
-                    " of",
-                    " ",
-                    total,
-                    " items"
-                  ] }) : /* @__PURE__ */ jsxs5("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    rangeStart,
-                    "\u2013",
-                    rangeEnd,
-                    " of ",
-                    total
-                  ] });
+                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ jsxs5(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        "Showing",
+                        " ",
+                        pagination.showTotal(total, [rangeStart, rangeEnd]),
+                        " of",
+                        " ",
+                        total,
+                        " items"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxs5(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        rangeStart,
+                        "\u2013",
+                        rangeEnd,
+                        " of ",
+                        total
+                      ]
+                    }
+                  );
                 })() }),
                 /* @__PURE__ */ jsxs5(
                   "div",
@@ -2875,6 +3107,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2887,7 +3120,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "First page",
                           children: icons?.chevronsLeft ?? /* @__PURE__ */ jsx5(ChevronsLeftIcon, { style: { width: 12, height: 12 } })
@@ -2898,6 +3132,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(currentPage - 1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2910,7 +3145,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Previous page",
                           children: icons?.chevronLeft ?? /* @__PURE__ */ jsx5(ChevronLeftIcon, { style: { width: 12, height: 12 } })
@@ -2933,9 +3169,11 @@ function BoltTable({
                             page
                           );
                         }
+                        const isActivePage = page === currentPage;
                         return /* @__PURE__ */ jsx5(
                           "button",
                           {
+                            className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
                             style: {
                               display: "inline-flex",
                               height: 24,
@@ -2947,9 +3185,11 @@ function BoltTable({
                               paddingLeft: 6,
                               paddingRight: 6,
                               fontSize: 12,
-                              color: page === currentPage ? accentColor : void 0,
+                              color: isActivePage ? accentColor : void 0,
                               background: "none",
-                              border: "none"
+                              border: "none",
+                              ...styles.paginationButton,
+                              ...isActivePage ? styles.paginationActiveButton : void 0
                             },
                             onClick: () => handlePageChange(page),
                             children: page
@@ -2962,6 +3202,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(currentPage + 1),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2974,7 +3215,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Next page",
                           children: icons?.chevronRight ?? /* @__PURE__ */ jsx5(ChevronRightIcon, { style: { width: 12, height: 12 } })
@@ -2985,6 +3227,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(totalPages),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2997,7 +3240,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Last page",
                           children: icons?.chevronsRight ?? /* @__PURE__ */ jsx5(ChevronsRightIcon, { style: { width: 12, height: 12 } })
@@ -3021,6 +3265,7 @@ function BoltTable({
                       {
                         value: pageSize,
                         onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                        className: classNames.paginationSelect ?? "",
                         style: {
                           cursor: "pointer",
                           borderRadius: 4,
@@ -3032,7 +3277,8 @@ function BoltTable({
                           fontSize: 12,
                           height: 24,
                           background: "inherit",
-                          color: "inherit"
+                          color: "inherit",
+                          ...styles.paginationSelect
                         },
                         children: (typeof pagination === "object" && pagination?.pageSizeOptions ? pagination.pageSizeOptions : [10, 15, 20, 25, 50, 100]).map((size) => /* @__PURE__ */ jsxs5("option", { value: size, children: [
                           size,
@@ -3127,6 +3373,7 @@ function BoltTable({
       );
       const hasCopy = !!menuCol?.copy;
       const hasRowPin = !!rowPinning;
+      const hasEdit = !!menuCol?.editable && !menuCol?.render && !!onEdit;
       let menuRecord;
       let menuRowIndex = 0;
       const allRows = [
@@ -3143,7 +3390,7 @@ function BoltTable({
           break;
         }
       }
-      const menuValue = menuRecord && menuCol ? menuRecord[menuCol.dataIndex] : void 0;
+      const menuValue = menuRecord && menuCol?.dataIndex != null ? menuRecord[menuCol.dataIndex] : void 0;
       const btnStyle = {
         display: "flex",
         width: "100%",
@@ -3242,7 +3489,39 @@ function BoltTable({
                   }
                 )
               ] }),
-              hasRowPin && hasCopy && /* @__PURE__ */ jsx5(
+              hasRowPin && (hasCopy || hasEdit) && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    borderTop: "1px solid rgba(128,128,128,0.2)",
+                    margin: "4px 0"
+                  }
+                }
+              ),
+              hasEdit && /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  "data-bt-ctx-item": true,
+                  style: btnStyle,
+                  onClick: () => {
+                    setEditingCell({
+                      rowKey: cellContextMenu.rowKey,
+                      columnKey: cellContextMenu.columnKey
+                    });
+                    setCellContextMenu(null);
+                  },
+                  children: [
+                    icons?.edit ?? /* @__PURE__ */ jsx5(
+                      PencilIcon,
+                      {
+                        style: { width: 14, height: 14, flexShrink: 0 }
+                      }
+                    ),
+                    "Edit"
+                  ]
+                }
+              ),
+              (hasEdit || hasRowPin) && hasCopy && /* @__PURE__ */ jsx5(
                 "div",
                 {
                   style: {
@@ -3274,7 +3553,7 @@ function BoltTable({
                 }
               ),
               menuCol?.columnCellContextMenuItems && menuCol.columnCellContextMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment4, { children: [
-                (hasCopy || hasRowPin) && /* @__PURE__ */ jsx5(
+                (hasCopy || hasRowPin || hasEdit) && /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {