bolt-table 0.1.17 → 0.1.19

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. */
@@ -218,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -263,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -367,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 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 ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, 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. */
@@ -218,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -263,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -367,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 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 ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, 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";
@@ -1085,7 +1085,9 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1137,6 +1139,8 @@ var TableBody = ({
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
+            const rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
+            const rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "div",
               {
@@ -1144,12 +1148,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
@@ -1271,15 +1277,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1376,15 +1385,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1502,7 +1514,9 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  rowClassName,
+  rowStyle
 }) {
   const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
   const [columnOrder, setColumnOrder] = (0, import_react4.useState)(
@@ -2489,7 +2503,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 +2532,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 +2665,7 @@ function BoltTable({
                                 filterValue: columnFilters[column.key] ?? "",
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
-                                customContextMenuItems: columnContextMenuItems
+                                customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
                               },
                               column.key
                             );
@@ -2717,7 +2733,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]
@@ -3174,7 +3192,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";
@@ -1051,7 +1051,9 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1103,6 +1105,8 @@ var TableBody = ({
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
+            const rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
+            const rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
             return /* @__PURE__ */ jsx4(
               "div",
               {
@@ -1110,12 +1114,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ jsx4(
                   "div",
@@ -1237,15 +1243,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1342,15 +1351,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1468,7 +1480,9 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  rowClassName,
+  rowStyle
 }) {
   const [columns, setColumns] = useState2(initialColumns);
   const [columnOrder, setColumnOrder] = useState2(
@@ -2455,7 +2469,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 +2498,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 +2631,7 @@ function BoltTable({
                                 filterValue: columnFilters[column.key] ?? "",
                                 onFilter: handleColumnFilter,
                                 onClearFilter: handleClearFilter,
-                                customContextMenuItems: columnContextMenuItems
+                                customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
                               },
                               column.key
                             );
@@ -2683,7 +2699,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]
@@ -3140,7 +3158,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.19",
   "description": "Virtualized React table with column drag & drop, pinning, resizing, sorting, filtering, and pagination.",
   "license": "MIT",
   "main": "./dist/index.js",