bolt-table 0.1.23 → 0.1.25

package/dist/index.mjs

@@ -1,10 +1,10 @@
 // src/BoltTable.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
 import React4, {
-  useCallback,
+  useCallback as useCallback2,
   useMemo as useMemo2,
   useRef as useRef4,
-  useState as useState2
+  useState as useState3
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -80,6 +80,10 @@ var CopyIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBas
   /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
   /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 ] });
+var PencilIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+] });
 var EyeOffIcon = ({ style, className }) => /* @__PURE__ */ jsxs("svg", { ...svgBase, style, className, children: [
   /* @__PURE__ */ jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
   /* @__PURE__ */ jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
@@ -117,7 +121,11 @@ var DraggableHeader = React.memo(
     customContextMenuItems,
     icons,
     onColumnDragStart,
-    disabledFilters
+    disabledFilters,
+    headerGridRow = 1,
+    headerHeight = 36,
+    stickyTop = 0,
+    isFirstColumn = false
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -191,23 +199,23 @@ var DraggableHeader = React.memo(
     const zIndex = isPinned ? 12 : 10;
     const headerStyle = {
       position: "sticky",
-      top: 0,
+      top: stickyTop,
       zIndex,
       width: isLastColumn ? "100%" : widthPx,
       minWidth: widthPx,
       ...isLastColumn ? {} : { maxWidth: widthPx },
       gridColumn: visualIndex + 1,
-      gridRow: 1,
+      gridRow: headerGridRow,
       display: "flex",
-      height: 36,
+      height: headerHeight,
       alignItems: "center",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       borderTop: "none",
-      borderRight: "none",
+      borderRight: "0.5px solid rgba(128,128,128,0.2)",
       borderBottom: "1px solid rgba(128,128,128,0.2)",
-      borderLeft: "none",
+      borderLeft: 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,
@@ -254,7 +262,7 @@ var DraggableHeader = React.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"
                 },
@@ -289,6 +297,7 @@ var DraggableHeader = React.memo(
             isPinned && /* @__PURE__ */ jsx2(
               "button",
               {
+                type: "button",
                 style: {
                   position: "relative",
                   height: "100%",
@@ -316,6 +325,7 @@ var DraggableHeader = React.memo(
             !isPinned && /* @__PURE__ */ jsx2(
               "button",
               {
+                type: "button",
                 "data-bt-resize": "",
                 style: {
                   position: "relative",
@@ -394,6 +404,7 @@ var DraggableHeader = React.memo(
                   /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -413,6 +424,7 @@ var DraggableHeader = React.memo(
                   /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -470,6 +482,7 @@ var DraggableHeader = React.memo(
                   ) }) : /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: ctxItemBase,
                       onClick: () => {
@@ -484,6 +497,7 @@ var DraggableHeader = React.memo(
                   filterValue && /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: {
                         ...ctxItemBase,
@@ -505,6 +519,7 @@ var DraggableHeader = React.memo(
                 /* @__PURE__ */ jsxs2(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     style: ctxItemBase,
                     onClick: () => {
@@ -523,6 +538,7 @@ var DraggableHeader = React.memo(
                 /* @__PURE__ */ jsxs2(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     style: ctxItemBase,
                     onClick: () => {
@@ -543,6 +559,7 @@ var DraggableHeader = React.memo(
                   /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       style: ctxItemBase,
                       onClick: () => {
@@ -561,6 +578,7 @@ var DraggableHeader = React.memo(
                   customContextMenuItems.map((item) => /* @__PURE__ */ jsxs2(
                     "button",
                     {
+                      type: "button",
                       "data-bt-ctx-item": "",
                       disabled: item.disabled,
                       style: {
@@ -601,7 +619,7 @@ var DraggableHeader = React.memo(
     ] });
   },
   (prevProps, nextProps) => {
-    return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters;
+    return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop && prevProps.isFirstColumn === nextProps.isFirstColumn;
   }
 );
 DraggableHeader.displayName = "DraggableHeader";
@@ -744,9 +762,64 @@ ResizeOverlay.displayName = "ResizeOverlay";
 var ResizeOverlay_default = ResizeOverlay;
 
 // src/TableBody.tsx
-import React3, { useEffect as useEffect2, useMemo, useRef as useRef3 } from "react";
+import React3, { useCallback, useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState2 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SHIMMER_WIDTHS = [55, 70, 45, 80, 60, 50, 75, 65];
+var EditableCell = ({
+  value,
+  record,
+  column,
+  rowIndex,
+  onEdit,
+  onEditComplete
+}) => {
+  const [draft, setDraft] = useState2(String(value ?? ""));
+  const inputRef = useRef3(null);
+  useEffect2(() => {
+    setDraft(String(value ?? ""));
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, [value]);
+  const commit = useCallback(() => {
+    const raw = String(value ?? "");
+    if (draft !== raw && column.dataIndex) {
+      const coerced = typeof value === "number" && !Number.isNaN(Number(draft)) ? Number(draft) : draft;
+      onEdit(coerced, record, column.dataIndex, rowIndex);
+    }
+    onEditComplete();
+  }, [draft, value, column.dataIndex, record, rowIndex, onEdit, onEditComplete]);
+  const cancel = useCallback(() => {
+    onEditComplete();
+  }, [onEditComplete]);
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref: inputRef,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") cancel();
+      },
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        outline: "none",
+        background: "transparent",
+        font: "inherit",
+        color: "inherit",
+        padding: 0,
+        margin: 0,
+        boxSizing: "border-box"
+      }
+    }
+  );
+};
+EditableCell.displayName = "EditableCell";
 var Cell = React3.memo(
   ({
     value,
@@ -762,7 +835,10 @@ var Cell = React3.memo(
     getRowKey,
     getRawRowKey,
     accentColor,
-    isLoading
+    isLoading,
+    onEdit,
+    isEditing,
+    onEditComplete
   }) => {
     const isPinned = Boolean(column.pinned);
     if (isLoading && column.key !== "__select__" && column.key !== "__expand__") {
@@ -841,7 +917,7 @@ var Cell = React3.memo(
               type: "multiple"
             });
           },
-          style: { cursor: "pointer", accentColor }
+          style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
         }
       );
       return /* @__PURE__ */ jsx4(
@@ -866,8 +942,22 @@ var Cell = React3.memo(
         }
       );
     }
+    const isEditable = !!column.editable && !column.render && !!onEdit;
+    const showEditor = isEditable && isEditing && onEditComplete;
     let content;
-    if (column.render) {
+    if (showEditor) {
+      content = /* @__PURE__ */ jsx4(
+        EditableCell,
+        {
+          value,
+          record,
+          column,
+          rowIndex,
+          onEdit,
+          onEditComplete
+        }
+      );
+    } else if (column.render) {
       try {
         content = column.render(value, record, rowIndex);
       } catch {
@@ -896,7 +986,7 @@ var Cell = React3.memo(
           ...isPinned ? styles?.pinnedCell : void 0,
           ...styles?.cell
         },
-        children: isSystem ? content : /* @__PURE__ */ jsx4(
+        children: isSystem ? content : showEditor ? content : /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -917,6 +1007,10 @@ var Cell = React3.memo(
     if (prev.column.pinned !== next.column.pinned) return false;
     if (prev.classNames !== next.classNames) return false;
     if (prev.styles !== next.styles) return false;
+    if (prev.column.editable !== next.column.editable) return false;
+    if (prev.onEdit !== next.onEdit) return false;
+    if (prev.isEditing !== next.isEditing) return false;
+    if (prev.onEditComplete !== next.onEditComplete) return false;
     if (prev.column.key === "__select__") {
       return prev.isSelected === next.isSelected && prev.normalizedSelectedKeys === next.normalizedSelectedKeys;
     }
@@ -984,7 +1078,11 @@ var TableBody = ({
   gridTemplateColumns,
   headerHeight = 36,
   rowClassName,
-  rowStyle
+  rowStyle,
+  bodyGridRow = 2,
+  onEdit,
+  editingCell,
+  onEditComplete
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1006,7 +1104,7 @@ var TableBody = ({
       else if (isPinned) zIndex = 2;
       const style = {
         gridColumn: colIndex + 1,
-        gridRow: 2,
+        gridRow: bodyGridRow,
         height: `${totalSize}px`,
         position: isPinned ? "sticky" : "relative",
         zIndex
@@ -1020,7 +1118,7 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [safeColumns, columnOffsets, totalSize, styles]);
+  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow]);
   if (safeData.length === 0 || safeColumns.length === 0) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     columnStyles.map((colStyle, colIndex) => {
@@ -1038,7 +1136,7 @@ var TableBody = ({
             const rowKey = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
             const isSelected = selectedKeySet.has(rowKey);
             const isExpanded = resolvedExpandedKeys?.has(rowKey) ?? false;
-            const cellValue = row[col.dataIndex];
+            const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             let recordFingerprint;
             if (hasRender && !isRowShimmer) {
@@ -1100,7 +1198,10 @@ var TableBody = ({
                         getRawRowKey,
                         accentColor,
                         isLoading: isRowShimmer,
-                        recordFingerprint
+                        recordFingerprint,
+                        onEdit,
+                        isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
+                        onEditComplete
                       }
                     )
                   }
@@ -1118,7 +1219,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 15,
@@ -1182,7 +1283,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1224,7 +1325,7 @@ var TableBody = ({
                     ...rowSty
                   },
                   children: safeColumns.map((col) => {
-                    const cellValue = row[col.dataIndex];
+                    const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
                     let zIndex = 0;
@@ -1282,7 +1383,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1304,7 +1408,7 @@ var TableBody = ({
       {
         style: {
           gridColumn: "1 / -1",
-          gridRow: 2,
+          gridRow: bodyGridRow,
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 20,
@@ -1349,7 +1453,7 @@ var TableBody = ({
                     ...rowSty
                   },
                   children: safeColumns.map((col) => {
-                    const cellValue = row[col.dataIndex];
+                    const cellValue = col.dataIndex != null ? row[col.dataIndex] : void 0;
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
                     let zIndex = 0;
@@ -1407,7 +1511,10 @@ var TableBody = ({
                                 getRawRowKey,
                                 accentColor,
                                 isLoading: false,
-                                recordFingerprint
+                                recordFingerprint,
+                                onEdit,
+                                isEditing: editingCell?.rowKey === rk && editingCell?.columnKey === col.key,
+                                onEditComplete
                               }
                             )
                           }
@@ -1437,6 +1544,18 @@ function arrayMove(arr, from, to) {
   result.splice(to, 0, item);
   return result;
 }
+function flattenColumns(columns) {
+  const result = [];
+  for (const col of columns) {
+    if (col == null) continue;
+    if (col.children && col.children.length > 0) {
+      result.push(...flattenColumns(col.children));
+    } else {
+      result.push(col);
+    }
+  }
+  return result;
+}
 var SHIMMER_WIDTHS2 = [55, 70, 45, 80, 60, 50, 75, 65, 40, 72];
 var EMPTY_CLASSNAMES = {};
 var EMPTY_STYLES = {};
@@ -1479,7 +1598,9 @@ function BoltTable({
   rowStyle,
   disabledFilters,
   onCopy,
-  keepPinnedRowsAcrossPages
+  keepPinnedRowsAcrossPages,
+  onEdit,
+  onRowClick
 }) {
   const data = useMemo2(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1488,17 +1609,49 @@ function BoltTable({
   }, [rawData]);
   const initialColumns = useMemo2(() => {
     if (!Array.isArray(rawInitialColumns)) return STABLE_EMPTY_COLS;
-    const filtered = rawInitialColumns.filter(
+    const safe = rawInitialColumns.filter(
+      (col) => col != null && typeof col.key === "string"
+    );
+    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 [columns, setColumns] = useState2(initialColumns);
-  const [columnOrder, setColumnOrder] = useState2(
+  const headerGroups = useMemo2(() => {
+    if (!Array.isArray(rawInitialColumns)) return [];
+    const groups = [];
+    for (const col of rawInitialColumns) {
+      if (col != null && typeof col.key === "string" && col.children && col.children.length > 0) {
+        const leafKeys = flattenColumns([col]).filter((c) => c != null && typeof c.key === "string").map((c) => c.key);
+        if (leafKeys.length > 0) {
+          groups.push({
+            key: col.key,
+            title: col.title,
+            childKeys: leafKeys,
+            style: col.style,
+            className: col.className
+          });
+        }
+      }
+    }
+    return groups;
+  }, [rawInitialColumns]);
+  const hasColumnGroups = headerGroups.length > 0;
+  const groupedColumnKeySet = useMemo2(() => {
+    if (!hasColumnGroups) return null;
+    const keys = /* @__PURE__ */ new Set();
+    for (const g of headerGroups) {
+      for (const k of g.childKeys) keys.add(k);
+    }
+    return keys;
+  }, [headerGroups, hasColumnGroups]);
+  const [columns, setColumns] = useState3(initialColumns);
+  const [columnOrder, setColumnOrder] = useState3(
     () => initialColumns.map((c) => c.key)
   );
-  const [activeId, setActiveId] = useState2(null);
-  const [mounted, setMounted] = useState2(false);
+  const [activeId, setActiveId] = useState3(null);
+  const [mounted, setMounted] = useState3(false);
   React4.useEffect(() => {
     setMounted(true);
   }, []);
@@ -1516,7 +1669,7 @@ function BoltTable({
     setColumnOrder(initialColumnsRef.current.map((c) => c.key));
   }, [newFingerprint]);
   const safeWidth = (w, fallback = 150) => typeof w === "number" && Number.isFinite(w) ? w : fallback;
-  const [columnWidths, setColumnWidths] = useState2(
+  const [columnWidths, setColumnWidths] = useState3(
     () => /* @__PURE__ */ new Map()
   );
   const manuallyResizedRef = useRef4(/* @__PURE__ */ new Set());
@@ -1527,7 +1680,7 @@ function BoltTable({
     })),
     [columns, columnWidths]
   );
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState2(() => {
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState3(() => {
     if (expandable?.defaultExpandAllRows && data.length > 0) {
       return new Set(
         data.map((row, idx) => {
@@ -1553,7 +1706,7 @@ function BoltTable({
   }, [expandedKeysFingerprint, internalExpandedKeys]);
   const expandableRef = useRef4(expandable);
   expandableRef.current = expandable;
-  const toggleExpand = useCallback((key) => {
+  const toggleExpand = useCallback2((key) => {
     const exp = expandableRef.current;
     if (exp?.expandedRowKeys !== void 0) {
       const next = new Set(exp.expandedRowKeys);
@@ -1568,7 +1721,7 @@ function BoltTable({
       });
     }
   }, []);
-  const getRowKey = useCallback(
+  const getRowKey = useCallback2(
     (record, index) => {
       if (record == null) return String(index);
       try {
@@ -1584,7 +1737,7 @@ function BoltTable({
     },
     [rowKey]
   );
-  const getRawRowKey = useCallback(
+  const getRawRowKey = useCallback2(
     (record, index) => {
       if (record == null) return index;
       try {
@@ -1646,6 +1799,7 @@ function BoltTable({
         return /* @__PURE__ */ jsx5(
           "button",
           {
+            type: "button",
             onClick: (e) => {
               e.stopPropagation();
               toggleExpandRef.current(key);
@@ -1683,11 +1837,11 @@ function BoltTable({
   }, [rowSelection, columnsWithExpand]);
   const resizeOverlayRef = useRef4(null);
   const tableAreaRef = useRef4(null);
-  const [scrollAreaWidth, setScrollAreaWidth] = useState2(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState3(0);
   const prevScrollAreaWidthRef = useRef4(0);
   const roRef = useRef4(null);
   const rafRef = useRef4(null);
-  const tableAreaCallbackRef = useCallback((el) => {
+  const tableAreaCallbackRef = useCallback2((el) => {
     roRef.current?.disconnect();
     roRef.current = null;
     if (rafRef.current !== null) {
@@ -1745,12 +1899,23 @@ function BoltTable({
     };
   }, []);
   const resizeStateRef = useRef4(null);
+  const columnGroupMapRef = useRef4(/* @__PURE__ */ new Map());
+  useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const g of headerGroups) {
+      for (const k of g.childKeys) map.set(k, g.key);
+    }
+    for (const col of initialColumns) {
+      if (!map.has(col.key)) map.set(col.key, null);
+    }
+    columnGroupMapRef.current = map;
+  }, [headerGroups, initialColumns]);
   const overIdRef = useRef4(null);
   const dragActiveIdRef = useRef4(null);
   const ghostRef = useRef4(null);
   const onColumnOrderChangeRef = useRef4(onColumnOrderChange);
   onColumnOrderChangeRef.current = onColumnOrderChange;
-  const handleColumnDragStart = useCallback(
+  const handleColumnDragStart = useCallback2(
     (columnKey, e) => {
       if (columnKey === "__select__" || columnKey === "__expand__") return;
       const headerEl = e.currentTarget.closest(
@@ -1773,6 +1938,7 @@ function BoltTable({
       const grabStyle = document.createElement("style");
       grabStyle.textContent = "* { cursor: grabbing !important; }";
       document.head.appendChild(grabStyle);
+      const draggedGroup = columnGroupMapRef.current.get(columnKey);
       const onMove = (ev) => {
         if (ghost) {
           ghost.style.left = `${ev.clientX - offsetX}px`;
@@ -1788,6 +1954,11 @@ function BoltTable({
             h.removeAttribute("data-drag-over");
             return;
           }
+          const targetGroup = columnGroupMapRef.current.get(key);
+          if (draggedGroup !== targetGroup) {
+            h.removeAttribute("data-drag-over");
+            return;
+          }
           const r = h.getBoundingClientRect();
           if (ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top - 20 && ev.clientY <= r.bottom + 20) {
             newOverId = key;
@@ -1810,7 +1981,7 @@ function BoltTable({
         if (ghost) ghost.style.display = "none";
         const currentOverId = overIdRef.current;
         const currentActiveId = dragActiveIdRef.current;
-        if (currentOverId && currentActiveId && currentOverId !== currentActiveId) {
+        if (currentOverId && currentActiveId && currentOverId !== currentActiveId && columnGroupMapRef.current.get(currentActiveId) === columnGroupMapRef.current.get(currentOverId)) {
           React4.startTransition(() => {
             setColumnOrder((items) => {
               const oldIndex = items.indexOf(currentActiveId);
@@ -1977,9 +2148,9 @@ function BoltTable({
     const column = columns.find((col) => col.key === columnKey);
     if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
   };
-  const [internalRowPinning, setInternalRowPinning] = useState2({ top: [], bottom: [] });
+  const [internalRowPinning, setInternalRowPinning] = useState3({ top: [], bottom: [] });
   const resolvedRowPinning = rowPinning === true ? internalRowPinning : rowPinning && typeof rowPinning === "object" ? rowPinning : void 0;
-  const handleRowPin = useCallback((rk, pinned) => {
+  const handleRowPin = useCallback2((rk, pinned) => {
     if (onRowPin) {
       onRowPin(rk, pinned);
       return;
@@ -1997,8 +2168,8 @@ function BoltTable({
   }, [onRowPin, rowPinning]);
   const onSortChangeRef = useRef4(onSortChange);
   onSortChangeRef.current = onSortChange;
-  const [sortState, setSortState] = useState2({ key: "", direction: null });
-  const handleSort = useCallback(
+  const [sortState, setSortState] = useState3({ key: "", direction: null });
+  const handleSort = useCallback2(
     (columnKey, direction) => {
       setSortState((prev) => {
         let next;
@@ -2014,10 +2185,10 @@ function BoltTable({
     },
     []
   );
-  const [columnFilters, setColumnFilters] = useState2(
+  const [columnFilters, setColumnFilters] = useState3(
     {}
   );
-  const handleColumnFilter = useCallback(
+  const handleColumnFilter = useCallback2(
     (columnKey, value) => {
       setColumnFilters((prev) => {
         const next = { ...prev };
@@ -2029,7 +2200,7 @@ function BoltTable({
     },
     [onFilterChange]
   );
-  const handleClearFilter = useCallback(
+  const handleClearFilter = useCallback2(
     (columnKey) => {
       handleColumnFilter(columnKey, "");
     },
@@ -2050,7 +2221,7 @@ function BoltTable({
             try {
               const col = columnsLookupRef.current.find((c) => c.key === key);
               if (typeof col?.filterFn === "function") {
-                return col.filterFn(columnFilters[key], row, col.dataIndex);
+                return col.filterFn(columnFilters[key], row, col.dataIndex ?? key);
               }
               const cellVal = String(row[key] ?? "").toLowerCase();
               return cellVal.includes(columnFilters[key].toLowerCase());
@@ -2156,13 +2327,17 @@ function BoltTable({
     () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
     [resolvedRowPinning?.bottom]
   );
-  const [cellContextMenu, setCellContextMenu] = useState2(null);
+  const [editingCell, setEditingCell] = useState3(null);
+  const handleEditComplete = useCallback2(() => {
+    setEditingCell(null);
+  }, []);
+  const [cellContextMenu, setCellContextMenu] = useState3(null);
   const cellMenuRef = useRef4(null);
   const cellLongPressTimer = useRef4(
     null
   );
   const cellTouchStart = useRef4(null);
-  const cancelCellLongPress = useCallback(() => {
+  const cancelCellLongPress = useCallback2(() => {
     if (cellLongPressTimer.current) {
       clearTimeout(cellLongPressTimer.current);
       cellLongPressTimer.current = null;
@@ -2192,8 +2367,8 @@ function BoltTable({
     tableAreaRef.current?.scrollTo({ top: 0 });
   }, [columnFiltersKey]);
   const DEFAULT_PAGE_SIZE = 15;
-  const [internalPage, setInternalPage] = useState2(1);
-  const [internalPageSize, setInternalPageSize] = useState2(DEFAULT_PAGE_SIZE);
+  const [internalPage, setInternalPage] = useState3(1);
+  const [internalPageSize, setInternalPageSize] = useState3(DEFAULT_PAGE_SIZE);
   const dataLength = data.length;
   const autoPagination = pagination === void 0 && dataLength > DEFAULT_PAGE_SIZE;
   const pgEnabled = pagination === false ? false : !!pagination || autoPagination;
@@ -2237,7 +2412,7 @@ function BoltTable({
   }, [shimmerData, infiniteLoadingShimmer, paginatedData]);
   const measuredExpandedHeights = useRef4(/* @__PURE__ */ new Map());
   const expandedRowMeasureRafRef = useRef4(null);
-  const handleExpandedRowResize = useCallback(
+  const handleExpandedRowResize = useCallback2(
     (rk, contentHeight) => {
       const prev = measuredExpandedHeights.current.get(rk);
       const rounded = Math.round(contentHeight);
@@ -2366,7 +2541,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;
@@ -2423,6 +2598,7 @@ function BoltTable({
           [data-bt-header][data-drag-over] {
             border: 1px dashed ${accentColor} !important;
           }
+          ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
         ` }),
           /* @__PURE__ */ jsx5(
             "div",
@@ -2561,7 +2737,7 @@ function BoltTable({
                         style: {
                           display: "grid",
                           gridTemplateColumns,
-                          gridTemplateRows: isEmpty ? "36px 1fr" : `36px ${virtualTotalSize}px`,
+                          gridTemplateRows: isEmpty ? hasColumnGroups ? "36px 36px 1fr" : "36px 1fr" : hasColumnGroups ? `36px 36px ${virtualTotalSize}px` : `36px ${virtualTotalSize}px`,
                           minWidth: `${totalTableWidth}px`,
                           width: "100%",
                           position: "relative",
@@ -2579,7 +2755,8 @@ function BoltTable({
                           const hasCopy = !!col?.copy;
                           const hasRowPin = !!rowPinning;
                           const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
-                          if (!hasCopy && !hasRowPin && !hasCellItems) return;
+                          const hasEdit = !!col?.editable && !col?.render && !!onEdit;
+                          if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit) return;
                           e.preventDefault();
                           setCellContextMenu({
                             x: Math.min(e.clientX, window.innerWidth - 200),
@@ -2608,7 +2785,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),
@@ -2627,125 +2805,209 @@ function BoltTable({
                         },
                         onTouchEnd: cancelCellLongPress,
                         onTouchCancel: cancelCellLongPress,
-                        children: [
-                          orderedColumns.map((column, visualIndex) => {
-                            if (column.key === "__select__" && rowSelection) {
-                              return /* @__PURE__ */ jsx5(
-                                "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__ */ jsx5(
-                                    "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__ */ jsx5(
-                                "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__ */ jsx5(
-                              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__ */ jsx5(
+                                  "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__ */ jsx5(
+                                      "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__ */ jsx5(
+                                  "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__ */ jsx5(
+                                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__ */ jsx5(
                             "div",
                             {
@@ -2812,7 +3074,11 @@ function BoltTable({
                               gridTemplateColumns,
                               headerHeight: HEADER_HEIGHT,
                               rowClassName,
-                              rowStyle
+                              rowStyle,
+                              bodyGridRow: hasColumnGroups ? 3 : 2,
+                              onEdit,
+                              editingCell,
+                              onEditComplete: handleEditComplete
                             }
                           )
                         ]
@@ -2826,6 +3092,7 @@ function BoltTable({
           pgEnabled && /* @__PURE__ */ jsxs5(
             "div",
             {
+              className: classNames.pagination ?? "",
               style: {
                 display: "flex",
                 height: 36,
@@ -2837,27 +3104,42 @@ function BoltTable({
                 fontSize: 12,
                 backdropFilter: "blur(8px)",
                 backgroundColor: "rgba(128,128,128,0.06)",
-                gap: 12
+                gap: 12,
+                ...styles.pagination
               },
               children: [
                 /* @__PURE__ */ jsx5("div", { style: { display: "flex", flex: "1 1 0%", alignItems: "center" }, children: (() => {
                   const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
                   const rangeEnd = Math.min(currentPage * pageSize, total);
-                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ jsxs5("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    "Showing",
-                    " ",
-                    pagination.showTotal(total, [rangeStart, rangeEnd]),
-                    " of",
-                    " ",
-                    total,
-                    " items"
-                  ] }) : /* @__PURE__ */ jsxs5("span", { style: { color: "GrayText", fontSize: 12 }, children: [
-                    rangeStart,
-                    "\u2013",
-                    rangeEnd,
-                    " of ",
-                    total
-                  ] });
+                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ jsxs5(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        "Showing",
+                        " ",
+                        pagination.showTotal(total, [rangeStart, rangeEnd]),
+                        " of",
+                        " ",
+                        total,
+                        " items"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxs5(
+                    "span",
+                    {
+                      className: classNames.paginationInfo ?? "",
+                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
+                      children: [
+                        rangeStart,
+                        "\u2013",
+                        rangeEnd,
+                        " of ",
+                        total
+                      ]
+                    }
+                  );
                 })() }),
                 /* @__PURE__ */ jsxs5(
                   "div",
@@ -2873,8 +3155,10 @@ function BoltTable({
                       /* @__PURE__ */ jsx5(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2887,7 +3171,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "First page",
                           children: icons?.chevronsLeft ?? /* @__PURE__ */ jsx5(ChevronsLeftIcon, { style: { width: 12, height: 12 } })
@@ -2896,8 +3181,10 @@ function BoltTable({
                       /* @__PURE__ */ jsx5(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(currentPage - 1),
                           disabled: currentPage === 1,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2910,7 +3197,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Previous page",
                           children: icons?.chevronLeft ?? /* @__PURE__ */ jsx5(ChevronLeftIcon, { style: { width: 12, height: 12 } })
@@ -2933,9 +3221,12 @@ function BoltTable({
                             page
                           );
                         }
+                        const isActivePage = page === currentPage;
                         return /* @__PURE__ */ jsx5(
                           "button",
                           {
+                            type: "button",
+                            className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
                             style: {
                               display: "inline-flex",
                               height: 24,
@@ -2947,9 +3238,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
@@ -2960,8 +3253,10 @@ function BoltTable({
                       /* @__PURE__ */ jsx5(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(currentPage + 1),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2974,7 +3269,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Next page",
                           children: icons?.chevronRight ?? /* @__PURE__ */ jsx5(ChevronRightIcon, { style: { width: 12, height: 12 } })
@@ -2983,8 +3279,10 @@ function BoltTable({
                       /* @__PURE__ */ jsx5(
                         "button",
                         {
+                          type: "button",
                           onClick: () => handlePageChange(totalPages),
                           disabled: currentPage === totalPages,
+                          className: classNames.paginationButton ?? "",
                           style: {
                             display: "inline-flex",
                             height: 24,
@@ -2997,7 +3295,8 @@ function BoltTable({
                             background: "none",
                             border: "none",
                             padding: 0,
-                            color: "inherit"
+                            color: "inherit",
+                            ...styles.paginationButton
                           },
                           title: "Last page",
                           children: icons?.chevronsRight ?? /* @__PURE__ */ jsx5(ChevronsRightIcon, { style: { width: 12, height: 12 } })
@@ -3021,6 +3320,7 @@ function BoltTable({
                       {
                         value: pageSize,
                         onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                        className: classNames.paginationSelect ?? "",
                         style: {
                           cursor: "pointer",
                           borderRadius: 4,
@@ -3032,7 +3332,8 @@ function BoltTable({
                           fontSize: 12,
                           height: 24,
                           background: "inherit",
-                          color: "inherit"
+                          color: "inherit",
+                          ...styles.paginationSelect
                         },
                         children: (typeof pagination === "object" && pagination?.pageSizeOptions ? pagination.pageSizeOptions : [10, 15, 20, 25, 50, 100]).map((size) => /* @__PURE__ */ jsxs5("option", { value: size, children: [
                           size,
@@ -3127,6 +3428,7 @@ function BoltTable({
       );
       const hasCopy = !!menuCol?.copy;
       const hasRowPin = !!rowPinning;
+      const hasEdit = !!menuCol?.editable && !menuCol?.render && !!onEdit;
       let menuRecord;
       let menuRowIndex = 0;
       const allRows = [
@@ -3143,7 +3445,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%",
@@ -3183,6 +3485,7 @@ function BoltTable({
                 /* @__PURE__ */ jsxs5(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": true,
                     style: btnStyle,
                     onClick: () => {
@@ -3211,6 +3514,7 @@ function BoltTable({
                 /* @__PURE__ */ jsxs5(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": true,
                     style: btnStyle,
                     onClick: () => {
@@ -3242,7 +3546,40 @@ function BoltTable({
                   }
                 )
               ] }),
-              hasRowPin && hasCopy && /* @__PURE__ */ jsx5(
+              hasRowPin && (hasCopy || hasEdit) && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    borderTop: "1px solid rgba(128,128,128,0.2)",
+                    margin: "4px 0"
+                  }
+                }
+              ),
+              hasEdit && /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  "data-bt-ctx-item": true,
+                  style: btnStyle,
+                  onClick: () => {
+                    setEditingCell({
+                      rowKey: cellContextMenu.rowKey,
+                      columnKey: cellContextMenu.columnKey
+                    });
+                    setCellContextMenu(null);
+                  },
+                  children: [
+                    icons?.edit ?? /* @__PURE__ */ jsx5(
+                      PencilIcon,
+                      {
+                        style: { width: 14, height: 14, flexShrink: 0 }
+                      }
+                    ),
+                    "Edit"
+                  ]
+                }
+              ),
+              (hasEdit || hasRowPin) && hasCopy && /* @__PURE__ */ jsx5(
                 "div",
                 {
                   style: {
@@ -3254,6 +3591,7 @@ function BoltTable({
               hasCopy && menuRecord && menuCol && /* @__PURE__ */ jsxs5(
                 "button",
                 {
+                  type: "button",
                   "data-bt-ctx-item": true,
                   style: btnStyle,
                   onClick: () => {
@@ -3274,7 +3612,7 @@ function BoltTable({
                 }
               ),
               menuCol?.columnCellContextMenuItems && menuCol.columnCellContextMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment4, { children: [
-                (hasCopy || hasRowPin) && /* @__PURE__ */ jsx5(
+                (hasCopy || hasRowPin || hasEdit) && /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {
@@ -3286,6 +3624,7 @@ function BoltTable({
                 menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ jsxs5(
                   "button",
                   {
+                    type: "button",
                     "data-bt-ctx-item": "",
                     disabled: item.disabled,
                     style: {