bolt-table 0.1.11 → 0.1.13

package/dist/index.mjs

@@ -952,7 +952,9 @@ var Cell = React3.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;
   }
@@ -998,15 +1000,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 = useMemo(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const allDataForSelection = 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 = useMemo(() => {
     return orderedColumns.map((col, colIndex) => {
       const stickyOffset = columnOffsets.get(col.key);
@@ -1035,6 +1048,7 @@ var TableBody = ({
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     columnStyles.map((colStyle, colIndex) => {
       const col = orderedColumns[colIndex];
+      const hasRender = !!col.render;
       return /* @__PURE__ */ jsx4(
         "div",
         {
@@ -1046,6 +1060,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:
@@ -1090,10 +1105,11 @@ var TableBody = ({
                           rowSelection,
                           normalizedSelectedKeys,
                           rowKey,
-                          allData: data,
+                          allData: allDataForSelection,
                           getRowKey,
                           accentColor,
-                          isLoading: isRowShimmer
+                          isLoading: isRowShimmer,
+                          recordFingerprint
                         }
                       )
                     }
@@ -1167,6 +1183,181 @@ var TableBody = ({
           );
         })
       }
+    ),
+    pinnedTopData.length > 0 && /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+            "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__ */ jsx4(
+                  "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__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          height: `${rowHeight}px`,
+                          position: "relative"
+                        },
+                        children: /* @__PURE__ */ jsx4(
+                          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__ */ jsx4(
+      "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__ */ jsx4(
+            "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__ */ jsx4(
+                  "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__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          height: `${rowHeight}px`,
+                          position: "relative"
+                        },
+                        children: /* @__PURE__ */ jsx4(
+                          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}`
+          );
+        })
+      }
     )
   ] });
 };
@@ -1202,6 +1393,7 @@ function BoltTable({
   onColumnPin,
   onColumnHide,
   rowSelection,
+  rowPinning,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1600,6 +1792,23 @@ function BoltTable({
     () => [...leftPinned, ...unpinned, ...rightPinned],
     [leftPinned, unpinned, rightPinned]
   );
+  const freshOrderedColumns = useMemo2(() => {
+    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 = useMemo2(
     () => orderedColumns.slice(0, -1).reduce((sum, col) => sum + (col.width ?? 150), 0) + (orderedColumns.at(-1)?.width ?? 150),
     [orderedColumns]
@@ -1725,6 +1934,35 @@ function BoltTable({
     }
     return result;
   }, [data, sortState, columnFilters]);
+  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = useMemo2(() => {
+    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("|");
   React4.useEffect(() => {
     tableAreaRef.current?.scrollTo({ top: 0 });
@@ -1732,12 +1970,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 = useMemo2(() => {
-    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 = useMemo2(() => {
@@ -1795,8 +2033,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 = useRef4(rowVirtualizer);
   rowVirtualizerRef.current = rowVirtualizer;
@@ -1836,7 +2075,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 = useRef4(0);
   if (!isLoading || rawTotal > 0) {
     lastKnownTotalRef.current = rawTotal;
@@ -2256,7 +2495,7 @@ function BoltTable({
                                 TableBody_default,
                                 {
                                   data: displayData,
-                                  orderedColumns,
+                                  orderedColumns: freshOrderedColumns,
                                   rowVirtualizer,
                                   columnOffsets,
                                   styles,
@@ -2273,7 +2512,11 @@ function BoltTable({
                                   scrollContainerRef: tableAreaRef,
                                   isLoading: showShimmer,
                                   onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight
+                                  maxExpandedRowHeight,
+                                  pinnedTopData: pinnedTopRows,
+                                  pinnedBottomData: pinnedBottomRows,
+                                  gridTemplateColumns,
+                                  headerHeight: HEADER_HEIGHT
                                 }
                               )
                             )
@@ -2522,6 +2765,7 @@ function BoltTable({
             position: "fixed",
             zIndex: 99999,
             height: 36,
+            fontSize: 12,
             alignItems: "center",
             overflow: "hidden",
             textOverflow: "ellipsis",