bolt-table 0.1.18 → 0.1.20

package/dist/index.d.mts

@@ -232,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -277,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-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, onRowPin, 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: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -381,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody };

package/dist/index.d.ts

@@ -232,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -277,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-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, onRowPin, 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: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -381,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody };

package/dist/index.js

@@ -979,7 +979,16 @@ var Cell = import_react3.default.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__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -1085,19 +1094,23 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
   const selectedKeySet = (0, import_react3.useMemo)(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const safeData = data ?? [];
+  const safeColumns = orderedColumns ?? [];
   const allDataForSelection = (0, import_react3.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 = (0, import_react3.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;
@@ -1119,10 +1132,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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     columnStyles.map((colStyle, colIndex) => {
-      const col = orderedColumns[colIndex];
+      const col = safeColumns[colIndex];
+      if (!col) return null;
       const hasRender = !!col.render;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
@@ -1130,13 +1145,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;
+            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__ */ (0, import_jsx_runtime4.jsx)(
               "div",
               {
@@ -1144,12 +1177,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
@@ -1201,9 +1236,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__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
@@ -1221,7 +1262,7 @@ var TableBody = ({
                 ...maxExpandedRowHeight ? { maxHeight: `${maxExpandedRowHeight}px` } : void 0,
                 ...styles?.expandedRow
               },
-              children: expandable.expandedRowRender(row, virtualRow.index, 0, true)
+              children: expandedRenderResult
             }
           );
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1268,20 +1309,32 @@ 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;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...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);
@@ -1289,7 +1342,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__ */ (0, import_jsx_runtime4.jsx)(
                       "div",
                       {
@@ -1373,20 +1433,32 @@ 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;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...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);
@@ -1394,7 +1466,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__ */ (0, import_jsx_runtime4.jsx)(
                       "div",
                       {
@@ -1470,9 +1549,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,
@@ -1502,8 +1583,22 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  rowClassName,
+  rowStyle
 }) {
+  const data = (0, import_react4.useMemo)(() => {
+    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 = (0, import_react4.useMemo)(() => {
+    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] = (0, import_react4.useState)(initialColumns);
   const [columnOrder, setColumnOrder] = (0, import_react4.useState)(
     () => initialColumns.map((c) => c.key)
@@ -1539,10 +1634,15 @@ function BoltTable({
     [columns, columnWidths]
   );
   const [internalExpandedKeys, setInternalExpandedKeys] = (0, import_react4.useState)(() => {
-    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;
@@ -1576,21 +1676,39 @@ function BoltTable({
   }, []);
   const getRowKey = (0, import_react4.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 normalizedSelectedKeys = (0, import_react4.useMemo)(
-    () => (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 = (0, import_react4.useRef)(getRowKey);
+  getRowKeyRef.current = getRowKey;
+  const resolvedExpandedKeysRef = (0, import_react4.useRef)(resolvedExpandedKeys);
+  resolvedExpandedKeysRef.current = resolvedExpandedKeys;
+  const toggleExpandRef = (0, import_react4.useRef)(toggleExpand);
+  toggleExpandRef.current = toggleExpand;
+  const iconsRef = (0, import_react4.useRef)(icons);
+  iconsRef.current = icons;
+  const hasExpandable = !!expandable?.rowExpandable;
   const columnsWithExpand = (0, import_react4.useMemo)(() => {
-    if (!expandable?.rowExpandable) return columnsWithPersistedWidths;
+    if (!hasExpandable) return columnsWithPersistedWidths;
     const expandColumn = {
       key: "__expand__",
       dataIndex: "__expand__",
@@ -1599,17 +1717,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__ */ (0, import_jsx_runtime5.jsx)("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
           });
@@ -1619,7 +1737,7 @@ function BoltTable({
           {
             onClick: (e) => {
               e.stopPropagation();
-              toggleExpand(key);
+              toggleExpandRef.current(key);
             },
             style: {
               display: "flex",
@@ -1632,20 +1750,13 @@ function BoltTable({
               borderRadius: "3px",
               color: accentColor
             },
-            children: isExpanded ? icons?.chevronDown ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDownIcon, { style: { width: 14, height: 14 } }) : icons?.chevronRight ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronRightIcon, { style: { width: 14, height: 14 } })
+            children: isExpanded ? iconsRef.current?.chevronDown ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDownIcon, { style: { width: 14, height: 14 } }) : iconsRef.current?.chevronRight ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronRightIcon, { style: { width: 14, height: 14 } })
           }
         );
       }
     };
     return [expandColumn, ...columnsWithPersistedWidths];
-  }, [
-    expandable,
-    columnsWithPersistedWidths,
-    getRowKey,
-    resolvedExpandedKeys,
-    toggleExpand,
-    accentColor
-  ]);
+  }, [hasExpandable, columnsWithPersistedWidths, accentColor]);
   const columnsWithSelection = (0, import_react4.useMemo)(() => {
     if (!rowSelection) return columnsWithExpand;
     const selectionColumn = {
@@ -2005,36 +2116,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;
@@ -2053,6 +2180,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);
@@ -2114,7 +2242,8 @@ function BoltTable({
   const DEFAULT_PAGE_SIZE = 15;
   const [internalPage, setInternalPage] = (0, import_react4.useState)(1);
   const [internalPageSize, setInternalPageSize] = (0, import_react4.useState)(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;
@@ -2127,26 +2256,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 = (0, import_react4.useMemo)(() => {
     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 = (0, import_react4.useMemo)(() => {
-    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 = (0, import_react4.useMemo)(() => {
     if (shimmerData) return shimmerData;
     if (infiniteLoadingShimmer)
@@ -2176,13 +2306,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
   });
@@ -2202,7 +2339,7 @@ function BoltTable({
       endReachedFiredRef.current = false;
     }, 200);
     return () => clearTimeout(timer);
-  }, [data.length, isLoading]);
+  }, [dataLength, isLoading]);
   import_react4.default.useEffect(() => {
     const el = tableAreaRef.current;
     if (!el) return;
@@ -2224,7 +2361,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 = (0, import_react4.useRef)(0);
   if (!isLoading || rawTotal > 0) {
     lastKnownTotalRef.current = rawTotal;
@@ -2232,8 +2369,8 @@ function BoltTable({
   const total = isLoading && lastKnownTotalRef.current > 0 ? lastKnownTotalRef.current : rawTotal;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   import_react4.default.useEffect(() => {
-    if (internalPage > totalPages) {
-      setInternalPage(Math.max(1, totalPages));
+    if (totalPages > 0 && internalPage > totalPages) {
+      setInternalPage(totalPages);
     }
   }, [totalPages, internalPage]);
   const handlePageChange = (p) => {
@@ -2568,10 +2705,10 @@ 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) => {
@@ -2719,7 +2856,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]
@@ -3042,6 +3181,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/dist/index.mjs

@@ -945,7 +945,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",
@@ -1051,19 +1060,23 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   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;
@@ -1085,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",
@@ -1096,13 +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;
+            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",
               {
@@ -1110,12 +1143,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ jsx4(
                   "div",
@@ -1167,9 +1202,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",
             {
@@ -1187,7 +1228,7 @@ var TableBody = ({
                 ...maxExpandedRowHeight ? { maxHeight: `${maxExpandedRowHeight}px` } : void 0,
                 ...styles?.expandedRow
               },
-              children: expandable.expandedRowRender(row, virtualRow.index, 0, true)
+              children: expandedRenderResult
             }
           );
           return /* @__PURE__ */ jsx4(
@@ -1234,20 +1275,32 @@ 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;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...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);
@@ -1255,7 +1308,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",
                       {
@@ -1339,20 +1399,32 @@ 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;
+              let rowCls = "";
+              try {
+                rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              } catch {
+              }
+              let rowSty;
+              try {
+                rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
+              } catch {
+              }
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...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);
@@ -1360,7 +1432,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",
                       {
@@ -1436,9 +1515,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,
@@ -1468,8 +1549,22 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  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)
@@ -1505,10 +1600,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;
@@ -1542,21 +1642,39 @@ 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 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__",
@@ -1565,17 +1683,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
           });
@@ -1585,7 +1703,7 @@ function BoltTable({
           {
             onClick: (e) => {
               e.stopPropagation();
-              toggleExpand(key);
+              toggleExpandRef.current(key);
             },
             style: {
               display: "flex",
@@ -1598,20 +1716,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 = {
@@ -1971,36 +2082,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;
@@ -2019,6 +2146,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);
@@ -2080,7 +2208,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;
@@ -2093,26 +2222,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)
@@ -2142,13 +2272,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
   });
@@ -2168,7 +2305,7 @@ function BoltTable({
       endReachedFiredRef.current = false;
     }, 200);
     return () => clearTimeout(timer);
-  }, [data.length, isLoading]);
+  }, [dataLength, isLoading]);
   React4.useEffect(() => {
     const el = tableAreaRef.current;
     if (!el) return;
@@ -2190,7 +2327,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;
@@ -2198,8 +2335,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) => {
@@ -2534,10 +2671,10 @@ 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) => {
@@ -2685,7 +2822,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]
@@ -3008,6 +3147,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.18",
+  "version": "0.1.20",
   "description": "Virtualized React table with column drag & drop, pinning, resizing, sorting, filtering, and pagination.",
   "license": "MIT",
   "main": "./dist/index.js",