bolt-table 0.1.19 → 0.1.21

package/dist/index.mjs

@@ -838,6 +838,7 @@ var Cell = React3.memo(
     rowKey,
     allData,
     getRowKey,
+    getRawRowKey,
     accentColor,
     isLoading
   }) => {
@@ -880,6 +881,7 @@ var Cell = React3.memo(
       const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {
         disabled: false
       };
+      const rawKey = getRawRowKey ? getRawRowKey(record, rowIndex) : rowKey;
       const content2 = rowSelection.type === "radio" ? /* @__PURE__ */ jsx4(
         "input",
         {
@@ -889,7 +891,7 @@ var Cell = React3.memo(
           onChange: (e) => {
             e.stopPropagation();
             rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
-            rowSelection.onChange?.([rowKey], [record], { type: "single" });
+            rowSelection.onChange?.([rawKey], [record], { type: "single" });
           },
           style: { cursor: "pointer", accentColor }
         }
@@ -901,15 +903,12 @@ var Cell = React3.memo(
           disabled: checkboxProps.disabled,
           onChange: (e) => {
             e.stopPropagation();
-            const currentKeys = (rowSelection.selectedRowKeys ?? []).map(
-              (k) => String(k)
-            );
-            const newSelected = isSelected ? currentKeys.filter((k) => k !== rowKey) : [...currentKeys, rowKey];
-            const newSelectedRows = (allData ?? []).filter(
-              (row, idx) => newSelected.includes(
-                getRowKey ? getRowKey(row, idx) : String(idx)
-              )
-            );
+            const currentKeys = rowSelection.selectedRowKeys ?? [];
+            const newSelected = isSelected ? currentKeys.filter((k) => String(k) !== rowKey) : [...currentKeys, rawKey];
+            const newSelectedRows = (allData ?? []).filter((row, idx) => {
+              const rk = getRowKey ? getRowKey(row, idx) : String(idx);
+              return newSelected.some((k) => String(k) === rk);
+            });
             rowSelection.onSelect?.(
               record,
               !isSelected,
@@ -945,7 +944,16 @@ var Cell = React3.memo(
         }
       );
     }
-    const content = column.render ? column.render(value, record, rowIndex) : value ?? "";
+    let content;
+    if (column.render) {
+      try {
+        content = column.render(value, record, rowIndex);
+      } catch {
+        content = String(value ?? "");
+      }
+    } else {
+      content = value ?? "";
+    }
     const isSystem = column.key === "__select__" || column.key === "__expand__";
     return /* @__PURE__ */ jsx4(
       "div",
@@ -1039,6 +1047,7 @@ var TableBody = ({
   rowSelection,
   normalizedSelectedKeys = [],
   getRowKey,
+  getRawRowKey,
   expandable,
   resolvedExpandedKeys,
   rowHeight = 40,
@@ -1058,14 +1067,16 @@ var TableBody = ({
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
   const selectedKeySet = useMemo(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const safeData = data ?? [];
+  const safeColumns = orderedColumns ?? [];
   const allDataForSelection = useMemo(() => {
     if (pinnedTopData.length === 0 && pinnedBottomData.length === 0)
-      return data;
-    return [...pinnedTopData, ...data, ...pinnedBottomData];
-  }, [pinnedTopData, data, pinnedBottomData]);
+      return safeData;
+    return [...pinnedTopData, ...safeData, ...pinnedBottomData];
+  }, [pinnedTopData, safeData, pinnedBottomData]);
   const pinnedRowBg = styles?.pinnedRowBg ?? styles?.pinnedBg;
   const columnStyles = useMemo(() => {
-    return orderedColumns.map((col, colIndex) => {
+    return safeColumns.map((col, colIndex) => {
       const stickyOffset = columnOffsets.get(col.key);
       const isPinned = Boolean(col.pinned);
       let zIndex = 0;
@@ -1087,10 +1098,12 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [orderedColumns, columnOffsets, totalSize, styles]);
+  }, [safeColumns, columnOffsets, totalSize, styles]);
+  if (safeData.length === 0 || safeColumns.length === 0) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     columnStyles.map((colStyle, colIndex) => {
-      const col = orderedColumns[colIndex];
+      const col = safeColumns[colIndex];
+      if (!col) return null;
       const hasRender = !!col.render;
       return /* @__PURE__ */ jsx4(
         "div",
@@ -1098,15 +1111,31 @@ var TableBody = ({
           ...colStyle.isPinned ? { "data-bt-pinned": "" } : {},
           style: colStyle.style,
           children: virtualItems.map((virtualRow) => {
-            const row = data[virtualRow.index];
+            const row = safeData[virtualRow.index];
+            if (row == null) return null;
             const rowKey = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
             const isSelected = selectedKeySet.has(rowKey);
             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;
-            const rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
-            const rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
+            let recordFingerprint;
+            if (hasRender && !isRowShimmer) {
+              try {
+                recordFingerprint = JSON.stringify(row);
+              } catch {
+                recordFingerprint = rowKey;
+              }
+            }
+            let rowCls = "";
+            try {
+              rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
+            } catch {
+            }
+            let rowSty;
+            try {
+              rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
+            } catch {
+            }
             return /* @__PURE__ */ jsx4(
               "div",
               {
@@ -1146,6 +1175,7 @@ var TableBody = ({
                         rowKey,
                         allData: allDataForSelection,
                         getRowKey,
+                        getRawRowKey,
                         accentColor,
                         isLoading: isRowShimmer,
                         recordFingerprint
@@ -1173,9 +1203,15 @@ var TableBody = ({
           pointerEvents: "none"
         },
         children: virtualItems.map((virtualRow) => {
-          const row = data[virtualRow.index];
+          const row = safeData[virtualRow.index];
+          if (row == null) return null;
           const rk = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
           if (!(resolvedExpandedKeys?.has(rk) ?? false)) return null;
+          let expandedRenderResult = null;
+          try {
+            expandedRenderResult = expandable.expandedRowRender(row, virtualRow.index, 0, true);
+          } catch {
+          }
           const expandedContent = /* @__PURE__ */ jsx4(
             "div",
             {
@@ -1193,7 +1229,7 @@ var TableBody = ({
                 ...maxExpandedRowHeight ? { maxHeight: `${maxExpandedRowHeight}px` } : void 0,
                 ...styles?.expandedRow
               },
-              children: expandable.expandedRowRender(row, virtualRow.index, 0, true)
+              children: expandedRenderResult
             }
           );
           return /* @__PURE__ */ jsx4(
@@ -1240,11 +1276,20 @@ var TableBody = ({
               boxShadow: "0 2px 6px -1px rgba(0,0,0,0.08)"
             },
             children: pinnedTopData.map((row, rowIdx) => {
+              if (row == null) return null;
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
-              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
-              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
@@ -1256,7 +1301,7 @@ var TableBody = ({
                     ...styles?.pinnedRow,
                     ...rowSty
                   },
-                  children: orderedColumns.map((col) => {
+                  children: safeColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
@@ -1264,7 +1309,14 @@ var TableBody = ({
                     if (col.key === "__select__" || col.key === "__expand__")
                       zIndex = 11;
                     else if (isPinned) zIndex = 2;
-                    const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                    let recordFingerprint;
+                    if (col.render) {
+                      try {
+                        recordFingerprint = JSON.stringify(row);
+                      } catch {
+                        recordFingerprint = rk;
+                      }
+                    }
                     return /* @__PURE__ */ jsx4(
                       "div",
                       {
@@ -1305,6 +1357,7 @@ var TableBody = ({
                                 rowKey: rk,
                                 allData: allDataForSelection,
                                 getRowKey,
+                                getRawRowKey,
                                 accentColor,
                                 isLoading: false,
                                 recordFingerprint
@@ -1348,11 +1401,20 @@ var TableBody = ({
               boxShadow: "0 -2px 6px -1px rgba(0,0,0,0.08)"
             },
             children: pinnedBottomData.map((row, rowIdx) => {
+              if (row == null) return null;
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
-              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
-              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
@@ -1364,7 +1426,7 @@ var TableBody = ({
                     ...styles?.pinnedRow,
                     ...rowSty
                   },
-                  children: orderedColumns.map((col) => {
+                  children: safeColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
                     const stickyOffset = columnOffsets.get(col.key);
                     const isPinned = Boolean(col.pinned);
@@ -1372,7 +1434,14 @@ var TableBody = ({
                     if (col.key === "__select__" || col.key === "__expand__")
                       zIndex = 11;
                     else if (isPinned) zIndex = 2;
-                    const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                    let recordFingerprint;
+                    if (col.render) {
+                      try {
+                        recordFingerprint = JSON.stringify(row);
+                      } catch {
+                        recordFingerprint = rk;
+                      }
+                    }
                     return /* @__PURE__ */ jsx4(
                       "div",
                       {
@@ -1413,6 +1482,7 @@ var TableBody = ({
                                 rowKey: rk,
                                 allData: allDataForSelection,
                                 getRowKey,
+                                getRawRowKey,
                                 accentColor,
                                 isLoading: false,
                                 recordFingerprint
@@ -1448,9 +1518,11 @@ function arrayMove(arr, from, to) {
 var SHIMMER_WIDTHS2 = [55, 70, 45, 80, 60, 50, 75, 65, 40, 72];
 var EMPTY_CLASSNAMES = {};
 var EMPTY_STYLES = {};
+var STABLE_EMPTY_DATA = [];
+var STABLE_EMPTY_COLS = [];
 function BoltTable({
-  columns: initialColumns,
-  data,
+  columns: rawInitialColumns,
+  data: rawData,
   rowHeight = 40,
   expandedRowHeight = 200,
   maxExpandedRowHeight,
@@ -1484,6 +1556,18 @@ function BoltTable({
   rowClassName,
   rowStyle
 }) {
+  const data = useMemo2(() => {
+    if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
+    const filtered = rawData.filter((item) => item != null);
+    return filtered.length > 0 ? filtered : STABLE_EMPTY_DATA;
+  }, [rawData]);
+  const initialColumns = useMemo2(() => {
+    if (!Array.isArray(rawInitialColumns)) return STABLE_EMPTY_COLS;
+    const filtered = rawInitialColumns.filter(
+      (col) => col != null && typeof col.key === "string"
+    );
+    return filtered.length > 0 ? filtered : STABLE_EMPTY_COLS;
+  }, [rawInitialColumns]);
   const [columns, setColumns] = useState2(initialColumns);
   const [columnOrder, setColumnOrder] = useState2(
     () => initialColumns.map((c) => c.key)
@@ -1519,10 +1603,15 @@ function BoltTable({
     [columns, columnWidths]
   );
   const [internalExpandedKeys, setInternalExpandedKeys] = useState2(() => {
-    if (expandable?.defaultExpandAllRows) {
+    if (expandable?.defaultExpandAllRows && data.length > 0) {
       return new Set(
         data.map((row, idx) => {
-          if (typeof rowKey === "function") return rowKey(row);
+          if (row == null) return idx;
+          try {
+            if (typeof rowKey === "function") return rowKey(row);
+          } catch {
+            return idx;
+          }
           if (typeof rowKey === "string")
             return row[rowKey] ?? idx;
           return idx;
@@ -1556,21 +1645,56 @@ function BoltTable({
   }, []);
   const getRowKey = useCallback(
     (record, index) => {
-      if (typeof rowKey === "function") return String(rowKey(record));
-      if (typeof rowKey === "string") {
-        const val = record[rowKey];
-        return val !== void 0 && val !== null ? String(val) : String(index);
+      if (record == null) return String(index);
+      try {
+        if (typeof rowKey === "function") return String(rowKey(record));
+        if (typeof rowKey === "string") {
+          const val = record[rowKey];
+          return val != null ? String(val) : String(index);
+        }
+      } catch {
+        return String(index);
       }
       return String(index);
     },
     [rowKey]
   );
+  const getRawRowKey = useCallback(
+    (record, index) => {
+      if (record == null) return index;
+      try {
+        if (typeof rowKey === "function") return rowKey(record);
+        if (typeof rowKey === "string") {
+          const val = record[rowKey];
+          if (typeof val === "number" || typeof val === "string") return val;
+          return val != null ? String(val) : index;
+        }
+      } catch {
+        return index;
+      }
+      return index;
+    },
+    [rowKey]
+  );
   const normalizedSelectedKeys = useMemo2(
-    () => (rowSelection?.selectedRowKeys ?? []).map((k) => String(k)),
+    () => {
+      const keys = rowSelection?.selectedRowKeys;
+      if (!Array.isArray(keys)) return [];
+      return keys.filter((k) => k != null).map((k) => String(k));
+    },
     [rowSelection?.selectedRowKeys]
   );
+  const getRowKeyRef = useRef4(getRowKey);
+  getRowKeyRef.current = getRowKey;
+  const resolvedExpandedKeysRef = useRef4(resolvedExpandedKeys);
+  resolvedExpandedKeysRef.current = resolvedExpandedKeys;
+  const toggleExpandRef = useRef4(toggleExpand);
+  toggleExpandRef.current = toggleExpand;
+  const iconsRef = useRef4(icons);
+  iconsRef.current = icons;
+  const hasExpandable = !!expandable?.rowExpandable;
   const columnsWithExpand = useMemo2(() => {
-    if (!expandable?.rowExpandable) return columnsWithPersistedWidths;
+    if (!hasExpandable) return columnsWithPersistedWidths;
     const expandColumn = {
       key: "__expand__",
       dataIndex: "__expand__",
@@ -1579,17 +1703,17 @@ function BoltTable({
       pinned: "left",
       hidden: false,
       render: (_, record, index) => {
-        const key = getRowKey(record, index);
-        const canExpand = expandable.rowExpandable?.(record) ?? true;
-        const isExpanded = resolvedExpandedKeys.has(key);
+        const key = getRowKeyRef.current(record, index);
+        const canExpand = expandableRef.current?.rowExpandable?.(record) ?? true;
+        const isExpanded = resolvedExpandedKeysRef.current.has(key);
         if (!canExpand)
           return /* @__PURE__ */ jsx5("span", { style: { display: "inline-block", width: 16 } });
-        if (typeof expandable.expandIcon === "function") {
-          return expandable.expandIcon({
+        if (typeof expandableRef.current?.expandIcon === "function") {
+          return expandableRef.current.expandIcon({
             expanded: isExpanded,
             onExpand: (_2, e) => {
               e.stopPropagation();
-              toggleExpand(key);
+              toggleExpandRef.current(key);
             },
             record
           });
@@ -1599,7 +1723,7 @@ function BoltTable({
           {
             onClick: (e) => {
               e.stopPropagation();
-              toggleExpand(key);
+              toggleExpandRef.current(key);
             },
             style: {
               display: "flex",
@@ -1612,20 +1736,13 @@ function BoltTable({
               borderRadius: "3px",
               color: accentColor
             },
-            children: isExpanded ? icons?.chevronDown ?? /* @__PURE__ */ jsx5(ChevronDownIcon, { style: { width: 14, height: 14 } }) : icons?.chevronRight ?? /* @__PURE__ */ jsx5(ChevronRightIcon, { style: { width: 14, height: 14 } })
+            children: isExpanded ? iconsRef.current?.chevronDown ?? /* @__PURE__ */ jsx5(ChevronDownIcon, { style: { width: 14, height: 14 } }) : iconsRef.current?.chevronRight ?? /* @__PURE__ */ jsx5(ChevronRightIcon, { style: { width: 14, height: 14 } })
           }
         );
       }
     };
     return [expandColumn, ...columnsWithPersistedWidths];
-  }, [
-    expandable,
-    columnsWithPersistedWidths,
-    getRowKey,
-    resolvedExpandedKeys,
-    toggleExpand,
-    accentColor
-  ]);
+  }, [hasExpandable, columnsWithPersistedWidths, accentColor]);
   const columnsWithSelection = useMemo2(() => {
     if (!rowSelection) return columnsWithExpand;
     const selectionColumn = {
@@ -1985,36 +2102,52 @@ function BoltTable({
     if (!onFilterChangeRef.current) {
       const filterKeys = Object.keys(columnFilters);
       if (filterKeys.length > 0) {
-        result = result.filter(
-          (row) => filterKeys.every((key) => {
-            const col = columnsLookupRef.current.find((c) => c.key === key);
-            if (typeof col?.filterFn === "function") {
-              return col.filterFn(columnFilters[key], row, col.dataIndex);
+        result = result.filter((row) => {
+          if (row == null) return false;
+          return filterKeys.every((key) => {
+            try {
+              const col = columnsLookupRef.current.find((c) => c.key === key);
+              if (typeof col?.filterFn === "function") {
+                return col.filterFn(columnFilters[key], row, col.dataIndex);
+              }
+              const cellVal = String(row[key] ?? "").toLowerCase();
+              return cellVal.includes(columnFilters[key].toLowerCase());
+            } catch {
+              return true;
             }
-            const cellVal = String(row[key] ?? "").toLowerCase();
-            return cellVal.includes(columnFilters[key].toLowerCase());
-          })
-        );
+          });
+        });
       }
     }
     if (!onSortChangeRef.current && sortState.key && sortState.direction) {
       const dir = sortState.direction === "asc" ? 1 : -1;
       const key = sortState.key;
       const col = columnsLookupRef.current.find((c) => c.key === key);
-      if (typeof col?.sorter === "function") {
-        const sorterFn = col.sorter;
-        result = [...result].sort((a, b) => sorterFn(a, b) * dir);
-      } else {
-        result = [...result].sort((a, b) => {
-          const aVal = a[key];
-          const bVal = b[key];
-          if (aVal == null && bVal == null) return 0;
-          if (aVal == null) return 1;
-          if (bVal == null) return -1;
-          if (typeof aVal === "number" && typeof bVal === "number")
-            return (aVal - bVal) * dir;
-          return String(aVal).localeCompare(String(bVal)) * dir;
-        });
+      try {
+        if (typeof col?.sorter === "function") {
+          const sorterFn = col.sorter;
+          result = [...result].sort((a, b) => {
+            if (a == null && b == null) return 0;
+            if (a == null) return 1;
+            if (b == null) return -1;
+            return sorterFn(a, b) * dir;
+          });
+        } else {
+          result = [...result].sort((a, b) => {
+            if (a == null && b == null) return 0;
+            if (a == null) return 1;
+            if (b == null) return -1;
+            const aVal = a[key];
+            const bVal = b[key];
+            if (aVal == null && bVal == null) return 0;
+            if (aVal == null) return 1;
+            if (bVal == null) return -1;
+            if (typeof aVal === "number" && typeof bVal === "number")
+              return (aVal - bVal) * dir;
+            return String(aVal).localeCompare(String(bVal)) * dir;
+          });
+        }
+      } catch {
       }
     }
     return result;
@@ -2033,6 +2166,7 @@ function BoltTable({
     const bottomMap = /* @__PURE__ */ new Map();
     const rest = [];
     processedData.forEach((row, idx) => {
+      if (row == null) return;
       const key = getRowKey(row, idx);
       if (topKeySet.has(key)) topMap.set(key, row);
       else if (bottomKeySet.has(key)) bottomMap.set(key, row);
@@ -2094,7 +2228,8 @@ function BoltTable({
   const DEFAULT_PAGE_SIZE = 15;
   const [internalPage, setInternalPage] = useState2(1);
   const [internalPageSize, setInternalPageSize] = useState2(DEFAULT_PAGE_SIZE);
-  const autoPagination = pagination === void 0 && data.length > DEFAULT_PAGE_SIZE;
+  const dataLength = data.length;
+  const autoPagination = pagination === void 0 && dataLength > DEFAULT_PAGE_SIZE;
   const pgEnabled = pagination === false ? false : !!pagination || autoPagination;
   const pgSize = pgEnabled && typeof pagination === "object" && pagination?.pageSize !== void 0 ? pagination.pageSize : internalPageSize;
   const isControlledPagination = typeof pagination === "object" && pagination?.current !== void 0;
@@ -2107,26 +2242,27 @@ function BoltTable({
   }, [unpinnedProcessedData, needsClientPagination, pgCurrent, pgSize]);
   const shimmerCount = pgEnabled ? pgSize : 15;
   const showShimmer = isLoading && processedData.length === 0;
+  const shimmerRowKeyField = typeof rowKey === "string" ? rowKey : "id";
   const shimmerData = useMemo2(() => {
     if (!showShimmer) return null;
     return Array.from(
       { length: shimmerCount },
       (_, i) => ({
-        [typeof rowKey === "string" ? rowKey : "id"]: `__shimmer_${i}__`
+        [shimmerRowKeyField]: `__shimmer_${i}__`
       })
     );
-  }, [showShimmer, shimmerCount, rowKey]);
+  }, [showShimmer, shimmerCount, shimmerRowKeyField]);
   const INFINITE_SHIMMER_COUNT = 5;
+  const showInfiniteShimmer = isLoading && paginatedData.length > 0 && !showShimmer && !pgEnabled;
   const infiniteLoadingShimmer = useMemo2(() => {
-    if (!isLoading || paginatedData.length === 0 || showShimmer) return null;
-    if (pgEnabled) return null;
+    if (!showInfiniteShimmer) return null;
     return Array.from(
       { length: INFINITE_SHIMMER_COUNT },
       (_, i) => ({
-        [typeof rowKey === "string" ? rowKey : "id"]: `__shimmer_${i}__`
+        [shimmerRowKeyField]: `__shimmer_${i}__`
       })
     );
-  }, [isLoading, paginatedData.length, showShimmer, pgEnabled, rowKey]);
+  }, [showInfiniteShimmer, shimmerRowKeyField]);
   const displayData = useMemo2(() => {
     if (shimmerData) return shimmerData;
     if (infiniteLoadingShimmer)
@@ -2156,13 +2292,20 @@ function BoltTable({
     getScrollElement: () => tableAreaRef.current,
     estimateSize: (index) => {
       if (shimmerData) return rowHeight;
-      const key = getRowKey(displayData[index], index);
+      const item = displayData[index];
+      if (!item) return rowHeight;
+      const key = getRowKey(item, index);
       if (!resolvedExpandedKeys.has(key)) return rowHeight;
       const cached = measuredExpandedHeights.current.get(key);
       return cached ? rowHeight + cached : rowHeight + expandedRowHeight;
     },
     overscan: 5,
-    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index),
+    getItemKey: (index) => {
+      if (shimmerData) return `__shimmer_${index}__`;
+      const item = displayData[index];
+      if (!item) return `__fallback_${index}__`;
+      return getRowKey(item, index);
+    },
     paddingStart: pinnedTopHeight,
     paddingEnd: pinnedBottomHeight
   });
@@ -2182,7 +2325,7 @@ function BoltTable({
       endReachedFiredRef.current = false;
     }, 200);
     return () => clearTimeout(timer);
-  }, [data.length, isLoading]);
+  }, [dataLength, isLoading]);
   React4.useEffect(() => {
     const el = tableAreaRef.current;
     if (!el) return;
@@ -2204,7 +2347,7 @@ function BoltTable({
   const activeColumn = activeId ? orderedColumns.find((col) => col.key === activeId) : null;
   const currentPage = pgCurrent;
   const pageSize = pgSize;
-  const rawTotal = pgEnabled ? (typeof pagination === "object" ? pagination?.total : void 0) ?? (needsClientPagination ? unpinnedProcessedData.length : data.length) : data.length;
+  const rawTotal = pgEnabled ? (typeof pagination === "object" ? pagination?.total : void 0) ?? (needsClientPagination ? unpinnedProcessedData.length : dataLength) : dataLength;
   const lastKnownTotalRef = useRef4(0);
   if (!isLoading || rawTotal > 0) {
     lastKnownTotalRef.current = rawTotal;
@@ -2212,8 +2355,8 @@ function BoltTable({
   const total = isLoading && lastKnownTotalRef.current > 0 ? lastKnownTotalRef.current : rawTotal;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   React4.useEffect(() => {
-    if (internalPage > totalPages) {
-      setInternalPage(Math.max(1, totalPages));
+    if (totalPages > 0 && internalPage > totalPages) {
+      setInternalPage(totalPages);
     }
   }, [totalPages, internalPage]);
   const handlePageChange = (p) => {
@@ -2548,16 +2691,16 @@ function BoltTable({
                                     "input",
                                     {
                                       type: "checkbox",
-                                      checked: data.length > 0 && normalizedSelectedKeys.length === data.length,
+                                      checked: dataLength > 0 && normalizedSelectedKeys.length === dataLength,
                                       ref: (input) => {
                                         if (input) {
-                                          input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < data.length;
+                                          input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < dataLength;
                                         }
                                       },
                                       onChange: (e) => {
                                         if (e.target.checked) {
                                           const allKeys = data.map(
-                                            (row, idx) => getRowKey(row, idx)
+                                            (row, idx) => getRawRowKey(row, idx)
                                           );
                                           rowSelection.onSelectAll?.(
                                             true,
@@ -2686,6 +2829,7 @@ function BoltTable({
                               rowSelection: !showShimmer ? rowSelection : void 0,
                               normalizedSelectedKeys,
                               getRowKey,
+                              getRawRowKey,
                               expandable: !showShimmer ? expandable : void 0,
                               resolvedExpandedKeys,
                               rowHeight,
@@ -3024,6 +3168,7 @@ function BoltTable({
         ...pinnedBottomRows
       ];
       for (let i = 0; i < allRows.length; i++) {
+        if (allRows[i] == null) continue;
         const rk = getRowKey(allRows[i], i);
         if (rk === cellContextMenu.rowKey) {
           menuRecord = allRows[i];

package/package.json

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