bolt-table 0.1.14 → 0.1.15

package/dist/index.mjs

@@ -682,9 +682,6 @@ var DraggableHeader = React.memo(
       )
     ] });
   },
-  // ── Custom memo comparator ─────────────────────────────────────────────────
-  // Only re-render when props that actually affect this header's output change.
-  // This prevents a sort/filter change on one column from re-rendering all others.
   (prevProps, nextProps) => {
     return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue;
   }
@@ -974,11 +971,6 @@ var Cell = React3.memo(
       }
     );
   },
-  // ── Custom memo comparator ─────────────────────────────────────────────────
-  // Minimizes re-renders:
-  // - __select__ cells: re-render only when selection changes
-  // - __expand__ cells: re-render only when expand state changes
-  // - Normal cells: re-render only when value or rowIndex changes
   (prev, next) => {
     if (prev.isLoading !== next.isLoading) return false;
     if (prev.column.key === "__select__") {
@@ -1097,64 +1089,52 @@ var TableBody = ({
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
-            return (
-              /*
-               * Row wrapper div:
-               * - data-row-key: used by BoltTable's DOM-based hover system
-               *   (mouseover reads this attribute to apply hover styles
-               *   across all column divs for the same row simultaneously)
-               * - data-selected: presence/absence attribute consumed by the
-               *   CSS injected by BoltTable for selected row background
-               * - Absolute positioned at virtualRow.start for virtualization
-               * - Height = virtualRow.size (includes expanded row height)
-               */
-              /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  "data-row-key": rowKey,
-                  "data-column-key": col.key,
-                  "data-bt-cell": "",
-                  "data-selected": isSelected || void 0,
-                  style: {
-                    position: "absolute",
-                    top: `${virtualRow.start}px`,
-                    left: 0,
-                    right: 0,
-                    height: `${virtualRow.size}px`
-                  },
-                  children: /* @__PURE__ */ jsx4(
-                    "div",
-                    {
-                      style: {
-                        height: `${rowHeight}px`,
-                        position: "relative"
-                      },
-                      children: /* @__PURE__ */ jsx4(
-                        Cell,
-                        {
-                          value: cellValue,
-                          record: row,
-                          column: col,
-                          rowIndex: virtualRow.index,
-                          classNames,
-                          styles,
-                          isSelected,
-                          isExpanded,
-                          rowSelection,
-                          normalizedSelectedKeys,
-                          rowKey,
-                          allData: allDataForSelection,
-                          getRowKey,
-                          accentColor,
-                          isLoading: isRowShimmer,
-                          recordFingerprint
-                        }
-                      )
-                    }
-                  )
+            return /* @__PURE__ */ jsx4(
+              "div",
+              {
+                "data-row-key": rowKey,
+                "data-column-key": col.key,
+                "data-bt-cell": "",
+                "data-selected": isSelected || void 0,
+                style: {
+                  position: "absolute",
+                  top: `${virtualRow.start}px`,
+                  left: 0,
+                  right: 0,
+                  height: `${virtualRow.size}px`
                 },
-                `${rowKey}-${col.key}`
-              )
+                children: /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      height: `${rowHeight}px`,
+                      position: "relative"
+                    },
+                    children: /* @__PURE__ */ jsx4(
+                      Cell,
+                      {
+                        value: cellValue,
+                        record: row,
+                        column: col,
+                        rowIndex: virtualRow.index,
+                        classNames,
+                        styles,
+                        isSelected,
+                        isExpanded,
+                        rowSelection,
+                        normalizedSelectedKeys,
+                        rowKey,
+                        allData: allDataForSelection,
+                        getRowKey,
+                        accentColor,
+                        isLoading: isRowShimmer,
+                        recordFingerprint
+                      }
+                    )
+                  }
+                )
+              },
+              `${rowKey}-${col.key}`
             );
           })
         },
@@ -1170,8 +1150,6 @@ var TableBody = ({
           height: `${totalSize}px`,
           position: "relative",
           zIndex: 15,
-          // pointerEvents: none on the overlay so hover/click pass through
-          // to the cells below for rows that are NOT expanded
           pointerEvents: "none"
         },
         children: virtualItems.map((virtualRow) => {
@@ -1203,7 +1181,6 @@ var TableBody = ({
             {
               style: {
                 position: "absolute",
-                // Position immediately below the row's base height
                 top: virtualRow.start + rowHeight,
                 left: 0,
                 right: 0
@@ -1811,7 +1788,6 @@ function BoltTable({
           areaRect,
           headerLeftInContent,
           40,
-          // minimum column width
           scrollTop,
           scrollLeft,
           headerLeftInContent + startWidth
@@ -2287,157 +2263,170 @@ function BoltTable({
                   flexGrow: 0
                 } : { flex: "1 1 0%" }
               },
-              children: layoutLoading ? (
-                /*
-                 * ── Layout loading skeleton ──────────────────────────────────
-                 * Shown when layoutLoading=true. Renders real column headers
-                 * (based on orderedColumns) alongside shimmer body rows.
-                 * Used for initial page load when column widths are not yet known.
-                 */
-                /* @__PURE__ */ jsx5(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      inset: 0,
-                      overflow: "auto",
-                      contain: "layout paint"
-                    },
-                    children: /* @__PURE__ */ jsxs5(
+              children: layoutLoading ? /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "auto",
+                    contain: "layout paint"
+                  },
+                  children: /* @__PURE__ */ jsxs5(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gridTemplateColumns,
+                        gridTemplateRows: "36px auto",
+                        minWidth: `${totalTableWidth}px`,
+                        width: "100%",
+                        position: "relative"
+                      },
+                      children: [
+                        orderedColumns.map((column) => {
+                          const isPinned = !!column.pinned;
+                          const offset = columnOffsets.get(column.key);
+                          const isSystem = column.key === "__select__" || column.key === "__expand__";
+                          return /* @__PURE__ */ jsx5(
+                            "div",
+                            {
+                              className: isPinned ? classNames.pinnedHeader ?? "" : classNames.header ?? "",
+                              style: {
+                                display: "flex",
+                                height: 36,
+                                alignItems: "center",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                backdropFilter: "blur(8px)",
+                                position: "sticky",
+                                top: 0,
+                                zIndex: isPinned ? 13 : 10,
+                                ...isPinned ? {
+                                  [column.pinned]: offset ?? 0,
+                                  ...styles.pinnedHeader
+                                } : styles.header,
+                                paddingLeft: isSystem ? 0 : 8,
+                                paddingRight: isSystem ? 0 : 8
+                              }
+                            },
+                            column.key
+                          );
+                        }),
+                        /* @__PURE__ */ jsx5("div", { style: { gridColumn: "1 / -1" }, children: Array.from({ length: shimmerCount }).map((_, rowIndex) => /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              display: "grid",
+                              gridTemplateColumns,
+                              height: rowHeight
+                            },
+                            children: orderedColumns.map((column, colIndex) => {
+                              const isPinned = !!column.pinned;
+                              const offset = columnOffsets.get(column.key);
+                              const isSystem = column.key === "__select__" || column.key === "__expand__";
+                              const widthPercent = SHIMMER_WIDTHS2[(rowIndex * 7 + colIndex) % SHIMMER_WIDTHS2.length];
+                              return /* @__PURE__ */ jsx5(
+                                "div",
+                                {
+                                  className: isPinned ? classNames.pinnedCell ?? "" : "",
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                    ...isPinned ? {
+                                      position: "sticky",
+                                      [column.pinned]: offset ?? 0,
+                                      zIndex: 5,
+                                      ...styles.pinnedCell
+                                    } : {},
+                                    paddingLeft: isSystem ? 0 : 8,
+                                    paddingRight: isSystem ? 0 : 8,
+                                    justifyContent: isSystem ? "center" : void 0
+                                  },
+                                  children: /* @__PURE__ */ jsx5(
+                                    "div",
+                                    {
+                                      style: {
+                                        backgroundColor: "rgba(100, 116, 139, 0.15)",
+                                        animation: "bt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                                        borderRadius: isSystem ? 3 : 4,
+                                        height: isSystem ? 16 : 14,
+                                        width: isSystem ? 16 : `${widthPercent}%`,
+                                        animationDelay: `${(rowIndex * 7 + colIndex) * 50}ms`
+                                      }
+                                    }
+                                  )
+                                },
+                                column.key
+                              );
+                            })
+                          },
+                          rowIndex
+                        )) })
+                      ]
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  ref: tableAreaCallbackRef,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "auto",
+                    contain: "layout paint"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(ResizeOverlay_default, { ref: resizeOverlayRef, accentColor }),
+                    /* @__PURE__ */ jsxs5(
                       "div",
                       {
                         style: {
                           display: "grid",
                           gridTemplateColumns,
-                          gridTemplateRows: "36px auto",
+                          gridTemplateRows: isEmpty ? "36px 1fr" : `36px ${virtualTotalSize}px`,
                           minWidth: `${totalTableWidth}px`,
                           width: "100%",
-                          position: "relative"
+                          position: "relative",
+                          ...isEmpty ? { height: "100%" } : {}
                         },
-                        children: [
-                          orderedColumns.map((column) => {
-                            const isPinned = !!column.pinned;
-                            const offset = columnOffsets.get(column.key);
-                            const isSystem = column.key === "__select__" || column.key === "__expand__";
-                            return /* @__PURE__ */ jsx5(
-                              "div",
-                              {
-                                className: isPinned ? classNames.pinnedHeader ?? "" : classNames.header ?? "",
-                                style: {
-                                  display: "flex",
-                                  height: 36,
-                                  alignItems: "center",
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis",
-                                  whiteSpace: "nowrap",
-                                  borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                  backdropFilter: "blur(8px)",
-                                  position: "sticky",
-                                  top: 0,
-                                  zIndex: isPinned ? 13 : 10,
-                                  ...isPinned ? {
-                                    [column.pinned]: offset ?? 0,
-                                    ...styles.pinnedHeader
-                                  } : styles.header,
-                                  paddingLeft: isSystem ? 0 : 8,
-                                  paddingRight: isSystem ? 0 : 8
-                                }
-                              },
-                              column.key
-                            );
-                          }),
-                          /* @__PURE__ */ jsx5("div", { style: { gridColumn: "1 / -1" }, children: Array.from({ length: shimmerCount }).map((_, rowIndex) => /* @__PURE__ */ jsx5(
-                            "div",
-                            {
-                              style: {
-                                display: "grid",
-                                gridTemplateColumns,
-                                height: rowHeight
-                              },
-                              children: orderedColumns.map((column, colIndex) => {
-                                const isPinned = !!column.pinned;
-                                const offset = columnOffsets.get(column.key);
-                                const isSystem = column.key === "__select__" || column.key === "__expand__";
-                                const widthPercent = SHIMMER_WIDTHS2[(rowIndex * 7 + colIndex) % SHIMMER_WIDTHS2.length];
-                                return /* @__PURE__ */ jsx5(
-                                  "div",
-                                  {
-                                    className: isPinned ? classNames.pinnedCell ?? "" : "",
-                                    style: {
-                                      display: "flex",
-                                      alignItems: "center",
-                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                      ...isPinned ? {
-                                        position: "sticky",
-                                        [column.pinned]: offset ?? 0,
-                                        zIndex: 5,
-                                        ...styles.pinnedCell
-                                      } : {},
-                                      paddingLeft: isSystem ? 0 : 8,
-                                      paddingRight: isSystem ? 0 : 8,
-                                      justifyContent: isSystem ? "center" : void 0
-                                    },
-                                    children: /* @__PURE__ */ jsx5(
-                                      "div",
-                                      {
-                                        style: {
-                                          backgroundColor: "rgba(100, 116, 139, 0.15)",
-                                          animation: "bt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-                                          borderRadius: isSystem ? 3 : 4,
-                                          height: isSystem ? 16 : 14,
-                                          width: isSystem ? 16 : `${widthPercent}%`,
-                                          animationDelay: `${(rowIndex * 7 + colIndex) * 50}ms`
-                                        }
-                                      }
-                                    )
-                                  },
-                                  column.key
-                                );
-                              })
-                            },
-                            rowIndex
-                          )) })
-                        ]
-                      }
-                    )
-                  }
-                )
-              ) : (
-                /*
-                 * ── Main scroll container ────────────────────────────────────
-                 * absolute inset-0 so it fills whatever height the wrapper resolves to.
-                 * contain: layout paint — browser optimization hint that this element
-                 * is a layout and paint boundary (improves compositing performance).
-                 */
-                /* @__PURE__ */ jsxs5(
-                  "div",
-                  {
-                    ref: tableAreaCallbackRef,
-                    style: {
-                      position: "absolute",
-                      inset: 0,
-                      overflow: "auto",
-                      contain: "layout paint"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx5(ResizeOverlay_default, { ref: resizeOverlayRef, accentColor }),
-                      /* @__PURE__ */ jsxs5(
-                        "div",
-                        {
-                          style: {
-                            display: "grid",
-                            gridTemplateColumns,
-                            gridTemplateRows: isEmpty ? "36px 1fr" : `36px ${virtualTotalSize}px`,
-                            minWidth: `${totalTableWidth}px`,
-                            width: "100%",
-                            position: "relative",
-                            ...isEmpty ? { height: "100%" } : {}
-                          },
-                          onContextMenu: (e) => {
-                            const cell = e.target.closest("[data-bt-cell]");
-                            if (!cell) return;
-                            const rk = cell.dataset.rowKey;
-                            const ck = cell.dataset.columnKey;
+                        onContextMenu: (e) => {
+                          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 hasCopy = col?.copy;
+                          const hasRowPin = !!onRowPin;
+                          if (!hasCopy && !hasRowPin) return;
+                          e.preventDefault();
+                          setCellContextMenu({
+                            x: Math.min(e.clientX, window.innerWidth - 200),
+                            y: Math.min(e.clientY, window.innerHeight - 200),
+                            rowKey: rk,
+                            columnKey: ck
+                          });
+                        },
+                        onTouchStart: (e) => {
+                          cancelCellLongPress();
+                          const cell = e.target.closest("[data-bt-cell]");
+                          if (!cell) return;
+                          const touch = e.touches[0];
+                          cellTouchStart.current = {
+                            x: touch.clientX,
+                            y: touch.clientY
+                          };
+                          const rk = cell.dataset.rowKey;
+                          const ck = cell.dataset.columnKey;
+                          cellLongPressTimer.current = setTimeout(() => {
+                            cellLongPressTimer.current = null;
                             if (!rk || !ck) return;
                             const col = freshOrderedColumns.find(
                               (c) => c.key === ck
@@ -2445,254 +2434,211 @@ function BoltTable({
                             const hasCopy = col?.copy;
                             const hasRowPin = !!onRowPin;
                             if (!hasCopy && !hasRowPin) return;
-                            e.preventDefault();
                             setCellContextMenu({
-                              x: Math.min(e.clientX, window.innerWidth - 200),
-                              y: Math.min(e.clientY, window.innerHeight - 200),
+                              x: Math.min(touch.clientX, window.innerWidth - 200),
+                              y: Math.min(touch.clientY, window.innerHeight - 200),
                               rowKey: rk,
                               columnKey: ck
                             });
-                          },
-                          onTouchStart: (e) => {
+                          }, 500);
+                        },
+                        onTouchMove: (e) => {
+                          if (!cellTouchStart.current) return;
+                          const touch = e.touches[0];
+                          const dx = touch.clientX - cellTouchStart.current.x;
+                          const dy = touch.clientY - cellTouchStart.current.y;
+                          if (Math.abs(dx) > 10 || Math.abs(dy) > 10)
                             cancelCellLongPress();
-                            const cell = e.target.closest("[data-bt-cell]");
-                            if (!cell) return;
-                            const touch = e.touches[0];
-                            cellTouchStart.current = {
-                              x: touch.clientX,
-                              y: touch.clientY
-                            };
-                            const rk = cell.dataset.rowKey;
-                            const ck = cell.dataset.columnKey;
-                            cellLongPressTimer.current = setTimeout(() => {
-                              cellLongPressTimer.current = null;
-                              if (!rk || !ck) return;
-                              const col = freshOrderedColumns.find(
-                                (c) => c.key === ck
-                              );
-                              const hasCopy = col?.copy;
-                              const hasRowPin = !!onRowPin;
-                              if (!hasCopy && !hasRowPin) return;
-                              setCellContextMenu({
-                                x: Math.min(touch.clientX, window.innerWidth - 200),
-                                y: Math.min(touch.clientY, window.innerHeight - 200),
-                                rowKey: rk,
-                                columnKey: ck
-                              });
-                            }, 500);
-                          },
-                          onTouchMove: (e) => {
-                            if (!cellTouchStart.current) return;
-                            const touch = e.touches[0];
-                            const dx = touch.clientX - cellTouchStart.current.x;
-                            const dy = touch.clientY - cellTouchStart.current.y;
-                            if (Math.abs(dx) > 10 || Math.abs(dy) > 10)
-                              cancelCellLongPress();
-                          },
-                          onTouchEnd: cancelCellLongPress,
-                          onTouchCancel: cancelCellLongPress,
-                          children: [
-                            orderedColumns.map((column, visualIndex) => {
-                              if (column.key === "__select__" && rowSelection) {
-                                return /* @__PURE__ */ jsx5(
-                                  "div",
-                                  {
-                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
-                                    style: {
-                                      display: "flex",
-                                      height: 36,
-                                      alignItems: "center",
-                                      justifyContent: "center",
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap",
-                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                      backgroundColor: styles?.pinnedBg,
-                                      position: "sticky",
-                                      left: columnOffsets.get("__select__") ?? 0,
-                                      top: 0,
-                                      zIndex: 13,
-                                      width: "48px",
-                                      ...styles.header,
-                                      ...styles.pinnedHeader
-                                    },
-                                    children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx5(
-                                      "input",
-                                      {
-                                        type: "checkbox",
-                                        checked: data.length > 0 && normalizedSelectedKeys.length === data.length,
-                                        ref: (input) => {
-                                          if (input) {
-                                            input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < data.length;
-                                          }
-                                        },
-                                        onChange: (e) => {
-                                          if (e.target.checked) {
-                                            const allKeys = data.map(
-                                              (row, idx) => getRowKey(row, idx)
-                                            );
-                                            rowSelection.onSelectAll?.(
-                                              true,
-                                              data,
-                                              data
-                                            );
-                                            rowSelection.onChange?.(allKeys, data, {
-                                              type: "all"
-                                            });
-                                          } else {
-                                            rowSelection.onSelectAll?.(false, [], data);
-                                            rowSelection.onChange?.([], [], {
-                                              type: "all"
-                                            });
-                                          }
-                                        },
-                                        style: { cursor: "pointer", accentColor }
-                                      }
-                                    )
+                        },
+                        onTouchEnd: cancelCellLongPress,
+                        onTouchCancel: cancelCellLongPress,
+                        children: [
+                          orderedColumns.map((column, visualIndex) => {
+                            if (column.key === "__select__" && rowSelection) {
+                              return /* @__PURE__ */ jsx5(
+                                "div",
+                                {
+                                  className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                  style: {
+                                    display: "flex",
+                                    height: 36,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                    backgroundColor: styles?.pinnedBg,
+                                    position: "sticky",
+                                    left: columnOffsets.get("__select__") ?? 0,
+                                    top: 0,
+                                    zIndex: 13,
+                                    width: "48px",
+                                    ...styles.header,
+                                    ...styles.pinnedHeader
                                   },
-                                  "__select__"
-                                );
-                              }
-                              if (column.key === "__expand__") {
-                                return /* @__PURE__ */ jsx5(
-                                  "div",
-                                  {
-                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
-                                    style: {
-                                      display: "flex",
-                                      height: 36,
-                                      alignItems: "center",
-                                      justifyContent: "center",
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap",
-                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                      backgroundColor: styles?.pinnedBg,
-                                      position: "sticky",
-                                      left: columnOffsets.get("__expand__") ?? 0,
-                                      top: 0,
-                                      zIndex: 13,
-                                      width: "40px",
-                                      ...styles.header,
-                                      ...styles.pinnedHeader
+                                  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx5(
+                                    "input",
+                                    {
+                                      type: "checkbox",
+                                      checked: data.length > 0 && normalizedSelectedKeys.length === data.length,
+                                      ref: (input) => {
+                                        if (input) {
+                                          input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < data.length;
+                                        }
+                                      },
+                                      onChange: (e) => {
+                                        if (e.target.checked) {
+                                          const allKeys = data.map(
+                                            (row, idx) => getRowKey(row, idx)
+                                          );
+                                          rowSelection.onSelectAll?.(
+                                            true,
+                                            data,
+                                            data
+                                          );
+                                          rowSelection.onChange?.(allKeys, data, {
+                                            type: "all"
+                                          });
+                                        } else {
+                                          rowSelection.onSelectAll?.(false, [], data);
+                                          rowSelection.onChange?.([], [], {
+                                            type: "all"
+                                          });
+                                        }
+                                      },
+                                      style: { cursor: "pointer", accentColor }
                                     }
-                                  },
-                                  "__expand__"
-                                );
-                              }
+                                  )
+                                },
+                                "__select__"
+                              );
+                            }
+                            if (column.key === "__expand__") {
                               return /* @__PURE__ */ jsx5(
-                                DraggableHeader_default,
+                                "div",
                                 {
-                                  column,
-                                  accentColor,
-                                  visualIndex,
-                                  onResizeStart: handleResizeStart,
-                                  onColumnDragStart: handleColumnDragStart,
-                                  styles,
-                                  classNames,
-                                  gripIcon,
-                                  hideGripIcon,
-                                  icons,
-                                  stickyOffset: columnOffsets.get(column.key),
-                                  onTogglePin: handleTogglePin,
-                                  onToggleHide: handleToggleHide,
-                                  isLastColumn: visualIndex === orderedColumns.length - 1,
-                                  sortDirection: sortState.key === column.key ? sortState.direction : null,
-                                  onSort: handleSort,
-                                  filterValue: columnFilters[column.key] ?? "",
-                                  onFilter: handleColumnFilter,
-                                  onClearFilter: handleClearFilter,
-                                  customContextMenuItems: columnContextMenuItems
+                                  className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                  style: {
+                                    display: "flex",
+                                    height: 36,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                    backgroundColor: styles?.pinnedBg,
+                                    position: "sticky",
+                                    left: columnOffsets.get("__expand__") ?? 0,
+                                    top: 0,
+                                    zIndex: 13,
+                                    width: "40px",
+                                    ...styles.header,
+                                    ...styles.pinnedHeader
+                                  }
                                 },
-                                column.key
+                                "__expand__"
                               );
-                            }),
-                            isEmpty ? (
-                              /*
-                               * ── Empty state ────────────────────────────────────────
-                               * col-span-full + height:100% fills the 1fr body grid row.
-                               *
-                               * The inner div uses `position: sticky; left: 0` with a fixed
-                               * width (scrollAreaWidth) to viewport-lock the empty state panel.
-                               * Without this, the empty message would scroll horizontally
-                               * with the grid content when there are many columns.
-                               */
-                              /* @__PURE__ */ jsx5(
+                            }
+                            return /* @__PURE__ */ jsx5(
+                              DraggableHeader_default,
+                              {
+                                column,
+                                accentColor,
+                                visualIndex,
+                                onResizeStart: handleResizeStart,
+                                onColumnDragStart: handleColumnDragStart,
+                                styles,
+                                classNames,
+                                gripIcon,
+                                hideGripIcon,
+                                icons,
+                                stickyOffset: columnOffsets.get(column.key),
+                                onTogglePin: handleTogglePin,
+                                onToggleHide: handleToggleHide,
+                                isLastColumn: visualIndex === orderedColumns.length - 1,
+                                sortDirection: sortState.key === column.key ? sortState.direction : null,
+                                onSort: handleSort,
+                                filterValue: columnFilters[column.key] ?? "",
+                                onFilter: handleColumnFilter,
+                                onClearFilter: handleClearFilter,
+                                customContextMenuItems: columnContextMenuItems
+                              },
+                              column.key
+                            );
+                          }),
+                          isEmpty ? /* @__PURE__ */ jsx5(
+                            "div",
+                            {
+                              style: {
+                                gridColumn: "1 / -1",
+                                height: "100%",
+                                position: "relative"
+                              },
+                              children: /* @__PURE__ */ jsx5(
                                 "div",
                                 {
                                   style: {
-                                    gridColumn: "1 / -1",
+                                    position: "sticky",
+                                    left: 0,
+                                    width: scrollAreaWidth > 0 ? `${scrollAreaWidth}px` : "100%",
                                     height: "100%",
-                                    position: "relative"
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center"
                                   },
-                                  children: /* @__PURE__ */ jsx5(
+                                  children: emptyRenderer ?? /* @__PURE__ */ jsx5(
                                     "div",
                                     {
                                       style: {
-                                        position: "sticky",
-                                        left: 0,
-                                        width: scrollAreaWidth > 0 ? `${scrollAreaWidth}px` : "100%",
-                                        height: "100%",
                                         display: "flex",
+                                        flexDirection: "column",
                                         alignItems: "center",
-                                        justifyContent: "center"
+                                        gap: 8,
+                                        paddingTop: 32,
+                                        paddingBottom: 32,
+                                        color: "GrayText"
                                       },
-                                      children: emptyRenderer ?? /* @__PURE__ */ jsx5(
-                                        "div",
-                                        {
-                                          style: {
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            alignItems: "center",
-                                            gap: 8,
-                                            paddingTop: 32,
-                                            paddingBottom: 32,
-                                            color: "GrayText"
-                                          },
-                                          children: /* @__PURE__ */ jsx5("span", { style: { fontSize: 14 }, children: "No data" })
-                                        }
-                                      )
+                                      children: /* @__PURE__ */ jsx5("span", { style: { fontSize: 14 }, children: "No data" })
                                     }
                                   )
                                 }
                               )
-                            ) : (
-                              /* ── Virtualized table body ─────────────────────────── */
-                              /* @__PURE__ */ jsx5(
-                                TableBody_default,
-                                {
-                                  data: displayData,
-                                  orderedColumns: freshOrderedColumns,
-                                  rowVirtualizer,
-                                  columnOffsets,
-                                  styles,
-                                  classNames,
-                                  rowSelection: !showShimmer ? rowSelection : void 0,
-                                  normalizedSelectedKeys,
-                                  getRowKey,
-                                  expandable: !showShimmer ? expandable : void 0,
-                                  resolvedExpandedKeys,
-                                  rowHeight,
-                                  totalTableWidth,
-                                  scrollAreaWidth,
-                                  accentColor,
-                                  scrollContainerRef: tableAreaRef,
-                                  isLoading: showShimmer,
-                                  onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight,
-                                  pinnedTopData: pinnedTopRows,
-                                  pinnedBottomData: pinnedBottomRows,
-                                  gridTemplateColumns,
-                                  headerHeight: HEADER_HEIGHT
-                                }
-                              )
-                            )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
+                            }
+                          ) : /* @__PURE__ */ jsx5(
+                            TableBody_default,
+                            {
+                              data: displayData,
+                              orderedColumns: freshOrderedColumns,
+                              rowVirtualizer,
+                              columnOffsets,
+                              styles,
+                              classNames,
+                              rowSelection: !showShimmer ? rowSelection : void 0,
+                              normalizedSelectedKeys,
+                              getRowKey,
+                              expandable: !showShimmer ? expandable : void 0,
+                              resolvedExpandedKeys,
+                              rowHeight,
+                              totalTableWidth,
+                              scrollAreaWidth,
+                              accentColor,
+                              scrollContainerRef: tableAreaRef,
+                              isLoading: showShimmer,
+                              onExpandedRowResize: handleExpandedRowResize,
+                              maxExpandedRowHeight,
+                              pinnedTopData: pinnedTopRows,
+                              pinnedBottomData: pinnedBottomRows,
+                              gridTemplateColumns,
+                              headerHeight: HEADER_HEIGHT
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
               )
             }
           ),
@@ -3157,4 +3103,3 @@ export {
   ResizeOverlay_default as ResizeOverlay,
   TableBody_default as TableBody
 };
-//# sourceMappingURL=index.mjs.map