bolt-table 0.1.12 → 0.1.13

package/dist/index.mjs

@@ -1000,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);
@@ -1094,7 +1105,7 @@ var TableBody = ({
                           rowSelection,
                           normalizedSelectedKeys,
                           rowKey,
-                          allData: data,
+                          allData: allDataForSelection,
                           getRowKey,
                           accentColor,
                           isLoading: isRowShimmer,
@@ -1172,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}`
+          );
+        })
+      }
     )
   ] });
 };
@@ -1207,6 +1393,7 @@ function BoltTable({
   onColumnPin,
   onColumnHide,
   rowSelection,
+  rowPinning,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1747,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 });
@@ -1754,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(() => {
@@ -1817,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;
@@ -1858,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;
@@ -2295,7 +2512,11 @@ function BoltTable({
                                   scrollContainerRef: tableAreaRef,
                                   isLoading: showShimmer,
                                   onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight
+                                  maxExpandedRowHeight,
+                                  pinnedTopData: pinnedTopRows,
+                                  pinnedBottomData: pinnedBottomRows,
+                                  gridTemplateColumns,
+                                  headerHeight: HEADER_HEIGHT
                                 }
                               )
                             )