bolt-table 0.1.27 → 0.1.28

package/dist/index.d.mts

@@ -281,6 +281,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly globalSearchValue?: string;
     /** Called when the global search value changes. */
     readonly onGlobalSearchChange?: (value: string) => void;
+    /** Extra content rendered in the toolbar between the search bar and the column-settings button. */
+    readonly toolbarContent?: React$1.ReactNode;
+    /** Label for the column-settings button. Defaults to "Columns". */
+    readonly columnSettingsLabel?: React$1.ReactNode;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -348,7 +352,7 @@ interface StylesTypes {
     /** Inline styles for the "X–Y of Z" info text. */
     paginationInfo?: CSSProperties;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, 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, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, 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, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -483,6 +487,8 @@ interface TableBodyProps {
     enableDynamicRowHeight?: boolean;
     /** Called when a row's measured height changes. Used by the parent to update the virtualizer. */
     onRowHeightChange?: (index: number, height: number) => void;
+    /** Maps column key → 1-based CSS grid column index in the full (non-virtualized) grid. Required for correct placement when column virtualization is enabled. */
+    columnGridIndexMap?: Map<string, number>;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 

package/dist/index.d.ts

@@ -281,6 +281,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly globalSearchValue?: string;
     /** Called when the global search value changes. */
     readonly onGlobalSearchChange?: (value: string) => void;
+    /** Extra content rendered in the toolbar between the search bar and the column-settings button. */
+    readonly toolbarContent?: React$1.ReactNode;
+    /** Label for the column-settings button. Defaults to "Columns". */
+    readonly columnSettingsLabel?: React$1.ReactNode;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -348,7 +352,7 @@ interface StylesTypes {
     /** Inline styles for the "X–Y of Z" info text. */
     paginationInfo?: CSSProperties;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, 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, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, 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, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -483,6 +487,8 @@ interface TableBodyProps {
     enableDynamicRowHeight?: boolean;
     /** Called when a row's measured height changes. Used by the parent to update the virtualizer. */
     onRowHeightChange?: (index: number, height: number) => void;
+    /** Maps column key → 1-based CSS grid column index in the full (non-virtualized) grid. Required for correct placement when column virtualization is enabled. */
+    columnGridIndexMap?: Map<string, number>;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 

package/dist/index.js

@@ -1173,7 +1173,8 @@ var TableBody = ({
   editingCell,
   onEditComplete,
   enableDynamicRowHeight = false,
-  onRowHeightChange
+  onRowHeightChange,
+  columnGridIndexMap
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1196,8 +1197,9 @@ var TableBody = ({
       let zIndex = 0;
       if (col.key === "__select__" || col.key === "__expand__") zIndex = 11;
       else if (isPinned) zIndex = 2;
+      const gridCol = columnGridIndexMap?.get(col.key) ?? colIndex + 1;
       const style = {
-        gridColumn: colIndex + 1,
+        gridColumn: gridCol,
         gridRow: bodyGridRow,
         height: `${totalSize}px`,
         position: isPinned ? "sticky" : "relative",
@@ -1212,7 +1214,7 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow]);
+  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow, columnGridIndexMap]);
   if (safeData.length === 0 || safeColumns.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     columnStyles.map((colStyle, colIndex) => {
@@ -1749,7 +1751,9 @@ function BoltTable({
   showColumnSettings = true,
   hideGlobalSearch = false,
   globalSearchValue,
-  onGlobalSearchChange
+  onGlobalSearchChange,
+  toolbarContent,
+  columnSettingsLabel
 }) {
   const data = (0, import_react4.useMemo)(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -2402,6 +2406,11 @@ function BoltTable({
     }
     return offsets;
   }, [leftPinned, rightPinned]);
+  const columnGridIndexMap = (0, import_react4.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    orderedColumns.forEach((col, i) => map.set(col.key, i + 1));
+    return map;
+  }, [orderedColumns]);
   const handleTogglePin = (columnKey, pinned) => {
     setColumns(
       (prev) => prev.map((col) => col.key === columnKey ? { ...col, pinned } : col)
@@ -3049,6 +3058,7 @@ function BoltTable({
                     ]
                   }
                 ),
+                toolbarContent,
                 showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                     "button",
@@ -3071,7 +3081,7 @@ function BoltTable({
                       title: "Column settings",
                       children: [
                         icons?.columns ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnsIcon, { style: { width: 14, height: 14 } }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Columns" })
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: columnSettingsLabel ?? "Columns" })
                       ]
                     }
                   ),
@@ -3644,7 +3654,8 @@ function BoltTable({
                               editingCell,
                               onEditComplete: handleEditComplete,
                               enableDynamicRowHeight,
-                              onRowHeightChange: handleRowHeightChange
+                              onRowHeightChange: handleRowHeightChange,
+                              columnGridIndexMap
                             }
                           )
                         ]

package/dist/index.mjs

@@ -1145,7 +1145,8 @@ var TableBody = ({
   editingCell,
   onEditComplete,
   enableDynamicRowHeight = false,
-  onRowHeightChange
+  onRowHeightChange,
+  columnGridIndexMap
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1168,8 +1169,9 @@ var TableBody = ({
       let zIndex = 0;
       if (col.key === "__select__" || col.key === "__expand__") zIndex = 11;
       else if (isPinned) zIndex = 2;
+      const gridCol = columnGridIndexMap?.get(col.key) ?? colIndex + 1;
       const style = {
-        gridColumn: colIndex + 1,
+        gridColumn: gridCol,
         gridRow: bodyGridRow,
         height: `${totalSize}px`,
         position: isPinned ? "sticky" : "relative",
@@ -1184,7 +1186,7 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow]);
+  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow, columnGridIndexMap]);
   if (safeData.length === 0 || safeColumns.length === 0) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     columnStyles.map((colStyle, colIndex) => {
@@ -1721,7 +1723,9 @@ function BoltTable({
   showColumnSettings = true,
   hideGlobalSearch = false,
   globalSearchValue,
-  onGlobalSearchChange
+  onGlobalSearchChange,
+  toolbarContent,
+  columnSettingsLabel
 }) {
   const data = useMemo2(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -2374,6 +2378,11 @@ function BoltTable({
     }
     return offsets;
   }, [leftPinned, rightPinned]);
+  const columnGridIndexMap = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    orderedColumns.forEach((col, i) => map.set(col.key, i + 1));
+    return map;
+  }, [orderedColumns]);
   const handleTogglePin = (columnKey, pinned) => {
     setColumns(
       (prev) => prev.map((col) => col.key === columnKey ? { ...col, pinned } : col)
@@ -3021,6 +3030,7 @@ function BoltTable({
                     ]
                   }
                 ),
+                toolbarContent,
                 showColumnSettings && /* @__PURE__ */ jsxs5("div", { style: { position: "relative", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsxs5(
                     "button",
@@ -3043,7 +3053,7 @@ function BoltTable({
                       title: "Column settings",
                       children: [
                         icons?.columns ?? /* @__PURE__ */ jsx5(ColumnsIcon, { style: { width: 14, height: 14 } }),
-                        /* @__PURE__ */ jsx5("span", { children: "Columns" })
+                        /* @__PURE__ */ jsx5("span", { children: columnSettingsLabel ?? "Columns" })
                       ]
                     }
                   ),
@@ -3616,7 +3626,8 @@ function BoltTable({
                               editingCell,
                               onEditComplete: handleEditComplete,
                               enableDynamicRowHeight,
-                              onRowHeightChange: handleRowHeightChange
+                              onRowHeightChange: handleRowHeightChange,
+                              columnGridIndexMap
                             }
                           )
                         ]

package/package.json

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