bolt-table 0.1.23 → 0.1.25

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,11 @@ var DraggableHeader = import_react.default.memo(
     customContextMenuItems,
     icons,
     onColumnDragStart,
-    disabledFilters
+    disabledFilters,
+    headerGridRow = 1,
+    headerHeight = 36,
+    stickyTop = 0,
+    isFirstColumn = false
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -225,23 +233,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: isFirstColumn ? "none" : "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,
@@ -288,7 +296,7 @@ var DraggableHeader = import_react.default.memo(
                   whiteSpace: "nowrap",
                   paddingLeft: 8,
                   paddingRight: 8,
-                  borderLeft: "1px solid rgba(128,128,128,0.2)",
+                  borderLeft: isFirstColumn ? "none" : "1px solid rgba(128,128,128,0.2)",
                   fontWeight: 500,
                   cursor: isPinned ? "default" : "grab"
                 },
@@ -323,6 +331,7 @@ var DraggableHeader = import_react.default.memo(
             isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
+                type: "button",
                 style: {
                   position: "relative",
                   height: "100%",
@@ -350,6 +359,7 @@ var DraggableHeader = import_react.default.memo(
             !isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
+                type: "button",
                 "data-bt-resize": "",
                 style: {
                   position: "relative",
@@ -428,6 +438,7 @@ var DraggableHeader = import_react.default.memo(
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -447,6 +458,7 @@ var DraggableHeader = import_react.default.memo(
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -504,6 +516,7 @@ var DraggableHeader = import_react.default.memo(
                   ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: ctxItemBase,
                       onClick: () => {
@@ -518,6 +531,7 @@ var DraggableHeader = import_react.default.memo(
                   filterValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -539,6 +553,7 @@ var DraggableHeader = import_react.default.memo(
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     style: ctxItemBase,
                     onClick: () => {
@@ -557,6 +572,7 @@ var DraggableHeader = import_react.default.memo(
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     style: ctxItemBase,
                     onClick: () => {
@@ -577,6 +593,7 @@ var DraggableHeader = import_react.default.memo(
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: ctxItemBase,
                       onClick: () => {
@@ -595,6 +612,7 @@ var DraggableHeader = import_react.default.memo(
                   customContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       disabled: item.disabled,
                       style: {
@@ -635,7 +653,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 && prevProps.isFirstColumn === nextProps.isFirstColumn;
   }
 );
 DraggableHeader.displayName = "DraggableHeader";
@@ -781,6 +799,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 +869,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 +951,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 +976,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 +1020,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 +1041,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 +1112,11 @@ var TableBody = ({
   gridTemplateColumns,
   headerHeight = 36,
   rowClassName,
-  rowStyle
+  rowStyle,
+  bodyGridRow = 2,
+  onEdit,
+  editingCell,
+  onEditComplete
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1040,7 +1138,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 +1152,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 +1170,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 +1232,10 @@ var TableBody = ({
                         getRawRowKey,
                         accentColor,
                         isLoading: isRowShimmer,
-                        recordFingerprint
+                        recordFingerprint,
+                        onEdit,
+                        isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
+                        onEditComplete
                       }
                     )
                   }
@@ -1152,7 +1253,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 15,
@@ -1216,7 +1317,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1258,7 +1359,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 +1417,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1338,7 +1442,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1383,7 +1487,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 +1545,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1471,6 +1578,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 +1632,9 @@ function BoltTable({
   rowStyle,
   disabledFilters,
   onCopy,
-  keepPinnedRowsAcrossPages
+  keepPinnedRowsAcrossPages,
+  onEdit,
+  onRowClick
 }) {
   const data = (0, import_react4.useMemo)(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1522,11 +1643,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"
+    );
+    const flattened = flattenColumns(safe);
+    const validated = flattened.filter(
       (col) => col != null && typeof col.key === "string"
     );
-    return filtered.length > 0 ? filtered : STABLE_EMPTY_COLS;
+    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)
@@ -1680,6 +1833,7 @@ function BoltTable({
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
+            type: "button",
             onClick: (e) => {
               e.stopPropagation();
               toggleExpandRef.current(key);
@@ -1779,6 +1933,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 +1972,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 +1988,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 +2015,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 +2255,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 +2361,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 +2575,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;
@@ -2457,6 +2632,7 @@ function BoltTable({
           [data-bt-header][data-drag-over] {
             border: 1px dashed ${accentColor} !important;
           }
+          ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
         ` }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
@@ -2595,7 +2771,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 +2789,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 +2819,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),
@@ -2661,125 +2839,209 @@ function BoltTable({
                         },
                         onTouchEnd: cancelCellLongPress,
                         onTouchCancel: cancelCellLongPress,
-                        children: [
-                          orderedColumns.map((column, visualIndex) => {
-                            if (column.key === "__select__" && rowSelection) {
-                              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                                "div",
-                                {
-                                  "data-bt-header": "",
-                                  "data-bt-pinned": "",
-                                  className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
-                                  style: {
-                                    display: "flex",
-                                    height: 36,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                    position: "sticky",
-                                    left: columnOffsets.get("__select__") ?? 0,
-                                    top: 0,
-                                    zIndex: 13,
-                                    width: "48px",
-                                    ...styles.header,
-                                    ...styles.pinnedHeader
-                                  },
-                                  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                                    "input",
-                                    {
-                                      type: "checkbox",
-                                      checked: dataLength > 0 && normalizedSelectedKeys.length === dataLength,
-                                      ref: (input) => {
-                                        if (input) {
-                                          input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < dataLength;
-                                        }
-                                      },
-                                      onChange: (e) => {
-                                        if (e.target.checked) {
-                                          const allKeys = data.map(
-                                            (row, idx) => getRawRowKey(row, idx)
-                                          );
-                                          rowSelection.onSelectAll?.(
-                                            true,
-                                            data,
-                                            data
-                                          );
-                                          rowSelection.onChange?.(allKeys, data, {
-                                            type: "all"
-                                          });
-                                        } else {
-                                          rowSelection.onSelectAll?.(false, [], data);
-                                          rowSelection.onChange?.([], [], {
-                                            type: "all"
-                                          });
-                                        }
-                                      },
-                                      style: { cursor: "pointer", accentColor }
-                                    }
-                                  )
-                                },
-                                "__select__"
-                              );
+                        onClick: onRowClick ? (e) => {
+                          const target = e.target;
+                          if (target.closest("input, button, a, select, textarea")) return;
+                          const cell = target.closest("[data-bt-cell]");
+                          if (!cell) return;
+                          const rk = cell.dataset.rowKey;
+                          if (!rk) return;
+                          for (let i = 0; i < displayData.length; i++) {
+                            const row = displayData[i];
+                            if (row == null) continue;
+                            if (getRowKey(row, i) === rk) {
+                              onRowClick(row, i, e);
+                              return;
                             }
-                            if (column.key === "__expand__") {
-                              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                                "div",
-                                {
-                                  "data-bt-header": "",
-                                  "data-bt-pinned": "",
-                                  className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
-                                  style: {
-                                    display: "flex",
-                                    height: 36,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                    position: "sticky",
-                                    left: columnOffsets.get("__expand__") ?? 0,
-                                    top: 0,
-                                    zIndex: 13,
-                                    width: "40px",
-                                    ...styles.header,
-                                    ...styles.pinnedHeader
-                                  }
-                                },
-                                "__expand__"
-                              );
+                          }
+                          for (let i = 0; i < pinnedTopRows.length; i++) {
+                            if (pinnedTopRows[i] == null) continue;
+                            if (getRowKey(pinnedTopRows[i], i) === rk) {
+                              onRowClick(pinnedTopRows[i], i, e);
+                              return;
                             }
+                          }
+                          for (let i = 0; i < pinnedBottomRows.length; i++) {
+                            if (pinnedBottomRows[i] == null) continue;
+                            if (getRowKey(pinnedBottomRows[i], i) === rk) {
+                              onRowClick(pinnedBottomRows[i], i, e);
+                              return;
+                            }
+                          }
+                        } : void 0,
+                        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)(
-                              DraggableHeader_default,
+                              "div",
                               {
-                                column,
-                                accentColor,
-                                visualIndex,
-                                onResizeStart: handleResizeStart,
-                                onColumnDragStart: handleColumnDragStart,
-                                styles,
-                                classNames,
-                                gripIcon,
-                                hideGripIcon,
-                                icons,
-                                stickyOffset: columnOffsets.get(column.key),
-                                onTogglePin: handleTogglePin,
-                                onToggleHide: handleToggleHide,
-                                isLastColumn: visualIndex === orderedColumns.length - 1,
-                                sortDirection: sortState.key === column.key ? sortState.direction : null,
-                                onSort: handleSort,
-                                filterValue: columnFilters[column.key] ?? "",
-                                onFilter: handleColumnFilter,
-                                onClearFilter: handleClearFilter,
-                                customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
-                                disabledFilters
+                                "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
                               },
-                              column.key
+                              `group-${group.key}`
                             );
                           }),
+                          (() => {
+                            const firstDataColIndex = orderedColumns.findIndex(
+                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                            );
+                            return 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",
+                                  {
+                                    "data-bt-header": "",
+                                    "data-bt-pinned": "",
+                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                    style: {
+                                      display: "flex",
+                                      height: leafHeight,
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis",
+                                      whiteSpace: "nowrap",
+                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                      position: "sticky",
+                                      left: columnOffsets.get("__select__") ?? 0,
+                                      top: 0,
+                                      zIndex: 13,
+                                      width: "48px",
+                                      gridRow: leafGridRow,
+                                      ...styles.header,
+                                      ...styles.pinnedHeader
+                                    },
+                                    children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                      "input",
+                                      {
+                                        type: "checkbox",
+                                        checked: dataLength > 0 && normalizedSelectedKeys.length === dataLength,
+                                        ref: (input) => {
+                                          if (input) {
+                                            input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < dataLength;
+                                          }
+                                        },
+                                        onChange: (e) => {
+                                          if (e.target.checked) {
+                                            const allKeys = data.map(
+                                              (row, idx) => getRawRowKey(row, idx)
+                                            );
+                                            rowSelection.onSelectAll?.(
+                                              true,
+                                              data,
+                                              data
+                                            );
+                                            rowSelection.onChange?.(allKeys, data, {
+                                              type: "all"
+                                            });
+                                          } else {
+                                            rowSelection.onSelectAll?.(false, [], data);
+                                            rowSelection.onChange?.([], [], {
+                                              type: "all"
+                                            });
+                                          }
+                                        },
+                                        style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
+                                      }
+                                    )
+                                  },
+                                  "__select__"
+                                );
+                              }
+                              if (column.key === "__expand__") {
+                                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                  "div",
+                                  {
+                                    "data-bt-header": "",
+                                    "data-bt-pinned": "",
+                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                    style: {
+                                      display: "flex",
+                                      height: leafHeight,
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis",
+                                      whiteSpace: "nowrap",
+                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                      position: "sticky",
+                                      left: columnOffsets.get("__expand__") ?? 0,
+                                      top: 0,
+                                      zIndex: 13,
+                                      width: "40px",
+                                      gridRow: leafGridRow,
+                                      ...styles.header,
+                                      ...styles.pinnedHeader
+                                    }
+                                  },
+                                  "__expand__"
+                                );
+                              }
+                              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                DraggableHeader_default,
+                                {
+                                  column,
+                                  accentColor,
+                                  visualIndex,
+                                  onResizeStart: handleResizeStart,
+                                  onColumnDragStart: handleColumnDragStart,
+                                  styles,
+                                  classNames,
+                                  gripIcon,
+                                  hideGripIcon,
+                                  icons,
+                                  stickyOffset: columnOffsets.get(column.key),
+                                  onTogglePin: handleTogglePin,
+                                  onToggleHide: handleToggleHide,
+                                  isLastColumn: visualIndex === orderedColumns.length - 1,
+                                  isFirstColumn: visualIndex === firstDataColIndex,
+                                  sortDirection: sortState.key === column.key ? sortState.direction : null,
+                                  onSort: handleSort,
+                                  filterValue: columnFilters[column.key] ?? "",
+                                  onFilter: handleColumnFilter,
+                                  onClearFilter: handleClearFilter,
+                                  customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
+                                  disabledFilters,
+                                  headerGridRow: leafGridRow,
+                                  headerHeight: leafHeight,
+                                  stickyTop: leafStickyTop
+                                },
+                                column.key
+                              );
+                            });
+                          })(),
                           isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                             "div",
                             {
@@ -2846,7 +3108,11 @@ function BoltTable({
                               gridTemplateColumns,
                               headerHeight: HEADER_HEIGHT,
                               rowClassName,
-                              rowStyle
+                              rowStyle,
+                              bodyGridRow: hasColumnGroups ? 3 : 2,
+                              onEdit,
+                              editingCell,
+                              onEditComplete: handleEditComplete
                             }
                           )
                         ]
@@ -2860,6 +3126,7 @@ function BoltTable({
           pgEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
+              className: classNames.pagination ?? "",
               style: {
                 display: "flex",
                 height: 36,
@@ -2871,27 +3138,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",
@@ -2907,8 +3189,10 @@ function BoltTable({
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2921,7 +3205,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 } })
@@ -2930,8 +3215,10 @@ function BoltTable({
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(currentPage - 1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2944,7 +3231,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 +3255,12 @@ function BoltTable({
                             page
                           );
                         }
+                        const isActivePage = page === currentPage;
                         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
+                            type: "button",
+                            className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
                             style: {
                               display: "inline-flex",
                               height: 24,
@@ -2981,9 +3272,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
@@ -2994,8 +3287,10 @@ function BoltTable({
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(currentPage + 1),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -3008,7 +3303,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 } })
@@ -3017,8 +3313,10 @@ function BoltTable({
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(totalPages),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -3031,7 +3329,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 +3354,7 @@ function BoltTable({
                       {
                         value: pageSize,
                         onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                        className: classNames.paginationSelect ?? "",
                         style: {
                           cursor: "pointer",
                           borderRadius: 4,
@@ -3066,7 +3366,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 +3462,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 +3479,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%",
@@ -3217,6 +3519,7 @@ function BoltTable({
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": true,
                     style: btnStyle,
                     onClick: () => {
@@ -3245,6 +3548,7 @@ function BoltTable({
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": true,
                     style: btnStyle,
                     onClick: () => {
@@ -3276,7 +3580,40 @@ 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",
+                {
+                  type: "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: {
@@ -3288,6 +3625,7 @@ function BoltTable({
               hasCopy && menuRecord && menuCol && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "button",
                 {
+                  type: "button",
                   "data-bt-ctx-item": true,
                   style: btnStyle,
                   onClick: () => {
@@ -3308,7 +3646,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: {
@@ -3320,6 +3658,7 @@ function BoltTable({
                 menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     disabled: item.disabled,
                     style: {