bolt-table 0.1.12 → 0.1.13

package/dist/index.d.mts

@@ -569,6 +569,38 @@ interface PaginationType {
      */
     showTotal?: (total: number, range: [number, number]) => ReactNode;
 }
+/**
+ * Configuration for row pinning.
+ * When provided, the specified rows are rendered as sticky rows at the top
+ * and/or bottom of the table body, remaining visible during vertical scroll.
+ *
+ * Pinned rows are excluded from pagination — they are always visible regardless
+ * of which page the user is on. Filtering still applies: if a pinned row's key
+ * doesn't exist in the (filtered) data, it simply won't appear.
+ *
+ * @example
+ * // Pin two rows to the top and one to the bottom
+ * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
+ *
+ * @example
+ * // Controlled pinning — manage pinned keys in parent state
+ * const [pinning, setPinning] = useState<RowPinningConfig>({ top: ['header-row'] });
+ * <BoltTable rowPinning={pinning} ... />
+ */
+interface RowPinningConfig {
+    /**
+     * Row keys to pin at the top of the table.
+     * These rows stick below the column headers during vertical scroll.
+     * Order is preserved — rows are rendered in the order listed here.
+     */
+    top?: React.Key[];
+    /**
+     * Row keys to pin at the bottom of the table.
+     * These rows stick to the bottom of the visible area during vertical scroll.
+     * Order is preserved — rows are rendered in the order listed here.
+     */
+    bottom?: React.Key[];
+}
 /**
  * The base type for a row record in BoltTable.
  * All row data objects must be indexable by string keys.
@@ -910,6 +942,17 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
      * }}
      */
     readonly rowSelection?: RowSelectionConfig<T>;
+    /**
+     * Row pinning configuration. When provided, the specified rows are rendered
+     * as sticky rows at the top and/or bottom of the table body.
+     *
+     * Pinned rows transcend pagination — they are always visible regardless of
+     * which page the user is on. Filtering still applies.
+     *
+     * @example
+     * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
+     */
+    readonly rowPinning?: RowPinningConfig;
     /**
      * Called when the user scrolls near the bottom of the table.
      * Use this for infinite scroll / load-more behavior.
@@ -1106,6 +1149,11 @@ interface ClassNamesTypes {
      * Does not affect the row itself, only the expanded panel.
      */
     expandedRow?: string;
+    /**
+     * Applied to each pinned row's wrapper div (the grid row containing all cells).
+     * Use this to add a border, background, or separator for pinned rows.
+     */
+    pinnedRow?: string;
 }
 /**
  * Inline style overrides for specific regions of BoltTable.
@@ -1146,6 +1194,17 @@ interface StylesTypes {
     pinnedCell?: CSSProperties;
     /** Inline styles for the expanded row content panel */
     expandedRow?: CSSProperties;
+    /** Inline styles for pinned row wrappers (the grid row containing all cells) */
+    pinnedRow?: CSSProperties;
+    /**
+     * CSS color string for the background of pinned row cells.
+     * Should be opaque so that scrolling content behind pinned rows is hidden.
+     * Falls back to `pinnedBg` if not set.
+     *
+     * @example
+     * pinnedRowBg: 'rgba(255, 255, 255, 0.98)'
+     */
+    pinnedRowBg?: string;
     /**
      * CSS color string applied as the background of hovered rows.
      * Defaults to `hsl(var(--muted) / 0.5)` if omitted.
@@ -1210,7 +1269,7 @@ interface StylesTypes {
  *   autoHeight={false}
  * />
  */
-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, 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, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the DraggableHeader component.
@@ -1569,6 +1628,28 @@ interface TableBodyProps {
      * maxExpandedRowHeight={300}
      */
     maxExpandedRowHeight?: number;
+    /**
+     * Rows pinned to the top of the table body.
+     * Rendered as non-virtualized sticky rows below the column headers.
+     */
+    pinnedTopData?: DataRecord[];
+    /**
+     * Rows pinned to the bottom of the table body.
+     * Rendered as non-virtualized sticky rows at the bottom of the visible area.
+     */
+    pinnedBottomData?: DataRecord[];
+    /**
+     * The CSS `gridTemplateColumns` string matching the parent grid.
+     * Needed for pinned row sub-grids to align with the main column layout.
+     */
+    gridTemplateColumns?: string;
+    /**
+     * Height of the column header row in pixels.
+     * Used to position the sticky top pinned rows below the headers.
+     *
+     * @default 36
+     */
+    headerHeight?: number;
 }
 /**
  * TableBody — the virtualized body renderer for BoltTable.
@@ -1590,4 +1671,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 RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };

package/dist/index.d.ts

@@ -569,6 +569,38 @@ interface PaginationType {
      */
     showTotal?: (total: number, range: [number, number]) => ReactNode;
 }
+/**
+ * Configuration for row pinning.
+ * When provided, the specified rows are rendered as sticky rows at the top
+ * and/or bottom of the table body, remaining visible during vertical scroll.
+ *
+ * Pinned rows are excluded from pagination — they are always visible regardless
+ * of which page the user is on. Filtering still applies: if a pinned row's key
+ * doesn't exist in the (filtered) data, it simply won't appear.
+ *
+ * @example
+ * // Pin two rows to the top and one to the bottom
+ * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
+ *
+ * @example
+ * // Controlled pinning — manage pinned keys in parent state
+ * const [pinning, setPinning] = useState<RowPinningConfig>({ top: ['header-row'] });
+ * <BoltTable rowPinning={pinning} ... />
+ */
+interface RowPinningConfig {
+    /**
+     * Row keys to pin at the top of the table.
+     * These rows stick below the column headers during vertical scroll.
+     * Order is preserved — rows are rendered in the order listed here.
+     */
+    top?: React.Key[];
+    /**
+     * Row keys to pin at the bottom of the table.
+     * These rows stick to the bottom of the visible area during vertical scroll.
+     * Order is preserved — rows are rendered in the order listed here.
+     */
+    bottom?: React.Key[];
+}
 /**
  * The base type for a row record in BoltTable.
  * All row data objects must be indexable by string keys.
@@ -910,6 +942,17 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
      * }}
      */
     readonly rowSelection?: RowSelectionConfig<T>;
+    /**
+     * Row pinning configuration. When provided, the specified rows are rendered
+     * as sticky rows at the top and/or bottom of the table body.
+     *
+     * Pinned rows transcend pagination — they are always visible regardless of
+     * which page the user is on. Filtering still applies.
+     *
+     * @example
+     * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
+     */
+    readonly rowPinning?: RowPinningConfig;
     /**
      * Called when the user scrolls near the bottom of the table.
      * Use this for infinite scroll / load-more behavior.
@@ -1106,6 +1149,11 @@ interface ClassNamesTypes {
      * Does not affect the row itself, only the expanded panel.
      */
     expandedRow?: string;
+    /**
+     * Applied to each pinned row's wrapper div (the grid row containing all cells).
+     * Use this to add a border, background, or separator for pinned rows.
+     */
+    pinnedRow?: string;
 }
 /**
  * Inline style overrides for specific regions of BoltTable.
@@ -1146,6 +1194,17 @@ interface StylesTypes {
     pinnedCell?: CSSProperties;
     /** Inline styles for the expanded row content panel */
     expandedRow?: CSSProperties;
+    /** Inline styles for pinned row wrappers (the grid row containing all cells) */
+    pinnedRow?: CSSProperties;
+    /**
+     * CSS color string for the background of pinned row cells.
+     * Should be opaque so that scrolling content behind pinned rows is hidden.
+     * Falls back to `pinnedBg` if not set.
+     *
+     * @example
+     * pinnedRowBg: 'rgba(255, 255, 255, 0.98)'
+     */
+    pinnedRowBg?: string;
     /**
      * CSS color string applied as the background of hovered rows.
      * Defaults to `hsl(var(--muted) / 0.5)` if omitted.
@@ -1210,7 +1269,7 @@ interface StylesTypes {
  *   autoHeight={false}
  * />
  */
-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, 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, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the DraggableHeader component.
@@ -1569,6 +1628,28 @@ interface TableBodyProps {
      * maxExpandedRowHeight={300}
      */
     maxExpandedRowHeight?: number;
+    /**
+     * Rows pinned to the top of the table body.
+     * Rendered as non-virtualized sticky rows below the column headers.
+     */
+    pinnedTopData?: DataRecord[];
+    /**
+     * Rows pinned to the bottom of the table body.
+     * Rendered as non-virtualized sticky rows at the bottom of the visible area.
+     */
+    pinnedBottomData?: DataRecord[];
+    /**
+     * The CSS `gridTemplateColumns` string matching the parent grid.
+     * Needed for pinned row sub-grids to align with the main column layout.
+     */
+    gridTemplateColumns?: string;
+    /**
+     * Height of the column header row in pixels.
+     * Used to position the sticky top pinned rows below the headers.
+     *
+     * @default 36
+     */
+    headerHeight?: number;
 }
 /**
  * TableBody — the virtualized body renderer for BoltTable.
@@ -1590,4 +1671,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 RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };

package/dist/index.js

@@ -1034,15 +1034,26 @@ var TableBody = ({
   expandable,
   resolvedExpandedKeys,
   rowHeight = 40,
+  totalTableWidth,
   scrollAreaWidth,
   accentColor,
   isLoading = false,
   onExpandedRowResize,
-  maxExpandedRowHeight
+  maxExpandedRowHeight,
+  pinnedTopData = [],
+  pinnedBottomData = [],
+  gridTemplateColumns,
+  headerHeight = 36
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
   const selectedKeySet = (0, import_react3.useMemo)(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const allDataForSelection = (0, import_react3.useMemo)(() => {
+    if (pinnedTopData.length === 0 && pinnedBottomData.length === 0)
+      return data;
+    return [...pinnedTopData, ...data, ...pinnedBottomData];
+  }, [pinnedTopData, data, pinnedBottomData]);
+  const pinnedRowBg = styles?.pinnedRowBg ?? styles?.pinnedBg;
   const columnStyles = (0, import_react3.useMemo)(() => {
     return orderedColumns.map((col, colIndex) => {
       const stickyOffset = columnOffsets.get(col.key);
@@ -1128,7 +1139,7 @@ var TableBody = ({
                           rowSelection,
                           normalizedSelectedKeys,
                           rowKey,
-                          allData: data,
+                          allData: allDataForSelection,
                           getRowKey,
                           accentColor,
                           isLoading: isRowShimmer,
@@ -1206,6 +1217,181 @@ var TableBody = ({
           );
         })
       }
+    ),
+    pinnedTopData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          gridColumn: "1 / -1",
+          gridRow: 2,
+          position: "sticky",
+          top: headerHeight,
+          zIndex: 20,
+          boxShadow: "0 2px 6px -1px rgba(0,0,0,0.08)"
+        },
+        children: pinnedTopData.map((row, rowIdx) => {
+          const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
+          const isSelected = selectedKeySet.has(rk);
+          const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: classNames?.pinnedRow ?? "",
+              style: {
+                display: "grid",
+                gridTemplateColumns: gridTemplateColumns ?? "",
+                minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
+                ...styles?.pinnedRow
+              },
+              children: orderedColumns.map((col) => {
+                const cellValue = row[col.dataIndex];
+                const stickyOffset = columnOffsets.get(col.key);
+                const isPinned = Boolean(col.pinned);
+                let zIndex = 0;
+                if (col.key === "__select__" || col.key === "__expand__")
+                  zIndex = 11;
+                else if (isPinned) zIndex = 2;
+                const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    "data-row-key": rk,
+                    "data-selected": isSelected || void 0,
+                    style: {
+                      position: isPinned ? "sticky" : "relative",
+                      ...col.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
+                      ...col.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
+                      zIndex,
+                      backgroundColor: pinnedRowBg,
+                      ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        style: {
+                          height: `${rowHeight}px`,
+                          position: "relative"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          Cell,
+                          {
+                            value: cellValue,
+                            record: row,
+                            column: col,
+                            rowIndex: rowIdx,
+                            classNames,
+                            styles,
+                            isSelected,
+                            isExpanded,
+                            rowSelection,
+                            normalizedSelectedKeys,
+                            rowKey: rk,
+                            allData: allDataForSelection,
+                            getRowKey,
+                            accentColor,
+                            isLoading: false,
+                            recordFingerprint
+                          }
+                        )
+                      }
+                    )
+                  },
+                  col.key
+                );
+              })
+            },
+            `pinned-top-${rk}`
+          );
+        })
+      }
+    ),
+    pinnedBottomData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          gridColumn: "1 / -1",
+          gridRow: 2,
+          position: "sticky",
+          bottom: 0,
+          alignSelf: "end",
+          zIndex: 20,
+          boxShadow: "0 -2px 6px -1px rgba(0,0,0,0.08)"
+        },
+        children: pinnedBottomData.map((row, rowIdx) => {
+          const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
+          const isSelected = selectedKeySet.has(rk);
+          const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: classNames?.pinnedRow ?? "",
+              style: {
+                display: "grid",
+                gridTemplateColumns: gridTemplateColumns ?? "",
+                minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
+                ...styles?.pinnedRow
+              },
+              children: orderedColumns.map((col) => {
+                const cellValue = row[col.dataIndex];
+                const stickyOffset = columnOffsets.get(col.key);
+                const isPinned = Boolean(col.pinned);
+                let zIndex = 0;
+                if (col.key === "__select__" || col.key === "__expand__")
+                  zIndex = 11;
+                else if (isPinned) zIndex = 2;
+                const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    "data-row-key": rk,
+                    "data-selected": isSelected || void 0,
+                    style: {
+                      position: isPinned ? "sticky" : "relative",
+                      ...col.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
+                      ...col.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
+                      zIndex,
+                      backgroundColor: pinnedRowBg,
+                      ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        style: {
+                          height: `${rowHeight}px`,
+                          position: "relative"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          Cell,
+                          {
+                            value: cellValue,
+                            record: row,
+                            column: col,
+                            rowIndex: rowIdx,
+                            classNames,
+                            styles,
+                            isSelected,
+                            isExpanded,
+                            rowSelection,
+                            normalizedSelectedKeys,
+                            rowKey: rk,
+                            allData: allDataForSelection,
+                            getRowKey,
+                            accentColor,
+                            isLoading: false,
+                            recordFingerprint
+                          }
+                        )
+                      }
+                    )
+                  },
+                  col.key
+                );
+              })
+            },
+            `pinned-bottom-${rk}`
+          );
+        })
+      }
     )
   ] });
 };
@@ -1241,6 +1427,7 @@ function BoltTable({
   onColumnPin,
   onColumnHide,
   rowSelection,
+  rowPinning,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1781,6 +1968,35 @@ function BoltTable({
     }
     return result;
   }, [data, sortState, columnFilters]);
+  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = (0, import_react4.useMemo)(() => {
+    if (!rowPinning || !rowPinning.top?.length && !rowPinning.bottom?.length) {
+      return {
+        pinnedTopRows: [],
+        pinnedBottomRows: [],
+        unpinnedProcessedData: processedData
+      };
+    }
+    const topKeySet = new Set((rowPinning.top ?? []).map(String));
+    const bottomKeySet = new Set((rowPinning.bottom ?? []).map(String));
+    const topMap = /* @__PURE__ */ new Map();
+    const bottomMap = /* @__PURE__ */ new Map();
+    const rest = [];
+    processedData.forEach((row, idx) => {
+      const key = getRowKey(row, idx);
+      if (topKeySet.has(key)) topMap.set(key, row);
+      else if (bottomKeySet.has(key)) bottomMap.set(key, row);
+      else rest.push(row);
+    });
+    const orderedTop = (rowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
+    const orderedBottom = (rowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
+    return {
+      pinnedTopRows: orderedTop,
+      pinnedBottomRows: orderedBottom,
+      unpinnedProcessedData: rest
+    };
+  }, [processedData, rowPinning, getRowKey]);
+  const pinnedTopHeight = pinnedTopRows.length * rowHeight;
+  const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
   const columnFiltersKey = Object.keys(columnFilters).sort().map((k) => `${k}:${columnFilters[k]}`).join("|");
   import_react4.default.useEffect(() => {
     tableAreaRef.current?.scrollTo({ top: 0 });
@@ -1788,12 +2004,12 @@ function BoltTable({
   const pgEnabled = pagination !== false && !!pagination;
   const pgSize = pgEnabled ? pagination.pageSize ?? 10 : 10;
   const pgCurrent = pgEnabled ? Number(pagination.current ?? 1) : 1;
-  const needsClientPagination = pgEnabled && processedData.length > pgSize;
+  const needsClientPagination = pgEnabled && unpinnedProcessedData.length > pgSize;
   const paginatedData = (0, import_react4.useMemo)(() => {
-    if (!needsClientPagination) return processedData;
+    if (!needsClientPagination) return unpinnedProcessedData;
     const start = (pgCurrent - 1) * pgSize;
-    return processedData.slice(start, start + pgSize);
-  }, [processedData, needsClientPagination, pgCurrent, pgSize]);
+    return unpinnedProcessedData.slice(start, start + pgSize);
+  }, [unpinnedProcessedData, needsClientPagination, pgCurrent, pgSize]);
   const shimmerCount = pgEnabled ? pgSize : 15;
   const showShimmer = isLoading && processedData.length === 0;
   const shimmerData = (0, import_react4.useMemo)(() => {
@@ -1851,8 +2067,9 @@ function BoltTable({
       return cached ? rowHeight + cached : rowHeight + expandedRowHeight;
     },
     overscan: 5,
-    // Render 5 extra rows above and below the visible window
-    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index)
+    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index),
+    paddingStart: pinnedTopHeight,
+    paddingEnd: pinnedBottomHeight
   });
   const rowVirtualizerRef = (0, import_react4.useRef)(rowVirtualizer);
   rowVirtualizerRef.current = rowVirtualizer;
@@ -1892,7 +2109,7 @@ function BoltTable({
   const activeColumn = activeId ? orderedColumns.find((col) => col.key === activeId) : null;
   const currentPage = pgCurrent;
   const pageSize = pgSize;
-  const rawTotal = pgEnabled ? pagination.total ?? (needsClientPagination ? processedData.length : data.length) : data.length;
+  const rawTotal = pgEnabled ? pagination.total ?? (needsClientPagination ? unpinnedProcessedData.length : data.length) : data.length;
   const lastKnownTotalRef = (0, import_react4.useRef)(0);
   if (!isLoading || rawTotal > 0) {
     lastKnownTotalRef.current = rawTotal;
@@ -2329,7 +2546,11 @@ function BoltTable({
                                   scrollContainerRef: tableAreaRef,
                                   isLoading: showShimmer,
                                   onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight
+                                  maxExpandedRowHeight,
+                                  pinnedTopData: pinnedTopRows,
+                                  pinnedBottomData: pinnedBottomRows,
+                                  gridTemplateColumns,
+                                  headerHeight: HEADER_HEIGHT
                                 }
                               )
                             )