bolt-table 0.1.11 → 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

@@ -986,7 +986,9 @@ var Cell = import_react3.default.memo(
       return prev.isExpanded === next.isExpanded;
     }
     if (prev.column.render) {
-      return prev.record === next.record && prev.rowIndex === next.rowIndex;
+      if (prev.recordFingerprint !== next.recordFingerprint) return false;
+      if (prev.rowIndex !== next.rowIndex) return false;
+      return prev.column.render === next.column.render;
     }
     return prev.value === next.value && prev.rowIndex === next.rowIndex && prev.column.key === next.column.key;
   }
@@ -1032,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);
@@ -1069,6 +1082,7 @@ var TableBody = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     columnStyles.map((colStyle, colIndex) => {
       const col = orderedColumns[colIndex];
+      const hasRender = !!col.render;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
@@ -1080,6 +1094,7 @@ var TableBody = ({
             const isExpanded = resolvedExpandedKeys?.has(rowKey) ?? false;
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
+            const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
             return (
               /*
                * Row wrapper div:
@@ -1124,10 +1139,11 @@ var TableBody = ({
                           rowSelection,
                           normalizedSelectedKeys,
                           rowKey,
-                          allData: data,
+                          allData: allDataForSelection,
                           getRowKey,
                           accentColor,
-                          isLoading: isRowShimmer
+                          isLoading: isRowShimmer,
+                          recordFingerprint
                         }
                       )
                     }
@@ -1201,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}`
+          );
+        })
+      }
     )
   ] });
 };
@@ -1236,6 +1427,7 @@ function BoltTable({
   onColumnPin,
   onColumnHide,
   rowSelection,
+  rowPinning,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1634,6 +1826,23 @@ function BoltTable({
     () => [...leftPinned, ...unpinned, ...rightPinned],
     [leftPinned, unpinned, rightPinned]
   );
+  const freshOrderedColumns = (0, import_react4.useMemo)(() => {
+    const latestMap = new Map(
+      initialColumnsRef.current.map((c) => [c.key, c])
+    );
+    return orderedColumns.map((col) => {
+      if (col.key === "__select__" || col.key === "__expand__") return col;
+      const latest = latestMap.get(col.key);
+      if (!latest) return col;
+      if (col.render === latest.render && col.shimmerRender === latest.shimmerRender)
+        return col;
+      return {
+        ...col,
+        render: latest.render,
+        shimmerRender: latest.shimmerRender
+      };
+    });
+  }, [orderedColumns, initialColumns]);
   const totalTableWidth = (0, import_react4.useMemo)(
     () => orderedColumns.slice(0, -1).reduce((sum, col) => sum + (col.width ?? 150), 0) + (orderedColumns.at(-1)?.width ?? 150),
     [orderedColumns]
@@ -1759,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 });
@@ -1766,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)(() => {
@@ -1829,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;
@@ -1870,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;
@@ -2290,7 +2529,7 @@ function BoltTable({
                                 TableBody_default,
                                 {
                                   data: displayData,
-                                  orderedColumns,
+                                  orderedColumns: freshOrderedColumns,
                                   rowVirtualizer,
                                   columnOffsets,
                                   styles,
@@ -2307,7 +2546,11 @@ function BoltTable({
                                   scrollContainerRef: tableAreaRef,
                                   isLoading: showShimmer,
                                   onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight
+                                  maxExpandedRowHeight,
+                                  pinnedTopData: pinnedTopRows,
+                                  pinnedBottomData: pinnedBottomRows,
+                                  gridTemplateColumns,
+                                  headerHeight: HEADER_HEIGHT
                                 }
                               )
                             )
@@ -2556,6 +2799,7 @@ function BoltTable({
             position: "fixed",
             zIndex: 99999,
             height: 36,
+            fontSize: 12,
             alignItems: "center",
             overflow: "hidden",
             textOverflow: "ellipsis",