bolt-table 0.1.26 → 0.1.28

package/dist/index.js

@@ -124,6 +124,18 @@ var EyeOffIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtim
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ] });
+var SearchIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })
+] });
+var ColumnsIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "21" })
+] });
+var XIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+] });
 
 // src/DraggableHeader.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -823,7 +835,15 @@ var EditableCell = ({
       onEdit(coerced, record, column.dataIndex, rowIndex);
     }
     onEditComplete();
-  }, [draft, value, column.dataIndex, record, rowIndex, onEdit, onEditComplete]);
+  }, [
+    draft,
+    value,
+    column.dataIndex,
+    record,
+    rowIndex,
+    onEdit,
+    onEditComplete
+  ]);
   const cancel = (0, import_react3.useCallback)(() => {
     onEditComplete();
   }, [onEditComplete]);
@@ -925,7 +945,11 @@ var Cell = import_react3.default.memo(
             rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
             rowSelection.onChange?.([rawKey], [record], { type: "single" });
           },
-          style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
+          style: {
+            cursor: "pointer",
+            accentColor,
+            backgroundColor: "#94A3B8"
+          }
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
@@ -951,7 +975,11 @@ var Cell = import_react3.default.memo(
               type: "multiple"
             });
           },
-          style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
+          style: {
+            cursor: "pointer",
+            accentColor,
+            backgroundColor: "#94A3B8"
+          }
         }
       );
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1087,6 +1115,33 @@ var MeasuredExpandedRow = import_react3.default.memo(
   }
 );
 MeasuredExpandedRow.displayName = "MeasuredExpandedRow";
+var DynamicRowMeasurer = import_react3.default.memo(
+  ({
+    index,
+    onHeightChange,
+    children
+  }) => {
+    const ref = (0, import_react3.useRef)(null);
+    const onHeightChangeRef = (0, import_react3.useRef)(onHeightChange);
+    (0, import_react3.useEffect)(() => {
+      onHeightChangeRef.current = onHeightChange;
+    }, [onHeightChange]);
+    (0, import_react3.useEffect)(() => {
+      const el = ref.current;
+      if (!el) return;
+      const observer = new ResizeObserver((entries) => {
+        const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
+        if (height != null && height > 0) {
+          onHeightChangeRef.current(index, Math.ceil(height));
+        }
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [index]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, children });
+  }
+);
+DynamicRowMeasurer.displayName = "DynamicRowMeasurer";
 var TableBody = ({
   data,
   orderedColumns,
@@ -1116,11 +1171,17 @@ var TableBody = ({
   bodyGridRow = 2,
   onEdit,
   editingCell,
-  onEditComplete
+  onEditComplete,
+  enableDynamicRowHeight = false,
+  onRowHeightChange,
+  columnGridIndexMap
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
-  const selectedKeySet = (0, import_react3.useMemo)(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const selectedKeySet = (0, import_react3.useMemo)(
+    () => new Set(normalizedSelectedKeys),
+    [normalizedSelectedKeys]
+  );
   const safeData = data ?? [];
   const safeColumns = orderedColumns ?? [];
   const allDataForSelection = (0, import_react3.useMemo)(() => {
@@ -1136,8 +1197,9 @@ var TableBody = ({
       let zIndex = 0;
       if (col.key === "__select__" || col.key === "__expand__") zIndex = 11;
       else if (isPinned) zIndex = 2;
+      const gridCol = columnGridIndexMap?.get(col.key) ?? colIndex + 1;
       const style = {
-        gridColumn: colIndex + 1,
+        gridColumn: gridCol,
         gridRow: bodyGridRow,
         height: `${totalSize}px`,
         position: isPinned ? "sticky" : "relative",
@@ -1152,7 +1214,7 @@ var TableBody = ({
       }
       return { key: col.key, style, isPinned };
     });
-  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow]);
+  }, [safeColumns, columnOffsets, totalSize, styles, bodyGridRow, columnGridIndexMap]);
   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) => {
@@ -1203,15 +1265,58 @@ var TableBody = ({
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`,
-                  ...rowSty
+                  height: enableDynamicRowHeight ? void 0 : `${virtualRow.size}px`,
+                  minHeight: enableDynamicRowHeight ? `${rowHeight}px` : void 0
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                children: enableDynamicRowHeight && onRowHeightChange && colIndex === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  DynamicRowMeasurer,
+                  {
+                    index: virtualRow.index,
+                    onHeightChange: onRowHeightChange,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        style: {
+                          minHeight: `${rowHeight}px`,
+                          position: "relative",
+                          ...rowSty
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          Cell,
+                          {
+                            value: cellValue,
+                            record: row,
+                            column: col,
+                            rowIndex: virtualRow.index,
+                            classNames,
+                            styles,
+                            isSelected,
+                            isExpanded,
+                            rowSelection,
+                            normalizedSelectedKeys,
+                            rowKey,
+                            allData: allDataForSelection,
+                            getRowKey,
+                            getRawRowKey,
+                            accentColor,
+                            isLoading: isRowShimmer,
+                            recordFingerprint,
+                            onEdit,
+                            isEditing: editingCell?.rowKey === rowKey && editingCell?.columnKey === col.key,
+                            onEditComplete
+                          }
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     style: {
-                      height: `${rowHeight}px`,
-                      position: "relative"
+                      height: enableDynamicRowHeight ? void 0 : `${rowHeight}px`,
+                      minHeight: enableDynamicRowHeight ? `${rowHeight}px` : void 0,
+                      position: "relative",
+                      ...rowSty
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       Cell,
@@ -1266,7 +1371,12 @@ var TableBody = ({
           if (!(resolvedExpandedKeys?.has(rk) ?? false)) return null;
           let expandedRenderResult = null;
           try {
-            expandedRenderResult = expandable.expandedRowRender(row, virtualRow.index, 0, true);
+            expandedRenderResult = expandable.expandedRowRender(
+              row,
+              virtualRow.index,
+              0,
+              true
+            );
           } catch {
           }
           const expandedContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1634,7 +1744,16 @@ function BoltTable({
   onCopy,
   keepPinnedRowsAcrossPages,
   onEdit,
-  onRowClick
+  onRowClick,
+  enableColumnVirtualization = false,
+  enableDynamicRowHeight = false,
+  columnPersistence = false,
+  showColumnSettings = true,
+  hideGlobalSearch = false,
+  globalSearchValue,
+  onGlobalSearchChange,
+  toolbarContent,
+  columnSettingsLabel
 }) {
   const data = (0, import_react4.useMemo)(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1642,7 +1761,8 @@ function BoltTable({
     return filtered.length > 0 ? filtered : STABLE_EMPTY_DATA;
   }, [rawData]);
   const initialColumns = (0, import_react4.useMemo)(() => {
-    if (!Array.isArray(rawInitialColumns)) return STABLE_EMPTY_COLS;
+    if (!Array.isArray(rawInitialColumns))
+      return STABLE_EMPTY_COLS;
     const safe = rawInitialColumns.filter(
       (col) => col != null && typeof col.key === "string"
     );
@@ -1707,6 +1827,106 @@ function BoltTable({
     () => /* @__PURE__ */ new Map()
   );
   const manuallyResizedRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
+  const persistenceAppliedRef = (0, import_react4.useRef)(false);
+  import_react4.default.useEffect(() => {
+    if (!columnPersistence || persistenceAppliedRef.current) return;
+    persistenceAppliedRef.current = true;
+    const {
+      storageKey,
+      persistOrder = true,
+      persistWidths = true,
+      persistVisibility = true,
+      persistPinned = true
+    } = columnPersistence;
+    try {
+      const raw = localStorage.getItem(`bt_${storageKey}`);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (persistOrder && saved.order) {
+        setColumnOrder(saved.order);
+      }
+      if (persistWidths && saved.widths) {
+        setColumnWidths(
+          new Map(Object.entries(saved.widths).map(([k, v]) => [k, Number(v)]))
+        );
+      }
+      if (persistVisibility && saved.hidden || persistPinned && saved.pinned) {
+        setColumns(
+          (prev) => prev.map((col) => {
+            let updated = col;
+            if (persistVisibility && saved.hidden && col.key in saved.hidden) {
+              updated = { ...updated, hidden: saved.hidden[col.key] };
+            }
+            if (persistPinned && saved.pinned && col.key in saved.pinned) {
+              updated = { ...updated, pinned: saved.pinned[col.key] };
+            }
+            return updated;
+          })
+        );
+      }
+    } catch {
+    }
+  }, [columnPersistence]);
+  const persistColumnsToStorage = (0, import_react4.useCallback)(() => {
+    if (!columnPersistence) return;
+    const {
+      storageKey,
+      persistOrder = true,
+      persistWidths = true,
+      persistVisibility = true,
+      persistPinned = true
+    } = columnPersistence;
+    try {
+      const saved = {};
+      if (persistOrder) saved.order = columnOrder;
+      if (persistWidths) {
+        const widths = {};
+        columnWidths.forEach((v, k) => {
+          widths[k] = v;
+        });
+        saved.widths = widths;
+      }
+      if (persistVisibility) {
+        const hidden = {};
+        columns.forEach((c) => {
+          if (c.hidden) hidden[c.key] = true;
+        });
+        saved.hidden = hidden;
+      }
+      if (persistPinned) {
+        const pinned = {};
+        columns.forEach((c) => {
+          if (c.pinned) pinned[c.key] = c.pinned;
+        });
+        saved.pinned = pinned;
+      }
+      localStorage.setItem(`bt_${storageKey}`, JSON.stringify(saved));
+    } catch {
+    }
+  }, [columnPersistence, columnOrder, columnWidths, columns]);
+  import_react4.default.useEffect(() => {
+    if (!columnPersistence || !persistenceAppliedRef.current) return;
+    persistColumnsToStorage();
+  }, [columnPersistence, persistColumnsToStorage]);
+  const [showColumnPicker, setShowColumnPicker] = (0, import_react4.useState)(false);
+  const columnPickerRef = (0, import_react4.useRef)(null);
+  import_react4.default.useEffect(() => {
+    if (!showColumnPicker) return;
+    const close = (e) => {
+      if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
+        setShowColumnPicker(false);
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setShowColumnPicker(false);
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [showColumnPicker]);
   const columnsWithPersistedWidths = (0, import_react4.useMemo)(
     () => columns.map((col) => ({
       ...col,
@@ -1771,6 +1991,32 @@ function BoltTable({
     },
     [rowKey]
   );
+  const deduplicatedRowKeys = (0, import_react4.useMemo)(() => {
+    const seen = /* @__PURE__ */ new Map();
+    return data.map((row, idx) => {
+      const raw = getRowKey(row, idx);
+      const count = seen.get(raw) ?? 0;
+      seen.set(raw, count + 1);
+      return count > 0 ? `${raw}__${idx}` : raw;
+    });
+  }, [data, getRowKey]);
+  const hasDuplicateKeys = (0, import_react4.useMemo)(() => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const row of data) {
+      if (row == null) continue;
+      const k = getRowKey(row, 0);
+      if (seen.has(k)) return true;
+      seen.add(k);
+    }
+    return false;
+  }, [data, getRowKey]);
+  const getSafeRowKey = (0, import_react4.useCallback)(
+    (record, index) => {
+      if (!hasDuplicateKeys) return getRowKey(record, index);
+      return deduplicatedRowKeys[index] ?? getRowKey(record, index);
+    },
+    [getRowKey, hasDuplicateKeys, deduplicatedRowKeys]
+  );
   const getRawRowKey = (0, import_react4.useCallback)(
     (record, index) => {
       if (record == null) return index;
@@ -1788,16 +2034,13 @@ function BoltTable({
     },
     [rowKey]
   );
-  const normalizedSelectedKeys = (0, import_react4.useMemo)(
-    () => {
-      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 normalizedSelectedKeys = (0, import_react4.useMemo)(() => {
+    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)(getSafeRowKey);
+  getRowKeyRef.current = getSafeRowKey;
   const resolvedExpandedKeysRef = (0, import_react4.useRef)(resolvedExpandedKeys);
   resolvedExpandedKeysRef.current = resolvedExpandedKeys;
   const toggleExpandRef = (0, import_react4.useRef)(toggleExpand);
@@ -1980,7 +2223,9 @@ function BoltTable({
         }
         const scrollEl = tableAreaRef.current;
         if (!scrollEl) return;
-        const headers = scrollEl.querySelectorAll("[data-bt-header][data-column-key]");
+        const headers = scrollEl.querySelectorAll(
+          "[data-bt-header][data-column-key]"
+        );
         let newOverId = null;
         headers.forEach((h) => {
           const key = h.dataset.columnKey;
@@ -2022,10 +2267,7 @@ function BoltTable({
               const newIndex = items.indexOf(currentOverId);
               if (oldIndex === -1 || newIndex === -1) return items;
               const newOrder = arrayMove(items, oldIndex, newIndex);
-              setTimeout(
-                () => onColumnOrderChangeRef.current?.(newOrder),
-                0
-              );
+              setTimeout(() => onColumnOrderChangeRef.current?.(newOrder), 0);
               return newOrder;
             });
           });
@@ -2125,9 +2367,7 @@ function BoltTable({
     [leftPinned, unpinned, rightPinned]
   );
   const freshOrderedColumns = (0, import_react4.useMemo)(() => {
-    const latestMap = new Map(
-      initialColumnsRef.current.map((c) => [c.key, c])
-    );
+    const latestMap = new Map(initialColumnsRef.current.map((c) => [c.key, c]));
     return orderedColumns.map((col) => {
       if (col.key === "__select__" || col.key === "__expand__") return col;
       const latest = latestMap.get(col.key);
@@ -2166,6 +2406,11 @@ function BoltTable({
     }
     return offsets;
   }, [leftPinned, rightPinned]);
+  const columnGridIndexMap = (0, import_react4.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    orderedColumns.forEach((col, i) => map.set(col.key, i + 1));
+    return map;
+  }, [orderedColumns]);
   const handleTogglePin = (columnKey, pinned) => {
     setColumns(
       (prev) => prev.map((col) => col.key === columnKey ? { ...col, pinned } : col)
@@ -2184,22 +2429,27 @@ function BoltTable({
   };
   const [internalRowPinning, setInternalRowPinning] = (0, import_react4.useState)({ top: [], bottom: [] });
   const resolvedRowPinning = rowPinning === true ? internalRowPinning : rowPinning && typeof rowPinning === "object" ? rowPinning : void 0;
-  const handleRowPin = (0, import_react4.useCallback)((rk, pinned) => {
-    if (onRowPin) {
-      onRowPin(rk, pinned);
-      return;
-    }
-    if (rowPinning === true) {
-      setInternalRowPinning((prev) => {
-        const rkStr = String(rk);
-        const newTop = (prev.top ?? []).filter((k) => String(k) !== rkStr);
-        const newBottom = (prev.bottom ?? []).filter((k) => String(k) !== rkStr);
-        if (pinned === "top") newTop.push(rk);
-        else if (pinned === "bottom") newBottom.push(rk);
-        return { top: newTop, bottom: newBottom };
-      });
-    }
-  }, [onRowPin, rowPinning]);
+  const handleRowPin = (0, import_react4.useCallback)(
+    (rk, pinned) => {
+      if (onRowPin) {
+        onRowPin(rk, pinned);
+        return;
+      }
+      if (rowPinning === true) {
+        setInternalRowPinning((prev) => {
+          const rkStr = String(rk);
+          const newTop = (prev.top ?? []).filter((k) => String(k) !== rkStr);
+          const newBottom = (prev.bottom ?? []).filter(
+            (k) => String(k) !== rkStr
+          );
+          if (pinned === "top") newTop.push(rk);
+          else if (pinned === "bottom") newBottom.push(rk);
+          return { top: newTop, bottom: newBottom };
+        });
+      }
+    },
+    [onRowPin, rowPinning]
+  );
   const onSortChangeRef = (0, import_react4.useRef)(onSortChange);
   onSortChangeRef.current = onSortChange;
   const [sortState, setSortState] = (0, import_react4.useState)({ key: "", direction: null });
@@ -2222,6 +2472,7 @@ function BoltTable({
   const [columnFilters, setColumnFilters] = (0, import_react4.useState)(
     {}
   );
+  const [internalGlobalSearch, setInternalGlobalSearch] = (0, import_react4.useState)("");
   const handleColumnFilter = (0, import_react4.useCallback)(
     (columnKey, value) => {
       setColumnFilters((prev) => {
@@ -2246,6 +2497,20 @@ function BoltTable({
   columnsLookupRef.current = initialColumns;
   const processedData = (0, import_react4.useMemo)(() => {
     let result = data;
+    const globalSearch = globalSearchValue ?? internalGlobalSearch;
+    if (globalSearch) {
+      const searchLower = globalSearch.toLowerCase();
+      result = result.filter((row) => {
+        if (row == null) return false;
+        for (const key of Object.keys(row)) {
+          const val = row[key];
+          if (val != null && String(val).toLowerCase().includes(searchLower)) {
+            return true;
+          }
+        }
+        return false;
+      });
+    }
     if (!onFilterChangeRef.current) {
       const filterKeys = Object.keys(columnFilters);
       if (filterKeys.length > 0) {
@@ -2255,7 +2520,11 @@ function BoltTable({
             try {
               const col = columnsLookupRef.current.find((c) => c.key === key);
               if (typeof col?.filterFn === "function") {
-                return col.filterFn(columnFilters[key], row, col.dataIndex ?? key);
+                return col.filterFn(
+                  columnFilters[key],
+                  row,
+                  col.dataIndex ?? key
+                );
               }
               const cellVal = String(row[key] ?? "").toLowerCase();
               return cellVal.includes(columnFilters[key].toLowerCase());
@@ -2298,7 +2567,7 @@ function BoltTable({
       }
     }
     return result;
-  }, [data, sortState, columnFilters]);
+  }, [data, sortState, columnFilters, globalSearchValue, internalGlobalSearch]);
   const pinnedRowCacheRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
   const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = (0, import_react4.useMemo)(() => {
     if (!resolvedRowPinning || !resolvedRowPinning.top?.length && !resolvedRowPinning.bottom?.length) {
@@ -2310,19 +2579,23 @@ function BoltTable({
       };
     }
     const topKeySet = new Set((resolvedRowPinning.top ?? []).map(String));
-    const bottomKeySet = new Set((resolvedRowPinning.bottom ?? []).map(String));
+    const bottomKeySet = new Set(
+      (resolvedRowPinning.bottom ?? []).map(String)
+    );
     const topMap = /* @__PURE__ */ new Map();
     const bottomMap = /* @__PURE__ */ new Map();
     const rest = [];
     processedData.forEach((row, idx) => {
       if (row == null) return;
-      const key = getRowKey(row, idx);
+      const key = getSafeRowKey(row, idx);
       if (topKeySet.has(key)) {
         topMap.set(key, row);
-        if (keepPinnedRowsAcrossPages) pinnedRowCacheRef.current.set(key, row);
+        if (keepPinnedRowsAcrossPages)
+          pinnedRowCacheRef.current.set(key, row);
       } else if (bottomKeySet.has(key)) {
         bottomMap.set(key, row);
-        if (keepPinnedRowsAcrossPages) pinnedRowCacheRef.current.set(key, row);
+        if (keepPinnedRowsAcrossPages)
+          pinnedRowCacheRef.current.set(key, row);
       } else {
         rest.push(row);
       }
@@ -2340,7 +2613,8 @@ function BoltTable({
       }
       const allPinnedKeys = /* @__PURE__ */ new Set([...topKeySet, ...bottomKeySet]);
       for (const cachedKey of pinnedRowCacheRef.current.keys()) {
-        if (!allPinnedKeys.has(cachedKey)) pinnedRowCacheRef.current.delete(cachedKey);
+        if (!allPinnedKeys.has(cachedKey))
+          pinnedRowCacheRef.current.delete(cachedKey);
       }
     }
     const orderedTop = (resolvedRowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
@@ -2350,7 +2624,12 @@ function BoltTable({
       pinnedBottomRows: orderedBottom,
       unpinnedProcessedData: rest
     };
-  }, [processedData, resolvedRowPinning, getRowKey, keepPinnedRowsAcrossPages]);
+  }, [
+    processedData,
+    resolvedRowPinning,
+    getSafeRowKey,
+    keepPinnedRowsAcrossPages
+  ]);
   const pinnedTopHeight = pinnedTopRows.length * rowHeight;
   const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
   const pinnedTopKeySet = (0, import_react4.useMemo)(
@@ -2367,9 +2646,7 @@ function BoltTable({
   }, []);
   const [cellContextMenu, setCellContextMenu] = (0, import_react4.useState)(null);
   const cellMenuRef = (0, import_react4.useRef)(null);
-  const cellLongPressTimer = (0, import_react4.useRef)(
-    null
-  );
+  const cellLongPressTimer = (0, import_react4.useRef)(null);
   const cellTouchStart = (0, import_react4.useRef)(null);
   const cancelCellLongPress = (0, import_react4.useCallback)(() => {
     if (cellLongPressTimer.current) {
@@ -2396,10 +2673,11 @@ function BoltTable({
     };
   }, [cellContextMenu]);
   const columnFiltersKey = Object.keys(columnFilters).sort().map((k) => `${k}:${columnFilters[k]}`).join("|");
+  const activeGlobalSearch = globalSearchValue ?? internalGlobalSearch;
   import_react4.default.useEffect(() => {
     setInternalPage(1);
     tableAreaRef.current?.scrollTo({ top: 0 });
-  }, [columnFiltersKey]);
+  }, [columnFiltersKey, activeGlobalSearch]);
   const DEFAULT_PAGE_SIZE = 15;
   const [internalPage, setInternalPage] = (0, import_react4.useState)(1);
   const [internalPageSize, setInternalPageSize] = (0, import_react4.useState)(DEFAULT_PAGE_SIZE);
@@ -2445,6 +2723,17 @@ function BoltTable({
     return paginatedData;
   }, [shimmerData, infiniteLoadingShimmer, paginatedData]);
   const measuredExpandedHeights = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const measuredRowHeights = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const handleRowHeightChange = (0, import_react4.useCallback)(
+    (index, height) => {
+      if (!enableDynamicRowHeight) return;
+      const prev = measuredRowHeights.current.get(index);
+      if (prev === height) return;
+      measuredRowHeights.current.set(index, height);
+      rowVirtualizerRef.current?.measure();
+    },
+    [enableDynamicRowHeight]
+  );
   const expandedRowMeasureRafRef = (0, import_react4.useRef)(null);
   const handleExpandedRowResize = (0, import_react4.useCallback)(
     (rk, contentHeight) => {
@@ -2469,23 +2758,73 @@ function BoltTable({
       if (shimmerData) return rowHeight;
       const item = displayData[index];
       if (!item) return rowHeight;
-      const key = getRowKey(item, index);
-      if (!resolvedExpandedKeys.has(key)) return rowHeight;
+      const baseHeight = enableDynamicRowHeight ? measuredRowHeights.current.get(index) ?? rowHeight : rowHeight;
+      const key = getSafeRowKey(item, index);
+      if (!resolvedExpandedKeys.has(key)) return baseHeight;
       const cached = measuredExpandedHeights.current.get(key);
-      return cached ? rowHeight + cached : rowHeight + expandedRowHeight;
+      return cached ? baseHeight + cached : baseHeight + expandedRowHeight;
     },
     overscan: 5,
     getItemKey: (index) => {
       if (shimmerData) return `__shimmer_${index}__`;
       const item = displayData[index];
       if (!item) return `__fallback_${index}__`;
-      return getRowKey(item, index);
+      return getSafeRowKey(item, index);
     },
     paddingStart: pinnedTopHeight,
     paddingEnd: pinnedBottomHeight
   });
   const rowVirtualizerRef = (0, import_react4.useRef)(rowVirtualizer);
   rowVirtualizerRef.current = rowVirtualizer;
+  const scrollLeftRef = (0, import_react4.useRef)(0);
+  const [visibleColumnRange, setVisibleColumnRange] = (0, import_react4.useState)(null);
+  import_react4.default.useEffect(() => {
+    if (!enableColumnVirtualization) return;
+    const el = tableAreaRef.current;
+    if (!el) return;
+    const updateVisibleColumns = () => {
+      const scrollLeft = el.scrollLeft;
+      scrollLeftRef.current = scrollLeft;
+      const viewportWidth = el.clientWidth;
+      const viewStart = scrollLeft;
+      const viewEnd = scrollLeft + viewportWidth;
+      let cumWidth = 0;
+      let startIdx = -1;
+      let endIdx = orderedColumns.length - 1;
+      for (let i = 0; i < orderedColumns.length; i++) {
+        const col = orderedColumns[i];
+        const colWidth = col.width ?? 150;
+        const colStart = cumWidth;
+        const colEnd = cumWidth + colWidth;
+        cumWidth = colEnd;
+        if (col.pinned) continue;
+        if (startIdx === -1 && colEnd > viewStart) {
+          startIdx = Math.max(0, i - 1);
+        }
+        if (colStart > viewEnd) {
+          endIdx = Math.min(orderedColumns.length - 1, i + 1);
+          break;
+        }
+      }
+      if (startIdx === -1) startIdx = 0;
+      setVisibleColumnRange((prev) => {
+        if (prev && prev.start === startIdx && prev.end === endIdx) return prev;
+        return { start: startIdx, end: endIdx };
+      });
+    };
+    updateVisibleColumns();
+    el.addEventListener("scroll", updateVisibleColumns, { passive: true });
+    return () => el.removeEventListener("scroll", updateVisibleColumns);
+  }, [enableColumnVirtualization, orderedColumns]);
+  const virtualizedColumns = (0, import_react4.useMemo)(() => {
+    if (!enableColumnVirtualization || !visibleColumnRange)
+      return freshOrderedColumns;
+    return freshOrderedColumns.filter((col, idx) => {
+      if (col.pinned) return true;
+      if (col.key === "__select__" || col.key === "__expand__") return true;
+      return idx >= visibleColumnRange.start && idx <= visibleColumnRange.end;
+    });
+  }, [enableColumnVirtualization, visibleColumnRange, freshOrderedColumns]);
   const resolvedExpandedKeysFingerprint = Array.from(resolvedExpandedKeys).sort().join(",");
   import_react4.default.useLayoutEffect(() => {
     rowVirtualizer.measure();
@@ -2552,7 +2891,10 @@ function BoltTable({
   }, [pgCurrent, needsClientPagination]);
   const getPageNumbers = () => {
     if (totalPages <= 7)
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
+      return Array.from(
+        { length: totalPages },
+        (_, i) => i + 1
+      );
     const leftSibling = Math.max(currentPage - 1, 2);
     const showLeftEllipsis = leftSibling > 2;
     const rightSibling = Math.min(currentPage + 1, totalPages - 1);
@@ -2563,7 +2905,10 @@ function BoltTable({
       return [
         1,
         "ellipsis-left",
-        ...Array.from({ length: 5 }, (_, i) => totalPages - 4 + i)
+        ...Array.from(
+          { length: 5 },
+          (_, i) => totalPages - 4 + i
+        )
       ];
     return [
       1,
@@ -2634,6 +2979,190 @@ function BoltTable({
           }
           ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
         ` }),
+          (!hideGlobalSearch || showColumnSettings) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 8px",
+                borderBottom: "1px solid rgba(128,128,128,0.2)",
+                fontSize: 12,
+                flexShrink: 0
+              },
+              children: [
+                !hideGlobalSearch && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      flex: "1 1 0%",
+                      position: "relative"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "span",
+                        {
+                          style: { display: "flex", color: "GrayText", flexShrink: 0 },
+                          children: icons?.search ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, { style: { width: 14, height: 14 } })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Search all columns...",
+                          value: globalSearchValue ?? internalGlobalSearch,
+                          onChange: (e) => {
+                            const v = e.target.value;
+                            if (onGlobalSearchChange) onGlobalSearchChange(v);
+                            else setInternalGlobalSearch(v);
+                          },
+                          style: {
+                            flex: "1 1 0%",
+                            border: "none",
+                            outline: "none",
+                            background: "transparent",
+                            font: "inherit",
+                            color: "inherit",
+                            padding: "4px 6px",
+                            minWidth: 0
+                          }
+                        }
+                      ),
+                      (globalSearchValue ?? internalGlobalSearch) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            if (onGlobalSearchChange) onGlobalSearchChange("");
+                            else setInternalGlobalSearch("");
+                          },
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 2,
+                            color: "GrayText",
+                            flexShrink: 0
+                          },
+                          children: icons?.close ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { style: { width: 12, height: 12 } })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                toolbarContent,
+                showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setShowColumnPicker((p) => !p),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        background: "none",
+                        border: "1px solid rgba(128,128,128,0.2)",
+                        borderRadius: 4,
+                        cursor: "pointer",
+                        padding: "4px 6px",
+                        color: "inherit",
+                        gap: 4,
+                        fontSize: 12
+                      },
+                      title: "Column settings",
+                      children: [
+                        icons?.columns ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnsIcon, { style: { width: 14, height: 14 } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: columnSettingsLabel ?? "Columns" })
+                      ]
+                    }
+                  ),
+                  showColumnPicker && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "div",
+                    {
+                      ref: columnPickerRef,
+                      style: {
+                        position: "absolute",
+                        top: "100%",
+                        right: 0,
+                        zIndex: 99999,
+                        minWidth: 200,
+                        maxHeight: 320,
+                        overflowY: "auto",
+                        borderRadius: 8,
+                        border: "1px solid rgba(128,128,128,0.2)",
+                        boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
+                        backdropFilter: "blur(16px)",
+                        WebkitBackdropFilter: "blur(16px)",
+                        backgroundColor: "rgba(128,128,128,0.08)",
+                        padding: "4px 0",
+                        marginTop: 4
+                      },
+                      children: initialColumns.filter(
+                        (c) => c.key !== "__select__" && c.key !== "__expand__"
+                      ).map((col) => {
+                        const current = columns.find((c) => c.key === col.key);
+                        const isHidden = current?.hidden ?? false;
+                        const isPinned = !!current?.pinned;
+                        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                          "label",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                              padding: "6px 12px",
+                              cursor: isPinned ? "not-allowed" : "pointer",
+                              opacity: isPinned ? 0.5 : 1,
+                              fontSize: 12
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  checked: !isHidden,
+                                  disabled: isPinned,
+                                  onChange: () => {
+                                    if (isPinned) return;
+                                    handleToggleHide(col.key);
+                                  },
+                                  style: {
+                                    cursor: isPinned ? "not-allowed" : "pointer",
+                                    accentColor
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                "span",
+                                {
+                                  style: {
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap"
+                                  },
+                                  children: typeof col.title === "string" ? col.title : col.key
+                                }
+                              )
+                            ]
+                          },
+                          col.key
+                        );
+                      })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
@@ -2778,19 +3307,20 @@ function BoltTable({
                           ...isEmpty ? { height: "100%" } : {}
                         },
                         onContextMenu: (e) => {
-                          const cell = e.target.closest("[data-bt-cell]");
+                          const cell = e.target.closest(
+                            "[data-bt-cell]"
+                          );
                           if (!cell) return;
                           const rk = cell.dataset.rowKey;
                           const ck = cell.dataset.columnKey;
                           if (!rk || !ck) return;
-                          const col = freshOrderedColumns.find(
-                            (c) => c.key === ck
-                          );
+                          const col = freshOrderedColumns.find((c) => c.key === ck);
                           const hasCopy = !!col?.copy;
                           const hasRowPin = !!rowPinning;
                           const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
                           const hasEdit = !!col?.editable && !col?.render && !!onEdit;
-                          if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit) return;
+                          if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit)
+                            return;
                           e.preventDefault();
                           setCellContextMenu({
                             x: Math.min(e.clientX, window.innerWidth - 200),
@@ -2801,7 +3331,9 @@ function BoltTable({
                         },
                         onTouchStart: (e) => {
                           cancelCellLongPress();
-                          const cell = e.target.closest("[data-bt-cell]");
+                          const cell = e.target.closest(
+                            "[data-bt-cell]"
+                          );
                           if (!cell) return;
                           const touch = e.touches[0];
                           cellTouchStart.current = {
@@ -2813,14 +3345,13 @@ function BoltTable({
                           cellLongPressTimer.current = setTimeout(() => {
                             cellLongPressTimer.current = null;
                             if (!rk || !ck) return;
-                            const col = freshOrderedColumns.find(
-                              (c) => c.key === ck
-                            );
+                            const col = freshOrderedColumns.find((c) => c.key === ck);
                             const hasCopy = !!col?.copy;
                             const hasRowPin = !!rowPinning;
                             const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
                             const hasEdit = !!col?.editable && !col?.render && !!onEdit;
-                            if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit) return;
+                            if (!hasCopy && !hasRowPin && !hasCellItems && !hasEdit)
+                              return;
                             setCellContextMenu({
                               x: Math.min(touch.clientX, window.innerWidth - 200),
                               y: Math.min(touch.clientY, window.innerHeight - 200),
@@ -2841,7 +3372,8 @@ function BoltTable({
                         onTouchCancel: cancelCellLongPress,
                         onClick: onRowClick ? (e) => {
                           const target = e.target;
-                          if (target.closest("input, button, a, select, textarea")) return;
+                          if (target.closest("input, button, a, select, textarea"))
+                            return;
                           const cell = target.closest("[data-bt-cell]");
                           if (!cell) return;
                           const rk = cell.dataset.rowKey;
@@ -2849,21 +3381,21 @@ function BoltTable({
                           for (let i = 0; i < displayData.length; i++) {
                             const row = displayData[i];
                             if (row == null) continue;
-                            if (getRowKey(row, i) === rk) {
+                            if (getSafeRowKey(row, i) === rk) {
                               onRowClick(row, i, e);
                               return;
                             }
                           }
                           for (let i = 0; i < pinnedTopRows.length; i++) {
                             if (pinnedTopRows[i] == null) continue;
-                            if (getRowKey(pinnedTopRows[i], i) === rk) {
+                            if (getSafeRowKey(pinnedTopRows[i], i) === rk) {
                               onRowClick(pinnedTopRows[i], i, e);
                               return;
                             }
                           }
                           for (let i = 0; i < pinnedBottomRows.length; i++) {
                             if (pinnedBottomRows[i] == null) continue;
-                            if (getRowKey(pinnedBottomRows[i], i) === rk) {
+                            if (getSafeRowKey(pinnedBottomRows[i], i) === rk) {
                               onRowClick(pinnedBottomRows[i], i, e);
                               return;
                             }
@@ -2973,7 +3505,11 @@ function BoltTable({
                                             });
                                           }
                                         },
-                                        style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
+                                        style: {
+                                          cursor: "pointer",
+                                          accentColor,
+                                          backgroundColor: "#94A3B8"
+                                        }
                                       }
                                     )
                                   },
@@ -3033,7 +3569,10 @@ function BoltTable({
                                   filterValue: columnFilters[column.key] ?? "",
                                   onFilter: handleColumnFilter,
                                   onClearFilter: handleClearFilter,
-                                  customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
+                                  customContextMenuItems: column.columnHeaderContextMenuItems ? [
+                                    ...columnContextMenuItems ?? [],
+                                    ...column.columnHeaderContextMenuItems
+                                  ] : columnContextMenuItems,
                                   disabledFilters,
                                   headerGridRow: leafGridRow,
                                   headerHeight: leafHeight,
@@ -3085,14 +3624,14 @@ function BoltTable({
                             TableBody_default,
                             {
                               data: displayData,
-                              orderedColumns: freshOrderedColumns,
+                              orderedColumns: virtualizedColumns,
                               rowVirtualizer,
                               columnOffsets,
                               styles,
                               classNames,
                               rowSelection: !showShimmer ? rowSelection : void 0,
                               normalizedSelectedKeys,
-                              getRowKey,
+                              getRowKey: getSafeRowKey,
                               getRawRowKey,
                               expandable: !showShimmer ? expandable : void 0,
                               resolvedExpandedKeys,
@@ -3113,7 +3652,10 @@ function BoltTable({
                               bodyGridRow: hasColumnGroups ? 3 : 2,
                               onEdit,
                               editingCell,
-                              onEditComplete: handleEditComplete
+                              onEditComplete: handleEditComplete,
+                              enableDynamicRowHeight,
+                              onRowHeightChange: handleRowHeightChange,
+                              columnGridIndexMap
                             }
                           )
                         ]
@@ -3143,39 +3685,53 @@ function BoltTable({
                 ...styles.pagination
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flex: "1 1 0%", alignItems: "center" }, children: (() => {
-                  const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
-                  const rangeEnd = Math.min(currentPage * pageSize, total);
-                  return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                    "span",
-                    {
-                      className: classNames.paginationInfo ?? "",
-                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
-                      children: [
-                        "Showing",
-                        " ",
-                        pagination.showTotal(total, [rangeStart, rangeEnd]),
-                        " of",
-                        " ",
-                        total,
-                        " items"
-                      ]
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                    "span",
-                    {
-                      className: classNames.paginationInfo ?? "",
-                      style: { color: "GrayText", fontSize: 12, ...styles.paginationInfo },
-                      children: [
-                        rangeStart,
-                        "\u2013",
-                        rangeEnd,
-                        " of ",
-                        total
-                      ]
-                    }
-                  );
-                })() }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    style: { display: "flex", flex: "1 1 0%", alignItems: "center" },
+                    children: (() => {
+                      const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+                      const rangeEnd = Math.min(currentPage * pageSize, total);
+                      return typeof pagination === "object" && pagination?.showTotal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                        "span",
+                        {
+                          className: classNames.paginationInfo ?? "",
+                          style: {
+                            color: "GrayText",
+                            fontSize: 12,
+                            ...styles.paginationInfo
+                          },
+                          children: [
+                            "Showing",
+                            " ",
+                            pagination.showTotal(total, [rangeStart, rangeEnd]),
+                            " of",
+                            " ",
+                            total,
+                            " items"
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                        "span",
+                        {
+                          className: classNames.paginationInfo ?? "",
+                          style: {
+                            color: "GrayText",
+                            fontSize: 12,
+                            ...styles.paginationInfo
+                          },
+                          children: [
+                            rangeStart,
+                            "\u2013",
+                            rangeEnd,
+                            " of ",
+                            total
+                          ]
+                        }
+                      );
+                    })()
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
@@ -3458,9 +4014,7 @@ function BoltTable({
         (c) => c.key === cellContextMenu.columnKey
       );
       const isPinnedTop = pinnedTopKeySet.has(cellContextMenu.rowKey);
-      const isPinnedBottom = pinnedBottomKeySet.has(
-        cellContextMenu.rowKey
-      );
+      const isPinnedBottom = pinnedBottomKeySet.has(cellContextMenu.rowKey);
       const hasCopy = !!menuCol?.copy;
       const hasRowPin = !!rowPinning;
       const hasEdit = !!menuCol?.editable && !menuCol?.render && !!onEdit;
@@ -3473,7 +4027,7 @@ function BoltTable({
       ];
       for (let i = 0; i < allRows.length; i++) {
         if (allRows[i] == null) continue;
-        const rk = getRowKey(allRows[i], i);
+        const rk = getSafeRowKey(allRows[i], i);
         if (rk === cellContextMenu.rowKey) {
           menuRecord = allRows[i];
           menuRowIndex = i;
@@ -3675,7 +4229,20 @@ function BoltTable({
                       setCellContextMenu(null);
                     },
                     children: [
-                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { display: "flex", width: 14, height: 14, alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: item.icon }),
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            width: 14,
+                            height: 14,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          children: item.icon
+                        }
+                      ),
                       item.label
                     ]
                   },