bolt-table 0.1.17 → 0.1.18

package/dist/index.d.mts

@@ -67,6 +67,25 @@ interface ColumnType<T = unknown> {
      * `true` copies the raw value; pass a function for custom copy text.
      */
     copy?: boolean | ((value: unknown, record: T, index: number) => string);
+    /** Custom context menu items appended to this column's header right-click menu. */
+    columnHeaderContextMenuItems?: ColumnContextMenuItem[];
+    /** Custom context menu items appended to every cell's right-click menu in this column. */
+    columnCellContextMenuItems?: CellContextMenuItem<T>[];
+}
+/** A single item in the cell right-click context menu (column-level). */
+interface CellContextMenuItem<T = unknown> {
+    /** Unique identifier for this menu item, used as the React `key`. */
+    key: string;
+    /** The label shown in the menu. Can be a string or React node. */
+    label: React.ReactNode;
+    /** Optional icon shown to the left of the label. */
+    icon?: React.ReactNode;
+    /** When `true`, the label renders in red to indicate a destructive action. */
+    danger?: boolean;
+    /** When `true`, the item is grayed out and click handler is not called. */
+    disabled?: boolean;
+    /** Called when the user clicks this menu item. Receives the column key, row record, and row index. */
+    onClick: (columnKey: string, record: T, rowIndex: number) => void;
 }
 /** A single item in the column header right-click context menu. */
 interface ColumnContextMenuItem {
@@ -201,11 +220,6 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly onEndReachedThreshold?: number;
     /** When true and data is empty, shows shimmer skeleton rows. With data, appends shimmer rows at bottom. */
     readonly isLoading?: boolean;
-    /** Scroll indicator configuration (reserved for future use). */
-    readonly scrollIndicators?: {
-        vertical?: boolean;
-        horizontal?: boolean;
-    };
     /** Called when the user changes sort direction. Provide for server-side sorting. */
     readonly onSortChange?: (columnKey: string, direction: SortDirection) => void;
     /** Called when the user applies or clears a column filter. Provide for server-side filtering. */
@@ -370,4 +384,4 @@ interface TableBodyProps {
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };

package/dist/index.d.ts

@@ -67,6 +67,25 @@ interface ColumnType<T = unknown> {
      * `true` copies the raw value; pass a function for custom copy text.
      */
     copy?: boolean | ((value: unknown, record: T, index: number) => string);
+    /** Custom context menu items appended to this column's header right-click menu. */
+    columnHeaderContextMenuItems?: ColumnContextMenuItem[];
+    /** Custom context menu items appended to every cell's right-click menu in this column. */
+    columnCellContextMenuItems?: CellContextMenuItem<T>[];
+}
+/** A single item in the cell right-click context menu (column-level). */
+interface CellContextMenuItem<T = unknown> {
+    /** Unique identifier for this menu item, used as the React `key`. */
+    key: string;
+    /** The label shown in the menu. Can be a string or React node. */
+    label: React.ReactNode;
+    /** Optional icon shown to the left of the label. */
+    icon?: React.ReactNode;
+    /** When `true`, the label renders in red to indicate a destructive action. */
+    danger?: boolean;
+    /** When `true`, the item is grayed out and click handler is not called. */
+    disabled?: boolean;
+    /** Called when the user clicks this menu item. Receives the column key, row record, and row index. */
+    onClick: (columnKey: string, record: T, rowIndex: number) => void;
 }
 /** A single item in the column header right-click context menu. */
 interface ColumnContextMenuItem {
@@ -201,11 +220,6 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly onEndReachedThreshold?: number;
     /** When true and data is empty, shows shimmer skeleton rows. With data, appends shimmer rows at bottom. */
     readonly isLoading?: boolean;
-    /** Scroll indicator configuration (reserved for future use). */
-    readonly scrollIndicators?: {
-        vertical?: boolean;
-        horizontal?: boolean;
-    };
     /** Called when the user changes sort direction. Provide for server-side sorting. */
     readonly onSortChange?: (columnKey: string, direction: SortDirection) => void;
     /** Called when the user applies or clears a column filter. Provide for server-side filtering. */
@@ -370,4 +384,4 @@ interface TableBodyProps {
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };

package/dist/index.js

@@ -713,7 +713,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;
+    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;
   }
 );
 DraggableHeader.displayName = "DraggableHeader";
@@ -2489,7 +2489,8 @@ function BoltTable({
                           );
                           const hasCopy = col?.copy;
                           const hasRowPin = !!onRowPin;
-                          if (!hasCopy && !hasRowPin) return;
+                          const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
+                          if (!hasCopy && !hasRowPin && !hasCellItems) return;
                           e.preventDefault();
                           setCellContextMenu({
                             x: Math.min(e.clientX, window.innerWidth - 200),
@@ -2517,7 +2518,8 @@ function BoltTable({
                             );
                             const hasCopy = col?.copy;
                             const hasRowPin = !!onRowPin;
-                            if (!hasCopy && !hasRowPin) return;
+                            const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
+                            if (!hasCopy && !hasRowPin && !hasCellItems) return;
                             setCellContextMenu({
                               x: Math.min(touch.clientX, window.innerWidth - 200),
                               y: Math.min(touch.clientY, window.innerHeight - 200),
@@ -2649,7 +2651,7 @@ function BoltTable({
                                 filterValue: columnFilters[column.key] ?? "",
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
-                                customContextMenuItems: columnContextMenuItems
+                                customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
                               },
                               column.key
                             );
@@ -3174,7 +3176,42 @@ function BoltTable({
                     "Copy"
                   ]
                 }
-              )
+              ),
+              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)(
+                  "div",
+                  {
+                    style: {
+                      borderTop: "1px solid rgba(128,128,128,0.2)",
+                      margin: "4px 0"
+                    }
+                  }
+                ),
+                menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    "data-bt-ctx-item": "",
+                    disabled: item.disabled,
+                    style: {
+                      ...btnStyle,
+                      cursor: item.disabled ? "not-allowed" : "pointer",
+                      opacity: item.disabled ? 0.5 : 1,
+                      color: item.danger ? "#ef4444" : "inherit"
+                    },
+                    onClick: () => {
+                      if (menuRecord) {
+                        item.onClick(menuCol.key, menuRecord, menuRowIndex);
+                      }
+                      setCellContextMenu(null);
+                    },
+                    children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { display: "flex", width: 14, height: 14, alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: item.icon }),
+                      item.label
+                    ]
+                  },
+                  item.key
+                ))
+              ] })
             ]
           }
         ),

package/dist/index.mjs

@@ -679,7 +679,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;
+    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;
   }
 );
 DraggableHeader.displayName = "DraggableHeader";
@@ -2455,7 +2455,8 @@ function BoltTable({
                           );
                           const hasCopy = col?.copy;
                           const hasRowPin = !!onRowPin;
-                          if (!hasCopy && !hasRowPin) return;
+                          const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
+                          if (!hasCopy && !hasRowPin && !hasCellItems) return;
                           e.preventDefault();
                           setCellContextMenu({
                             x: Math.min(e.clientX, window.innerWidth - 200),
@@ -2483,7 +2484,8 @@ function BoltTable({
                             );
                             const hasCopy = col?.copy;
                             const hasRowPin = !!onRowPin;
-                            if (!hasCopy && !hasRowPin) return;
+                            const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
+                            if (!hasCopy && !hasRowPin && !hasCellItems) return;
                             setCellContextMenu({
                               x: Math.min(touch.clientX, window.innerWidth - 200),
                               y: Math.min(touch.clientY, window.innerHeight - 200),
@@ -2615,7 +2617,7 @@ function BoltTable({
                                 filterValue: columnFilters[column.key] ?? "",
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
-                                customContextMenuItems: columnContextMenuItems
+                                customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
                               },
                               column.key
                             );
@@ -3140,7 +3142,42 @@ function BoltTable({
                     "Copy"
                   ]
                 }
-              )
+              ),
+              menuCol?.columnCellContextMenuItems && menuCol.columnCellContextMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+                (hasCopy || hasRowPin) && /* @__PURE__ */ jsx5(
+                  "div",
+                  {
+                    style: {
+                      borderTop: "1px solid rgba(128,128,128,0.2)",
+                      margin: "4px 0"
+                    }
+                  }
+                ),
+                menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    "data-bt-ctx-item": "",
+                    disabled: item.disabled,
+                    style: {
+                      ...btnStyle,
+                      cursor: item.disabled ? "not-allowed" : "pointer",
+                      opacity: item.disabled ? 0.5 : 1,
+                      color: item.danger ? "#ef4444" : "inherit"
+                    },
+                    onClick: () => {
+                      if (menuRecord) {
+                        item.onClick(menuCol.key, menuRecord, menuRowIndex);
+                      }
+                      setCellContextMenu(null);
+                    },
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx5("span", { style: { display: "flex", width: 14, height: 14, alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: item.icon }),
+                      item.label
+                    ]
+                  },
+                  item.key
+                ))
+              ] })
             ]
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolt-table",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Virtualized React table with column drag & drop, pinning, resizing, sorting, filtering, and pagination.",
   "license": "MIT",
   "main": "./dist/index.js",