bolt-table 0.1.23 → 0.1.24

package/dist/index.js

@@ -114,6 +114,10 @@ var CopyIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m15 5 4 4" })
+] });
 var EyeOffIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
   /* @__PURE__ */ (0, import_jsx_runtime.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" }),
@@ -151,7 +155,10 @@ var DraggableHeader = import_react.default.memo(
     customContextMenuItems,
     icons,
     onColumnDragStart,
-    disabledFilters
+    disabledFilters,
+    headerGridRow = 1,
+    headerHeight = 36,
+    stickyTop = 0
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -225,23 +232,23 @@ var DraggableHeader = import_react.default.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,
@@ -635,7 +642,7 @@ var DraggableHeader = import_react.default.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";
@@ -781,6 +788,61 @@ var ResizeOverlay_default = ResizeOverlay;
 var import_react3 = __toESM(require("react"));
 var import_jsx_runtime4 = require("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] = (0, import_react3.useState)(String(value ?? ""));
+  const inputRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    setDraft(String(value ?? ""));
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, [value]);
+  const commit = (0, import_react3.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 = (0, import_react3.useCallback)(() => {
+    onEditComplete();
+  }, [onEditComplete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "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 = import_react3.default.memo(
   ({
     value,
@@ -796,7 +858,10 @@ var Cell = import_react3.default.memo(
     getRowKey,
     getRawRowKey,
     accentColor,
-    isLoading
+    isLoading,
+    onEdit,
+    isEditing,
+    onEditComplete
   }) => {
     const isPinned = Boolean(column.pinned);
     if (isLoading && column.key !== "__select__" && column.key !== "__expand__") {
@@ -875,7 +940,7 @@ var Cell = import_react3.default.memo(
               type: "multiple"
             });
           },
-          style: { cursor: "pointer", accentColor }
+          style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
         }
       );
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -900,8 +965,22 @@ var Cell = import_react3.default.memo(
         }
       );
     }
+    const isEditable = !!column.editable && !column.render && !!onEdit;
+    const showEditor = isEditable && isEditing && onEditComplete;
     let content;
-    if (column.render) {
+    if (showEditor) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        EditableCell,
+        {
+          value,
+          record,
+          column,
+          rowIndex,
+          onEdit,
+          onEditComplete
+        }
+      );
+    } else if (column.render) {
       try {
         content = column.render(value, record, rowIndex);
       } catch {
@@ -930,7 +1009,7 @@ var Cell = import_react3.default.memo(
           ...isPinned ? styles?.pinnedCell : void 0,
           ...styles?.cell
         },
-        children: isSystem ? content : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        children: isSystem ? content : showEditor ? content : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
@@ -951,6 +1030,10 @@ var Cell = import_react3.default.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;
     }
@@ -1018,7 +1101,11 @@ var TableBody = ({
   gridTemplateColumns,
   headerHeight = 36,
   rowClassName,
-  rowStyle
+  rowStyle,
+  bodyGridRow = 2,
+  onEdit,
+  editingCell,
+  onEditComplete
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1040,7 +1127,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
@@ -1054,7 +1141,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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     columnStyles.map((colStyle, colIndex) => {
@@ -1072,7 +1159,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) {
@@ -1134,7 +1221,10 @@ var TableBody = ({
                         getRawRowKey,
                         accentColor,
                         isLoading: isRowShimmer,
-                        recordFingerprint
+                        recordFingerprint,
+                        onEdit,
+                        isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
+                        onEditComplete
                       }
                     )
                   }
@@ -1152,7 +1242,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 15,
@@ -1216,7 +1306,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1258,7 +1348,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;
@@ -1316,7 +1406,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1338,7 +1431,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1383,7 +1476,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;
@@ -1441,7 +1534,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1471,6 +1567,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 = {};
@@ -1513,7 +1621,8 @@ function BoltTable({
   rowStyle,
   disabledFilters,
   onCopy,
-  keepPinnedRowsAcrossPages
+  keepPinnedRowsAcrossPages,
+  onEdit
 }) {
   const data = (0, import_react4.useMemo)(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1522,11 +1631,43 @@ function BoltTable({
   }, [rawData]);
   const initialColumns = (0, import_react4.useMemo)(() => {
     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 = (0, import_react4.useMemo)(() => {
+    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 hasColumnGroups = headerGroups.length > 0;
+  const groupedColumnKeySet = (0, import_react4.useMemo)(() => {
+    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] = (0, import_react4.useState)(initialColumns);
   const [columnOrder, setColumnOrder] = (0, import_react4.useState)(
     () => initialColumns.map((c) => c.key)
@@ -1779,6 +1920,17 @@ function BoltTable({
     };
   }, []);
   const resizeStateRef = (0, import_react4.useRef)(null);
+  const columnGroupMapRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react4.useMemo)(() => {
+    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 = (0, import_react4.useRef)(null);
   const dragActiveIdRef = (0, import_react4.useRef)(null);
   const ghostRef = (0, import_react4.useRef)(null);
@@ -1807,6 +1959,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`;
@@ -1822,6 +1975,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;
@@ -1844,7 +2002,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)) {
           import_react4.default.startTransition(() => {
             setColumnOrder((items) => {
               const oldIndex = items.indexOf(currentActiveId);
@@ -2084,7 +2242,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());
@@ -2190,6 +2348,10 @@ function BoltTable({
     () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
     [resolvedRowPinning?.bottom]
   );
+  const [editingCell, setEditingCell] = (0, import_react4.useState)(null);
+  const handleEditComplete = (0, import_react4.useCallback)(() => {
+    setEditingCell(null);
+  }, []);
   const [cellContextMenu, setCellContextMenu] = (0, import_react4.useState)(null);
   const cellMenuRef = (0, import_react4.useRef)(null);
   const cellLongPressTimer = (0, import_react4.useRef)(
@@ -2400,7 +2562,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;
@@ -2595,7 +2757,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",
@@ -2613,7 +2775,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),
@@ -2642,7 +2805,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),
@@ -2662,7 +2826,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__ */ (0, import_jsx_runtime5.jsx)(
+                              "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__ */ (0, import_jsx_runtime5.jsx)(
                                 "div",
@@ -2672,7 +2879,7 @@ function BoltTable({
                                   className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
                                   style: {
                                     display: "flex",
-                                    height: 36,
+                                    height: leafHeight,
                                     alignItems: "center",
                                     justifyContent: "center",
                                     overflow: "hidden",
@@ -2684,6 +2891,7 @@ function BoltTable({
                                     top: 0,
                                     zIndex: 13,
                                     width: "48px",
+                                    gridRow: leafGridRow,
                                     ...styles.header,
                                     ...styles.pinnedHeader
                                   },
@@ -2717,7 +2925,7 @@ function BoltTable({
                                           });
                                         }
                                       },
-                                      style: { cursor: "pointer", accentColor }
+                                      style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
                                     }
                                   )
                                 },
@@ -2733,7 +2941,7 @@ function BoltTable({
                                   className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
                                   style: {
                                     display: "flex",
-                                    height: 36,
+                                    height: leafHeight,
                                     alignItems: "center",
                                     justifyContent: "center",
                                     overflow: "hidden",
@@ -2745,6 +2953,7 @@ function BoltTable({
                                     top: 0,
                                     zIndex: 13,
                                     width: "40px",
+                                    gridRow: leafGridRow,
                                     ...styles.header,
                                     ...styles.pinnedHeader
                                   }
@@ -2775,7 +2984,10 @@ function BoltTable({
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
                                 customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
-                                disabledFilters
+                                disabledFilters,
+                                headerGridRow: leafGridRow,
+                                headerHeight: leafHeight,
+                                stickyTop: leafStickyTop
                               },
                               column.key
                             );
@@ -2846,7 +3058,11 @@ function BoltTable({
                               gridTemplateColumns,
                               headerHeight: HEADER_HEIGHT,
                               rowClassName,
-                              rowStyle
+                              rowStyle,
+                              bodyGridRow: hasColumnGroups ? 3 : 2,
+                              onEdit,
+                              editingCell,
+                              onEditComplete: handleEditComplete
                             }
                           )
                         ]
@@ -2860,6 +3076,7 @@ function BoltTable({
           pgEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
+              className: classNames.pagination ?? "",
               style: {
                 display: "flex",
                 height: 36,
@@ -2871,27 +3088,42 @@ function BoltTable({
                 fontSize: 12,
                 backdropFilter: "blur(8px)",
                 backgroundColor: "rgba(128,128,128,0.06)",
-                gap: 12
+                gap: 12,
+                ...styles.pagination
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    "Showing",
-                    " ",
-                    pagination.showTotal(total, [rangeStart, rangeEnd]),
-                    " of",
-                    " ",
-                    total,
-                    " items"
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    rangeStart,
-                    "\u2013",
-                    rangeEnd,
-                    " of ",
-                    total
-                  ] });
+                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        "Showing",
+                        " ",
+                        pagination.showTotal(total, [rangeStart, rangeEnd]),
+                        " of",
+                        " ",
+                        total,
+                        " items"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        rangeStart,
+                        "\u2013",
+                        rangeEnd,
+                        " of ",
+                        total
+                      ]
+                    }
+                  );
                 })() }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
@@ -2909,6 +3141,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2921,7 +3154,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "First page",
                           children: icons?.chevronsLeft ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronsLeftIcon, { style: { width: 12, height: 12 } })
@@ -2932,6 +3166,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(currentPage - 1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2944,7 +3179,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Previous page",
                           children: icons?.chevronLeft ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronLeftIcon, { style: { width: 12, height: 12 } })
@@ -2967,9 +3203,11 @@ function BoltTable({
                             page
                           );
                         }
+                        const isActivePage = page === currentPage;
                         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
+                            className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
                             style: {
                               display: "inline-flex",
                               height: 24,
@@ -2981,9 +3219,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
@@ -2996,6 +3236,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(currentPage + 1),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -3008,7 +3249,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Next page",
                           children: icons?.chevronRight ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronRightIcon, { style: { width: 12, height: 12 } })
@@ -3019,6 +3261,7 @@ function BoltTable({
                         {
                           onClick: () => handlePageChange(totalPages),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -3031,7 +3274,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Last page",
                           children: icons?.chevronsRight ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronsRightIcon, { style: { width: 12, height: 12 } })
@@ -3055,6 +3299,7 @@ function BoltTable({
                       {
                         value: pageSize,
                         onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                        className: classNames.paginationSelect ?? "",
                         style: {
                           cursor: "pointer",
                           borderRadius: 4,
@@ -3066,7 +3311,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__ */ (0, import_jsx_runtime5.jsxs)("option", { value: size, children: [
                           size,
@@ -3161,6 +3407,7 @@ function BoltTable({
       );
       const hasCopy = !!menuCol?.copy;
       const hasRowPin = !!rowPinning;
+      const hasEdit = !!menuCol?.editable && !menuCol?.render && !!onEdit;
       let menuRecord;
       let menuRowIndex = 0;
       const allRows = [
@@ -3177,7 +3424,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%",
@@ -3276,7 +3523,39 @@ function BoltTable({
                   }
                 )
               ] }),
-              hasRowPin && hasCopy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              hasRowPin && (hasCopy || hasEdit) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  style: {
+                    borderTop: "1px solid rgba(128,128,128,0.2)",
+                    margin: "4px 0"
+                  }
+                }
+              ),
+              hasEdit && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  "data-bt-ctx-item": true,
+                  style: btnStyle,
+                  onClick: () => {
+                    setEditingCell({
+                      rowKey: cellContextMenu.rowKey,
+                      columnKey: cellContextMenu.columnKey
+                    });
+                    setCellContextMenu(null);
+                  },
+                  children: [
+                    icons?.edit ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      PencilIcon,
+                      {
+                        style: { width: 14, height: 14, flexShrink: 0 }
+                      }
+                    ),
+                    "Edit"
+                  ]
+                }
+              ),
+              (hasEdit || hasRowPin) && hasCopy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   style: {
@@ -3308,7 +3587,7 @@ function BoltTable({
                 }
               ),
               menuCol?.columnCellContextMenuItems && menuCol.columnCellContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                (hasCopy || hasRowPin) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                (hasCopy || hasRowPin || hasEdit) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "div",
                   {
                     style: {