bolt-table 0.1.38 → 0.1.39

package/dist/index.d.mts

@@ -408,6 +408,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly aiPlaceholder?: string;
     /** Label for the AI button. Defaults to "Ask AI". */
     readonly aiButtonLabel?: React$1.ReactNode;
+    /** Enable row drag-and-drop reordering. When true, shows a grip handle on each row. Requires `onRowReorder`. */
+    readonly rowDragEnabled?: boolean;
+    /** Called when the user drops a row into a new position. Receives the old and new index. */
+    readonly onRowReorder?: (fromIndex: number, toIndex: number) => void;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -475,7 +479,7 @@ interface StylesTypes {
     /** Inline styles for the "X–Y of Z" info text. */
     paginationInfo?: CSSProperties;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, aiMode, aiConfig, onAIQuery, onAIResponse, aiPlaceholder, aiButtonLabel, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, aiMode, aiConfig, onAIQuery, onAIResponse, aiPlaceholder, aiButtonLabel, rowDragEnabled, onRowReorder, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -528,8 +532,10 @@ interface DraggableHeaderProps {
     stickyTop?: number;
     /** When true, removes the left border (for the first visible column). */
     isFirstColumn?: boolean;
+    /** Called when the user double-clicks the resize handle to auto-fit column width. */
+    onAutoFitColumn?: (columnKey: string) => void;
 }
-declare const DraggableHeader: React$1.MemoExoticComponent<({ column, visualIndex, accentColor, onResizeStart, styles, classNames, hideGripIcon, gripIcon, stickyOffset, onTogglePin, onToggleHide, isLastColumn, sortDirection, onSort, filterValue, onFilter, onClearFilter, customContextMenuItems, icons, onColumnDragStart, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
+declare const DraggableHeader: React$1.MemoExoticComponent<({ column, visualIndex, accentColor, onResizeStart, styles, classNames, hideGripIcon, gripIcon, stickyOffset, onTogglePin, onToggleHide, isLastColumn, sortDirection, onSort, filterValue, onFilter, onClearFilter, customContextMenuItems, icons, onColumnDragStart, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, onAutoFitColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
 
 interface ResizeOverlayHandle {
     show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
@@ -614,6 +620,8 @@ interface TableBodyProps {
     columnGridIndexMap?: Map<string, number>;
     /** Optional AI cell style function. Returns extra styles for a specific cell. */
     cellStyleFn?: (record: DataRecord, columnKey: string) => React$1.CSSProperties | undefined;
+    /** Called when the user starts dragging a row by its grip handle. */
+    onRowDragStart?: (rowIndex: number, e: React$1.PointerEvent) => void;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 

package/dist/index.d.ts

@@ -408,6 +408,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly aiPlaceholder?: string;
     /** Label for the AI button. Defaults to "Ask AI". */
     readonly aiButtonLabel?: React$1.ReactNode;
+    /** Enable row drag-and-drop reordering. When true, shows a grip handle on each row. Requires `onRowReorder`. */
+    readonly rowDragEnabled?: boolean;
+    /** Called when the user drops a row into a new position. Receives the old and new index. */
+    readonly onRowReorder?: (fromIndex: number, toIndex: number) => void;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -475,7 +479,7 @@ interface StylesTypes {
     /** Inline styles for the "X–Y of Z" info text. */
     paginationInfo?: CSSProperties;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, aiMode, aiConfig, onAIQuery, onAIResponse, aiPlaceholder, aiButtonLabel, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, enableColumnVirtualization, enableDynamicRowHeight, columnPersistence, showColumnSettings, hideGlobalSearch, globalSearchValue, onGlobalSearchChange, toolbarContent, columnSettingsLabel, aiMode, aiConfig, onAIQuery, onAIResponse, aiPlaceholder, aiButtonLabel, rowDragEnabled, onRowReorder, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -528,8 +532,10 @@ interface DraggableHeaderProps {
     stickyTop?: number;
     /** When true, removes the left border (for the first visible column). */
     isFirstColumn?: boolean;
+    /** Called when the user double-clicks the resize handle to auto-fit column width. */
+    onAutoFitColumn?: (columnKey: string) => void;
 }
-declare const DraggableHeader: React$1.MemoExoticComponent<({ column, visualIndex, accentColor, onResizeStart, styles, classNames, hideGripIcon, gripIcon, stickyOffset, onTogglePin, onToggleHide, isLastColumn, sortDirection, onSort, filterValue, onFilter, onClearFilter, customContextMenuItems, icons, onColumnDragStart, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
+declare const DraggableHeader: React$1.MemoExoticComponent<({ column, visualIndex, accentColor, onResizeStart, styles, classNames, hideGripIcon, gripIcon, stickyOffset, onTogglePin, onToggleHide, isLastColumn, sortDirection, onSort, filterValue, onFilter, onClearFilter, customContextMenuItems, icons, onColumnDragStart, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, onAutoFitColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
 
 interface ResizeOverlayHandle {
     show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
@@ -614,6 +620,8 @@ interface TableBodyProps {
     columnGridIndexMap?: Map<string, number>;
     /** Optional AI cell style function. Returns extra styles for a specific cell. */
     cellStyleFn?: (record: DataRecord, columnKey: string) => React$1.CSSProperties | undefined;
+    /** Called when the user starts dragging a row by its grip handle. */
+    onRowDragStart?: (rowIndex: number, e: React$1.PointerEvent) => void;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 

package/dist/index.js

@@ -184,7 +184,8 @@ var DraggableHeader = import_react.default.memo(
     headerGridRow = 1,
     headerHeight = 36,
     stickyTop = 0,
-    isFirstColumn = false
+    isFirstColumn = false,
+    onAutoFitColumn
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -252,6 +253,12 @@ var DraggableHeader = import_react.default.memo(
       if (column.pinned) return;
       onResizeStart?.(column.key, e);
     };
+    const handleResizeDoubleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (column.pinned) return;
+      onAutoFitColumn?.(column.key);
+    };
     const columnWidth = column.width ?? 150;
     const widthPx = `${columnWidth}px`;
     const isPinned = Boolean(column.pinned);
@@ -399,7 +406,8 @@ var DraggableHeader = import_react.default.memo(
                   padding: 0
                 },
                 onMouseDown: handleResizeStart,
-                "aria-label": `Resize ${column.key} column`,
+                onDoubleClick: handleResizeDoubleClick,
+                "aria-label": `Resize ${column.key} column (double-click to auto-fit)`,
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
@@ -1490,7 +1498,8 @@ var TableBody = ({
   enableDynamicRowHeight = false,
   onRowHeightChange,
   columnGridIndexMap,
-  cellStyleFn
+  cellStyleFn,
+  onRowDragStart
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1572,6 +1581,7 @@ var TableBody = ({
               "div",
               {
                 "data-row-key": rowKey,
+                "data-row-index": virtualRow.index,
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
@@ -1584,7 +1594,45 @@ var TableBody = ({
                   height: enableDynamicRowHeight ? void 0 : `${virtualRow.size}px`,
                   minHeight: enableDynamicRowHeight ? `${rowHeight}px` : void 0
                 },
-                children: enableDynamicRowHeight && onRowHeightChange && colIndex === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                children: col.key === "__drag__" && onRowDragStart ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    style: {
+                      height: `${rowHeight}px`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                      ...rowSty
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        "data-bt-row-grip": "",
+                        onPointerDown: (e) => {
+                          if (e.button !== 0) return;
+                          onRowDragStart(virtualRow.index, e);
+                        },
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          touchAction: "none",
+                          width: "100%",
+                          height: "100%"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "5", r: "1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "12", r: "1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "19", r: "1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "15", cy: "5", r: "1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "15", cy: "12", r: "1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "15", cy: "19", r: "1" })
+                        ] })
+                      }
+                    )
+                  }
+                ) : enableDynamicRowHeight && onRowHeightChange && colIndex === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   DynamicRowMeasurer,
                   {
                     index: virtualRow.index,
@@ -2079,7 +2127,9 @@ function BoltTable({
   onAIQuery,
   onAIResponse,
   aiPlaceholder = "Ask AI anything about your data...",
-  aiButtonLabel
+  aiButtonLabel,
+  rowDragEnabled = false,
+  onRowReorder
 }) {
   const data = (0, import_react4.useMemo)(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -2276,6 +2326,7 @@ function BoltTable({
     }
   });
   const [showSavedFilters, setShowSavedFilters] = (0, import_react4.useState)(false);
+  const [justSavedFilter, setJustSavedFilter] = (0, import_react4.useState)(false);
   const savedFiltersRef = (0, import_react4.useRef)(null);
   import_react4.default.useEffect(() => {
     if (!showSavedFilters) return;
@@ -2297,6 +2348,8 @@ function BoltTable({
       localStorage.setItem(aiFiltersStorageKey, JSON.stringify(next));
     } catch {
     }
+    setJustSavedFilter(true);
+    setTimeout(() => setJustSavedFilter(false), 1500);
   }, [aiResult, aiQuery, savedAIFilters, aiFiltersStorageKey]);
   const removeSavedFilter = (0, import_react4.useCallback)((index) => {
     const next = savedAIFilters.filter((_, i) => i !== index);
@@ -2510,17 +2563,29 @@ function BoltTable({
   }, []);
   const getRowKey = (0, import_react4.useCallback)(
     (record, index) => {
-      if (record == null) return String(index);
+      if (record == null) return `__row_${index}`;
       try {
-        if (typeof rowKey === "function") return String(rowKey(record));
+        if (typeof rowKey === "function") {
+          const result = rowKey(record);
+          const str = String(result);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") {
+            return `__row_${index}`;
+          }
+          return str;
+        }
         if (typeof rowKey === "string") {
           const val = record[rowKey];
-          return val != null ? String(val) : String(index);
+          if (val == null) return `__row_${index}`;
+          const str = String(val);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") {
+            return `__row_${index}`;
+          }
+          return str;
         }
       } catch {
-        return String(index);
+        return `__row_${index}`;
       }
-      return String(index);
+      return `__row_${index}`;
     },
     [rowKey]
   );
@@ -2554,11 +2619,20 @@ function BoltTable({
     (record, index) => {
       if (record == null) return index;
       try {
-        if (typeof rowKey === "function") return rowKey(record);
+        if (typeof rowKey === "function") {
+          const result = rowKey(record);
+          if (result == null || typeof result === "number" && Number.isNaN(result)) return index;
+          const str = String(result);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") return index;
+          return result;
+        }
         if (typeof rowKey === "string") {
           const val = record[rowKey];
+          if (val == null || typeof val === "number" && Number.isNaN(val)) return index;
+          const str = String(val);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") return index;
           if (typeof val === "number" || typeof val === "string") return val;
-          return val != null ? String(val) : index;
+          return str;
         }
       } catch {
         return index;
@@ -2645,6 +2719,19 @@ function BoltTable({
     };
     return [selectionColumn, ...columnsWithExpand];
   }, [rowSelection, columnsWithExpand]);
+  const columnsWithDrag = (0, import_react4.useMemo)(() => {
+    if (!rowDragEnabled || !onRowReorder) return columnsWithSelection;
+    const dragColumn = {
+      key: "__drag__",
+      dataIndex: "__drag__",
+      title: "",
+      width: 36,
+      pinned: "left",
+      hidden: false,
+      render: () => null
+    };
+    return [dragColumn, ...columnsWithSelection];
+  }, [rowDragEnabled, onRowReorder, columnsWithSelection]);
   const resizeOverlayRef = (0, import_react4.useRef)(null);
   const tableAreaRef = (0, import_react4.useRef)(null);
   const [scrollAreaWidth, setScrollAreaWidth] = (0, import_react4.useState)(0);
@@ -2727,7 +2814,7 @@ function BoltTable({
   onColumnOrderChangeRef.current = onColumnOrderChange;
   const handleColumnDragStart = (0, import_react4.useCallback)(
     (columnKey, e) => {
-      if (columnKey === "__select__" || columnKey === "__expand__") return;
+      if (columnKey === "__select__" || columnKey === "__expand__" || columnKey === "__drag__") return;
       const headerEl = e.currentTarget.closest(
         "[data-column-key]"
       );
@@ -2762,7 +2849,7 @@ function BoltTable({
         let newOverId = null;
         headers.forEach((h) => {
           const key = h.dataset.columnKey;
-          if (!key || key === "__select__" || key === "__expand__" || key === columnKey) {
+          if (!key || key === "__select__" || key === "__expand__" || key === "__drag__" || key === columnKey) {
             h.removeAttribute("data-drag-over");
             return;
           }
@@ -2814,16 +2901,97 @@ function BoltTable({
     },
     []
   );
+  const rowDragGhostRef = (0, import_react4.useRef)(null);
+  const rowDragFromRef = (0, import_react4.useRef)(null);
+  const rowDragOverRef = (0, import_react4.useRef)(null);
+  const onRowReorderRef = (0, import_react4.useRef)(onRowReorder);
+  onRowReorderRef.current = onRowReorder;
+  const handleRowDragStart = (0, import_react4.useCallback)(
+    (rowIndex, e) => {
+      if (!onRowReorderRef.current) return;
+      e.preventDefault();
+      rowDragFromRef.current = rowIndex;
+      rowDragOverRef.current = null;
+      const target = e.currentTarget.closest("[data-row-key]");
+      const rowHeight2 = target?.offsetHeight ?? 40;
+      const ghost = rowDragGhostRef.current;
+      if (ghost) {
+        ghost.textContent = `Row ${rowIndex + 1}`;
+        ghost.style.display = "flex";
+        ghost.style.left = `${e.clientX + 12}px`;
+        ghost.style.top = `${e.clientY - 12}px`;
+        ghost.style.height = `${Math.min(rowHeight2, 36)}px`;
+      }
+      const grabStyle = document.createElement("style");
+      grabStyle.textContent = "* { cursor: grabbing !important; }";
+      document.head.appendChild(grabStyle);
+      const scrollEl = tableAreaRef.current;
+      const onMove = (ev) => {
+        if (ghost) {
+          ghost.style.left = `${ev.clientX + 12}px`;
+          ghost.style.top = `${ev.clientY - 12}px`;
+        }
+        if (!scrollEl) return;
+        const cells = scrollEl.querySelectorAll("[data-bt-cell][data-row-key]");
+        let closestIdx = null;
+        let closestDist = Infinity;
+        cells.forEach((cell) => {
+          const rk = cell.dataset.rowKey;
+          if (!rk) return;
+          const rect = cell.getBoundingClientRect();
+          const midY = rect.top + rect.height / 2;
+          const dist = Math.abs(ev.clientY - midY);
+          if (dist < closestDist) {
+            closestDist = dist;
+            const idxAttr = cell.dataset.rowIndex;
+            if (idxAttr != null) closestIdx = Number(idxAttr);
+          }
+        });
+        scrollEl.querySelectorAll("[data-row-drag-over]").forEach(
+          (el) => el.removeAttribute("data-row-drag-over")
+        );
+        if (closestIdx != null && closestIdx !== rowDragFromRef.current) {
+          rowDragOverRef.current = closestIdx;
+          scrollEl.querySelectorAll(
+            `[data-bt-cell][data-row-index="${closestIdx}"]`
+          ).forEach((el) => el.setAttribute("data-row-drag-over", ""));
+        } else {
+          rowDragOverRef.current = null;
+        }
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        grabStyle.remove();
+        if (ghost) ghost.style.display = "none";
+        if (scrollEl) {
+          scrollEl.querySelectorAll("[data-row-drag-over]").forEach(
+            (el) => el.removeAttribute("data-row-drag-over")
+          );
+        }
+        const from = rowDragFromRef.current;
+        const to = rowDragOverRef.current;
+        if (from != null && to != null && from !== to) {
+          onRowReorderRef.current?.(from, to);
+        }
+        rowDragFromRef.current = null;
+        rowDragOverRef.current = null;
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    []
+  );
   const handleResizeStart = (columnKey, e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (columnKey === "__select__" || columnKey === "__expand__") return;
-    const columnIndex = columnsWithSelection.findIndex(
+    if (columnKey === "__select__" || columnKey === "__expand__" || columnKey === "__drag__") return;
+    const columnIndex = columnsWithDrag.findIndex(
       (col) => col.key === columnKey
     );
     if (columnIndex === -1) return;
-    if (columnsWithSelection[columnIndex].pinned) return;
-    const column = columnsWithSelection[columnIndex];
+    if (columnsWithDrag[columnIndex].pinned) return;
+    const column = columnsWithDrag[columnIndex];
     const startWidth = column.width ?? 150;
     resizeStateRef.current = {
       columnKey,
@@ -2880,9 +3048,50 @@ function BoltTable({
     });
     onColumnResize?.(columnKey, finalWidth);
   }, [onColumnResize]);
+  const handleAutoFitColumn = (0, import_react4.useCallback)((columnKey) => {
+    const scrollEl = tableAreaRef.current;
+    if (!scrollEl) return;
+    const col = columnsWithDrag.find((c) => c.key === columnKey);
+    if (!col) return;
+    const headerEl = scrollEl.querySelector(
+      `[data-column-key="${columnKey}"] [data-bt-grip]`
+    )?.parentElement ?? scrollEl.querySelector(`[data-column-key="${columnKey}"]`);
+    let maxWidth = 0;
+    if (headerEl) {
+      const title = typeof col.title === "string" ? col.title : col.key;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        const computedStyle = window.getComputedStyle(headerEl);
+        ctx.font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+        maxWidth = ctx.measureText(title).width + 60;
+      }
+    }
+    const cells = scrollEl.querySelectorAll(
+      `[data-bt-cell][data-column-key="${columnKey}"]`
+    );
+    cells.forEach((cell) => {
+      const inner = cell.querySelector("div > div");
+      if (inner) {
+        const scrollW = inner.scrollWidth;
+        if (scrollW > maxWidth) maxWidth = scrollW;
+      }
+    });
+    const finalWidth = Math.max(60, Math.min(Math.ceil(maxWidth) + 24, 800));
+    manuallyResizedRef.current.add(columnKey);
+    import_react4.default.startTransition(() => {
+      setColumnWidths((prev) => {
+        const next = new Map(prev);
+        next.set(columnKey, finalWidth);
+        return next;
+      });
+    });
+    onColumnResize?.(columnKey, finalWidth);
+  }, [columnsWithDrag, onColumnResize]);
   const { leftPinned, unpinned, rightPinned } = (0, import_react4.useMemo)(() => {
-    const columnMap = new Map(columnsWithSelection.map((c) => [c.key, c]));
+    const columnMap = new Map(columnsWithDrag.map((c) => [c.key, c]));
     const systemKeys = [
+      ...rowDragEnabled && onRowReorder ? ["__drag__"] : [],
       ...rowSelection ? ["__select__"] : [],
       ...expandable ? ["__expand__"] : []
     ];
@@ -2894,7 +3103,7 @@ function BoltTable({
       else center.push(col);
     });
     return { leftPinned: left, unpinned: center, rightPinned: right };
-  }, [columnOrder, columnsWithSelection, rowSelection, expandable]);
+  }, [columnOrder, columnsWithDrag, rowSelection, expandable, rowDragEnabled, onRowReorder]);
   const orderedColumns = (0, import_react4.useMemo)(
     () => [...leftPinned, ...unpinned, ...rightPinned],
     [leftPinned, unpinned, rightPinned]
@@ -2902,7 +3111,7 @@ function BoltTable({
   const freshOrderedColumns = (0, import_react4.useMemo)(() => {
     const latestMap = new Map(initialColumnsRef.current.map((c) => [c.key, c]));
     return orderedColumns.map((col) => {
-      if (col.key === "__select__" || col.key === "__expand__") return col;
+      if (col.key === "__select__" || col.key === "__expand__" || col.key === "__drag__") return col;
       const latest = latestMap.get(col.key);
       if (!latest) return col;
       return {
@@ -3395,7 +3604,7 @@ function BoltTable({
       return freshOrderedColumns;
     return freshOrderedColumns.filter((col, idx) => {
       if (col.pinned) return true;
-      if (col.key === "__select__" || col.key === "__expand__") return true;
+      if (col.key === "__select__" || col.key === "__expand__" || col.key === "__drag__") return true;
       return idx >= visibleColumnRange.start && idx <= visibleColumnRange.end;
     });
   }, [enableColumnVirtualization, visibleColumnRange, freshOrderedColumns]);
@@ -3542,8 +3751,11 @@ function BoltTable({
           [data-bt-resize]:hover [data-bt-resize-line] {
             opacity: 1 !important;
           }
+          [data-bt-ctx-item] {
+            transition: background-color 0.15s ease;
+          }
           [data-bt-ctx-item]:not(:disabled):hover {
-            background-color: rgba(128, 128, 128, 0.15);
+            background-color: rgba(128, 128, 128, 0.15) !important;
           }
           [data-bt-header][data-dragging] {
             opacity: 0.2 !important;
@@ -3552,6 +3764,17 @@ function BoltTable({
             border: 1px dashed ${accentColor} !important;
           }
           ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
+          [data-row-drag-over] {
+            box-shadow: 0 -2px 0 0 ${accentColor} inset;
+          }
+          [data-bt-row-grip] {
+            cursor: grab;
+            opacity: 0.3;
+            transition: opacity 0.15s;
+          }
+          [data-bt-row-grip]:hover {
+            opacity: 0.8;
+          }
           @keyframes bt-spin { to { transform: rotate(360deg); } }
           @keyframes bt-ai-shimmer {
             0% { background-position: -200% 0; }
@@ -3707,7 +3930,7 @@ function BoltTable({
                               marginTop: 4
                             },
                             children: initialColumns.filter(
-                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                              (c) => c.key !== "__select__" && c.key !== "__expand__" && c.key !== "__drag__"
                             ).map((col) => {
                               const current = columns.find(
                                 (c) => c.key === col.key
@@ -4036,14 +4259,15 @@ function BoltTable({
                   {
                     type: "button",
                     onClick: saveCurrentAIFilter,
+                    disabled: justSavedFilter,
                     style: {
                       display: "flex",
                       alignItems: "center",
                       gap: 4,
-                      background: `${accentColor}12`,
-                      border: `1px solid ${accentColor}30`,
+                      background: justSavedFilter ? `${accentColor}25` : `${accentColor}12`,
+                      border: `1px solid ${justSavedFilter ? accentColor : `${accentColor}30`}`,
                       borderRadius: 4,
-                      cursor: "pointer",
+                      cursor: justSavedFilter ? "default" : "pointer",
                       padding: "2px 8px",
                       color: accentColor,
                       fontSize: 11,
@@ -4051,14 +4275,14 @@ function BoltTable({
                       fontWeight: 500,
                       transition: "all 0.2s ease"
                     },
-                    title: "Save this filter for quick access later",
+                    title: justSavedFilter ? "Filter saved!" : "Save this filter for quick access later",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      justSavedFilter ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "17 21 17 13 7 13 7 21" }),
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "7 3 7 8 15 8" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Save Filter" })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: justSavedFilter ? "Saved" : "Save Filter" })
                     ]
                   }
                 ),
@@ -4165,7 +4389,7 @@ function BoltTable({
                         orderedColumns.map((column) => {
                           const isPinned = !!column.pinned;
                           const offset = columnOffsets.get(column.key);
-                          const isSystem = column.key === "__select__" || column.key === "__expand__";
+                          const isSystem = column.key === "__select__" || column.key === "__expand__" || column.key === "__drag__";
                           return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                             "div",
                             {
@@ -4204,7 +4428,7 @@ function BoltTable({
                             children: orderedColumns.map((column, colIndex) => {
                               const isPinned = !!column.pinned;
                               const offset = columnOffsets.get(column.key);
-                              const isSystem = column.key === "__select__" || column.key === "__expand__";
+                              const isSystem = column.key === "__select__" || column.key === "__expand__" || column.key === "__drag__";
                               const widthPercent = SHIMMER_WIDTHS2[(rowIndex * 7 + colIndex) % SHIMMER_WIDTHS2.length];
                               return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                 "div",
@@ -4414,7 +4638,7 @@ function BoltTable({
                           }),
                           (() => {
                             const firstDataColIndex = orderedColumns.findIndex(
-                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                              (c) => c.key !== "__select__" && c.key !== "__expand__" && c.key !== "__drag__"
                             );
                             return orderedColumns.map((column, visualIndex) => {
                               const isInGroup = groupedColumnKeySet?.has(column.key) ?? false;
@@ -4491,6 +4715,39 @@ function BoltTable({
                                   "__select__"
                                 );
                               }
+                              if (column.key === "__drag__") {
+                                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                  "div",
+                                  {
+                                    "data-bt-header": "",
+                                    "data-bt-pinned": "",
+                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                    style: {
+                                      display: "flex",
+                                      height: leafHeight,
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      overflow: "hidden",
+                                      whiteSpace: "nowrap",
+                                      boxSizing: "border-box",
+                                      position: "sticky",
+                                      left: columnOffsets.get("__drag__") ?? 0,
+                                      top: 0,
+                                      zIndex: 13,
+                                      width: "36px",
+                                      gridRow: leafGridRow,
+                                      ...styles.header,
+                                      ...styles.pinnedHeader,
+                                      borderTop: "none",
+                                      borderLeft: "none",
+                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                      borderRight: "1px solid rgba(128,128,128,0.2)"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GripVerticalIcon, { style: { width: 12, height: 12, opacity: 0.4 } })
+                                  },
+                                  "__drag__"
+                                );
+                              }
                               if (column.key === "__expand__") {
                                 return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                   "div",
@@ -4555,7 +4812,8 @@ function BoltTable({
                                   disabledFilters,
                                   headerGridRow: leafGridRow,
                                   headerHeight: leafHeight,
-                                  stickyTop: leafStickyTop
+                                  stickyTop: leafStickyTop,
+                                  onAutoFitColumn: handleAutoFitColumn
                                 },
                                 column.key
                               );
@@ -4640,7 +4898,8 @@ function BoltTable({
                               enableDynamicRowHeight,
                               onRowHeightChange: handleRowHeightChange,
                               columnGridIndexMap,
-                              cellStyleFn: aiCellStyleOps.length > 0 ? (record, columnKey) => getAICellStyleForRecord(record, columnKey) : void 0
+                              cellStyleFn: aiCellStyleOps.length > 0 ? (record, columnKey) => getAICellStyleForRecord(record, columnKey) : void 0,
+                              onRowDragStart: rowDragEnabled && onRowReorder ? handleRowDragStart : void 0
                             }
                           )
                         ]
@@ -4994,6 +5253,35 @@ function BoltTable({
       ),
       document.body
     ),
+    mounted && rowDragEnabled && onRowReorder && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          ref: rowDragGhostRef,
+          style: {
+            display: "none",
+            position: "fixed",
+            zIndex: 99999,
+            height: 32,
+            fontSize: 11,
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 12px",
+            borderRadius: 6,
+            border: `1px dashed ${accentColor}60`,
+            boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+            backdropFilter: "blur(16px)",
+            WebkitBackdropFilter: "blur(16px)",
+            backgroundColor: "rgba(128,128,128,0.12)",
+            cursor: "grabbing",
+            pointerEvents: "none",
+            fontWeight: 500,
+            color: accentColor
+          }
+        }
+      ),
+      document.body
+    ),
     cellContextMenu && mounted && (() => {
       const menuCol = freshOrderedColumns.find(
         (c) => c.key === cellContextMenu.columnKey

package/dist/index.mjs

@@ -149,7 +149,8 @@ var DraggableHeader = React.memo(
     headerGridRow = 1,
     headerHeight = 36,
     stickyTop = 0,
-    isFirstColumn = false
+    isFirstColumn = false,
+    onAutoFitColumn
   }) => {
     const effectivelySortable = isColumnSortable(column);
     const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
@@ -217,6 +218,12 @@ var DraggableHeader = React.memo(
       if (column.pinned) return;
       onResizeStart?.(column.key, e);
     };
+    const handleResizeDoubleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (column.pinned) return;
+      onAutoFitColumn?.(column.key);
+    };
     const columnWidth = column.width ?? 150;
     const widthPx = `${columnWidth}px`;
     const isPinned = Boolean(column.pinned);
@@ -364,7 +371,8 @@ var DraggableHeader = React.memo(
                   padding: 0
                 },
                 onMouseDown: handleResizeStart,
-                "aria-label": `Resize ${column.key} column`,
+                onDoubleClick: handleResizeDoubleClick,
+                "aria-label": `Resize ${column.key} column (double-click to auto-fit)`,
                 children: /* @__PURE__ */ jsx2(
                   "div",
                   {
@@ -1461,7 +1469,8 @@ var TableBody = ({
   enableDynamicRowHeight = false,
   onRowHeightChange,
   columnGridIndexMap,
-  cellStyleFn
+  cellStyleFn,
+  onRowDragStart
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1543,6 +1552,7 @@ var TableBody = ({
               "div",
               {
                 "data-row-key": rowKey,
+                "data-row-index": virtualRow.index,
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
@@ -1555,7 +1565,45 @@ var TableBody = ({
                   height: enableDynamicRowHeight ? void 0 : `${virtualRow.size}px`,
                   minHeight: enableDynamicRowHeight ? `${rowHeight}px` : void 0
                 },
-                children: enableDynamicRowHeight && onRowHeightChange && colIndex === 0 ? /* @__PURE__ */ jsx4(
+                children: col.key === "__drag__" && onRowDragStart ? /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      height: `${rowHeight}px`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                      ...rowSty
+                    },
+                    children: /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        "data-bt-row-grip": "",
+                        onPointerDown: (e) => {
+                          if (e.button !== 0) return;
+                          onRowDragStart(virtualRow.index, e);
+                        },
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          touchAction: "none",
+                          width: "100%",
+                          height: "100%"
+                        },
+                        children: /* @__PURE__ */ jsxs4("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                          /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "5", r: "1" }),
+                          /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "12", r: "1" }),
+                          /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "19", r: "1" }),
+                          /* @__PURE__ */ jsx4("circle", { cx: "15", cy: "5", r: "1" }),
+                          /* @__PURE__ */ jsx4("circle", { cx: "15", cy: "12", r: "1" }),
+                          /* @__PURE__ */ jsx4("circle", { cx: "15", cy: "19", r: "1" })
+                        ] })
+                      }
+                    )
+                  }
+                ) : enableDynamicRowHeight && onRowHeightChange && colIndex === 0 ? /* @__PURE__ */ jsx4(
                   DynamicRowMeasurer,
                   {
                     index: virtualRow.index,
@@ -2050,7 +2098,9 @@ function BoltTable({
   onAIQuery,
   onAIResponse,
   aiPlaceholder = "Ask AI anything about your data...",
-  aiButtonLabel
+  aiButtonLabel,
+  rowDragEnabled = false,
+  onRowReorder
 }) {
   const data = useMemo2(() => {
     if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -2247,6 +2297,7 @@ function BoltTable({
     }
   });
   const [showSavedFilters, setShowSavedFilters] = useState3(false);
+  const [justSavedFilter, setJustSavedFilter] = useState3(false);
   const savedFiltersRef = useRef4(null);
   React4.useEffect(() => {
     if (!showSavedFilters) return;
@@ -2268,6 +2319,8 @@ function BoltTable({
       localStorage.setItem(aiFiltersStorageKey, JSON.stringify(next));
     } catch {
     }
+    setJustSavedFilter(true);
+    setTimeout(() => setJustSavedFilter(false), 1500);
   }, [aiResult, aiQuery, savedAIFilters, aiFiltersStorageKey]);
   const removeSavedFilter = useCallback2((index) => {
     const next = savedAIFilters.filter((_, i) => i !== index);
@@ -2481,17 +2534,29 @@ function BoltTable({
   }, []);
   const getRowKey = useCallback2(
     (record, index) => {
-      if (record == null) return String(index);
+      if (record == null) return `__row_${index}`;
       try {
-        if (typeof rowKey === "function") return String(rowKey(record));
+        if (typeof rowKey === "function") {
+          const result = rowKey(record);
+          const str = String(result);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") {
+            return `__row_${index}`;
+          }
+          return str;
+        }
         if (typeof rowKey === "string") {
           const val = record[rowKey];
-          return val != null ? String(val) : String(index);
+          if (val == null) return `__row_${index}`;
+          const str = String(val);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") {
+            return `__row_${index}`;
+          }
+          return str;
         }
       } catch {
-        return String(index);
+        return `__row_${index}`;
       }
-      return String(index);
+      return `__row_${index}`;
     },
     [rowKey]
   );
@@ -2525,11 +2590,20 @@ function BoltTable({
     (record, index) => {
       if (record == null) return index;
       try {
-        if (typeof rowKey === "function") return rowKey(record);
+        if (typeof rowKey === "function") {
+          const result = rowKey(record);
+          if (result == null || typeof result === "number" && Number.isNaN(result)) return index;
+          const str = String(result);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") return index;
+          return result;
+        }
         if (typeof rowKey === "string") {
           const val = record[rowKey];
+          if (val == null || typeof val === "number" && Number.isNaN(val)) return index;
+          const str = String(val);
+          if (str === "undefined" || str === "null" || str === "NaN" || str === "") return index;
           if (typeof val === "number" || typeof val === "string") return val;
-          return val != null ? String(val) : index;
+          return str;
         }
       } catch {
         return index;
@@ -2616,6 +2690,19 @@ function BoltTable({
     };
     return [selectionColumn, ...columnsWithExpand];
   }, [rowSelection, columnsWithExpand]);
+  const columnsWithDrag = useMemo2(() => {
+    if (!rowDragEnabled || !onRowReorder) return columnsWithSelection;
+    const dragColumn = {
+      key: "__drag__",
+      dataIndex: "__drag__",
+      title: "",
+      width: 36,
+      pinned: "left",
+      hidden: false,
+      render: () => null
+    };
+    return [dragColumn, ...columnsWithSelection];
+  }, [rowDragEnabled, onRowReorder, columnsWithSelection]);
   const resizeOverlayRef = useRef4(null);
   const tableAreaRef = useRef4(null);
   const [scrollAreaWidth, setScrollAreaWidth] = useState3(0);
@@ -2698,7 +2785,7 @@ function BoltTable({
   onColumnOrderChangeRef.current = onColumnOrderChange;
   const handleColumnDragStart = useCallback2(
     (columnKey, e) => {
-      if (columnKey === "__select__" || columnKey === "__expand__") return;
+      if (columnKey === "__select__" || columnKey === "__expand__" || columnKey === "__drag__") return;
       const headerEl = e.currentTarget.closest(
         "[data-column-key]"
       );
@@ -2733,7 +2820,7 @@ function BoltTable({
         let newOverId = null;
         headers.forEach((h) => {
           const key = h.dataset.columnKey;
-          if (!key || key === "__select__" || key === "__expand__" || key === columnKey) {
+          if (!key || key === "__select__" || key === "__expand__" || key === "__drag__" || key === columnKey) {
             h.removeAttribute("data-drag-over");
             return;
           }
@@ -2785,16 +2872,97 @@ function BoltTable({
     },
     []
   );
+  const rowDragGhostRef = useRef4(null);
+  const rowDragFromRef = useRef4(null);
+  const rowDragOverRef = useRef4(null);
+  const onRowReorderRef = useRef4(onRowReorder);
+  onRowReorderRef.current = onRowReorder;
+  const handleRowDragStart = useCallback2(
+    (rowIndex, e) => {
+      if (!onRowReorderRef.current) return;
+      e.preventDefault();
+      rowDragFromRef.current = rowIndex;
+      rowDragOverRef.current = null;
+      const target = e.currentTarget.closest("[data-row-key]");
+      const rowHeight2 = target?.offsetHeight ?? 40;
+      const ghost = rowDragGhostRef.current;
+      if (ghost) {
+        ghost.textContent = `Row ${rowIndex + 1}`;
+        ghost.style.display = "flex";
+        ghost.style.left = `${e.clientX + 12}px`;
+        ghost.style.top = `${e.clientY - 12}px`;
+        ghost.style.height = `${Math.min(rowHeight2, 36)}px`;
+      }
+      const grabStyle = document.createElement("style");
+      grabStyle.textContent = "* { cursor: grabbing !important; }";
+      document.head.appendChild(grabStyle);
+      const scrollEl = tableAreaRef.current;
+      const onMove = (ev) => {
+        if (ghost) {
+          ghost.style.left = `${ev.clientX + 12}px`;
+          ghost.style.top = `${ev.clientY - 12}px`;
+        }
+        if (!scrollEl) return;
+        const cells = scrollEl.querySelectorAll("[data-bt-cell][data-row-key]");
+        let closestIdx = null;
+        let closestDist = Infinity;
+        cells.forEach((cell) => {
+          const rk = cell.dataset.rowKey;
+          if (!rk) return;
+          const rect = cell.getBoundingClientRect();
+          const midY = rect.top + rect.height / 2;
+          const dist = Math.abs(ev.clientY - midY);
+          if (dist < closestDist) {
+            closestDist = dist;
+            const idxAttr = cell.dataset.rowIndex;
+            if (idxAttr != null) closestIdx = Number(idxAttr);
+          }
+        });
+        scrollEl.querySelectorAll("[data-row-drag-over]").forEach(
+          (el) => el.removeAttribute("data-row-drag-over")
+        );
+        if (closestIdx != null && closestIdx !== rowDragFromRef.current) {
+          rowDragOverRef.current = closestIdx;
+          scrollEl.querySelectorAll(
+            `[data-bt-cell][data-row-index="${closestIdx}"]`
+          ).forEach((el) => el.setAttribute("data-row-drag-over", ""));
+        } else {
+          rowDragOverRef.current = null;
+        }
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        grabStyle.remove();
+        if (ghost) ghost.style.display = "none";
+        if (scrollEl) {
+          scrollEl.querySelectorAll("[data-row-drag-over]").forEach(
+            (el) => el.removeAttribute("data-row-drag-over")
+          );
+        }
+        const from = rowDragFromRef.current;
+        const to = rowDragOverRef.current;
+        if (from != null && to != null && from !== to) {
+          onRowReorderRef.current?.(from, to);
+        }
+        rowDragFromRef.current = null;
+        rowDragOverRef.current = null;
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    []
+  );
   const handleResizeStart = (columnKey, e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (columnKey === "__select__" || columnKey === "__expand__") return;
-    const columnIndex = columnsWithSelection.findIndex(
+    if (columnKey === "__select__" || columnKey === "__expand__" || columnKey === "__drag__") return;
+    const columnIndex = columnsWithDrag.findIndex(
       (col) => col.key === columnKey
     );
     if (columnIndex === -1) return;
-    if (columnsWithSelection[columnIndex].pinned) return;
-    const column = columnsWithSelection[columnIndex];
+    if (columnsWithDrag[columnIndex].pinned) return;
+    const column = columnsWithDrag[columnIndex];
     const startWidth = column.width ?? 150;
     resizeStateRef.current = {
       columnKey,
@@ -2851,9 +3019,50 @@ function BoltTable({
     });
     onColumnResize?.(columnKey, finalWidth);
   }, [onColumnResize]);
+  const handleAutoFitColumn = useCallback2((columnKey) => {
+    const scrollEl = tableAreaRef.current;
+    if (!scrollEl) return;
+    const col = columnsWithDrag.find((c) => c.key === columnKey);
+    if (!col) return;
+    const headerEl = scrollEl.querySelector(
+      `[data-column-key="${columnKey}"] [data-bt-grip]`
+    )?.parentElement ?? scrollEl.querySelector(`[data-column-key="${columnKey}"]`);
+    let maxWidth = 0;
+    if (headerEl) {
+      const title = typeof col.title === "string" ? col.title : col.key;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        const computedStyle = window.getComputedStyle(headerEl);
+        ctx.font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+        maxWidth = ctx.measureText(title).width + 60;
+      }
+    }
+    const cells = scrollEl.querySelectorAll(
+      `[data-bt-cell][data-column-key="${columnKey}"]`
+    );
+    cells.forEach((cell) => {
+      const inner = cell.querySelector("div > div");
+      if (inner) {
+        const scrollW = inner.scrollWidth;
+        if (scrollW > maxWidth) maxWidth = scrollW;
+      }
+    });
+    const finalWidth = Math.max(60, Math.min(Math.ceil(maxWidth) + 24, 800));
+    manuallyResizedRef.current.add(columnKey);
+    React4.startTransition(() => {
+      setColumnWidths((prev) => {
+        const next = new Map(prev);
+        next.set(columnKey, finalWidth);
+        return next;
+      });
+    });
+    onColumnResize?.(columnKey, finalWidth);
+  }, [columnsWithDrag, onColumnResize]);
   const { leftPinned, unpinned, rightPinned } = useMemo2(() => {
-    const columnMap = new Map(columnsWithSelection.map((c) => [c.key, c]));
+    const columnMap = new Map(columnsWithDrag.map((c) => [c.key, c]));
     const systemKeys = [
+      ...rowDragEnabled && onRowReorder ? ["__drag__"] : [],
       ...rowSelection ? ["__select__"] : [],
       ...expandable ? ["__expand__"] : []
     ];
@@ -2865,7 +3074,7 @@ function BoltTable({
       else center.push(col);
     });
     return { leftPinned: left, unpinned: center, rightPinned: right };
-  }, [columnOrder, columnsWithSelection, rowSelection, expandable]);
+  }, [columnOrder, columnsWithDrag, rowSelection, expandable, rowDragEnabled, onRowReorder]);
   const orderedColumns = useMemo2(
     () => [...leftPinned, ...unpinned, ...rightPinned],
     [leftPinned, unpinned, rightPinned]
@@ -2873,7 +3082,7 @@ function BoltTable({
   const freshOrderedColumns = useMemo2(() => {
     const latestMap = new Map(initialColumnsRef.current.map((c) => [c.key, c]));
     return orderedColumns.map((col) => {
-      if (col.key === "__select__" || col.key === "__expand__") return col;
+      if (col.key === "__select__" || col.key === "__expand__" || col.key === "__drag__") return col;
       const latest = latestMap.get(col.key);
       if (!latest) return col;
       return {
@@ -3366,7 +3575,7 @@ function BoltTable({
       return freshOrderedColumns;
     return freshOrderedColumns.filter((col, idx) => {
       if (col.pinned) return true;
-      if (col.key === "__select__" || col.key === "__expand__") return true;
+      if (col.key === "__select__" || col.key === "__expand__" || col.key === "__drag__") return true;
       return idx >= visibleColumnRange.start && idx <= visibleColumnRange.end;
     });
   }, [enableColumnVirtualization, visibleColumnRange, freshOrderedColumns]);
@@ -3513,8 +3722,11 @@ function BoltTable({
           [data-bt-resize]:hover [data-bt-resize-line] {
             opacity: 1 !important;
           }
+          [data-bt-ctx-item] {
+            transition: background-color 0.15s ease;
+          }
           [data-bt-ctx-item]:not(:disabled):hover {
-            background-color: rgba(128, 128, 128, 0.15);
+            background-color: rgba(128, 128, 128, 0.15) !important;
           }
           [data-bt-header][data-dragging] {
             opacity: 0.2 !important;
@@ -3523,6 +3735,17 @@ function BoltTable({
             border: 1px dashed ${accentColor} !important;
           }
           ${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
+          [data-row-drag-over] {
+            box-shadow: 0 -2px 0 0 ${accentColor} inset;
+          }
+          [data-bt-row-grip] {
+            cursor: grab;
+            opacity: 0.3;
+            transition: opacity 0.15s;
+          }
+          [data-bt-row-grip]:hover {
+            opacity: 0.8;
+          }
           @keyframes bt-spin { to { transform: rotate(360deg); } }
           @keyframes bt-ai-shimmer {
             0% { background-position: -200% 0; }
@@ -3678,7 +3901,7 @@ function BoltTable({
                               marginTop: 4
                             },
                             children: initialColumns.filter(
-                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                              (c) => c.key !== "__select__" && c.key !== "__expand__" && c.key !== "__drag__"
                             ).map((col) => {
                               const current = columns.find(
                                 (c) => c.key === col.key
@@ -4007,14 +4230,15 @@ function BoltTable({
                   {
                     type: "button",
                     onClick: saveCurrentAIFilter,
+                    disabled: justSavedFilter,
                     style: {
                       display: "flex",
                       alignItems: "center",
                       gap: 4,
-                      background: `${accentColor}12`,
-                      border: `1px solid ${accentColor}30`,
+                      background: justSavedFilter ? `${accentColor}25` : `${accentColor}12`,
+                      border: `1px solid ${justSavedFilter ? accentColor : `${accentColor}30`}`,
                       borderRadius: 4,
-                      cursor: "pointer",
+                      cursor: justSavedFilter ? "default" : "pointer",
                       padding: "2px 8px",
                       color: accentColor,
                       fontSize: 11,
@@ -4022,14 +4246,14 @@ function BoltTable({
                       fontWeight: 500,
                       transition: "all 0.2s ease"
                     },
-                    title: "Save this filter for quick access later",
+                    title: justSavedFilter ? "Filter saved!" : "Save this filter for quick access later",
                     children: [
-                      /* @__PURE__ */ jsxs5("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      justSavedFilter ? /* @__PURE__ */ jsx5("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs5("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                         /* @__PURE__ */ jsx5("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
                         /* @__PURE__ */ jsx5("polyline", { points: "17 21 17 13 7 13 7 21" }),
                         /* @__PURE__ */ jsx5("polyline", { points: "7 3 7 8 15 8" })
                       ] }),
-                      /* @__PURE__ */ jsx5("span", { children: "Save Filter" })
+                      /* @__PURE__ */ jsx5("span", { children: justSavedFilter ? "Saved" : "Save Filter" })
                     ]
                   }
                 ),
@@ -4136,7 +4360,7 @@ function BoltTable({
                         orderedColumns.map((column) => {
                           const isPinned = !!column.pinned;
                           const offset = columnOffsets.get(column.key);
-                          const isSystem = column.key === "__select__" || column.key === "__expand__";
+                          const isSystem = column.key === "__select__" || column.key === "__expand__" || column.key === "__drag__";
                           return /* @__PURE__ */ jsx5(
                             "div",
                             {
@@ -4175,7 +4399,7 @@ function BoltTable({
                             children: orderedColumns.map((column, colIndex) => {
                               const isPinned = !!column.pinned;
                               const offset = columnOffsets.get(column.key);
-                              const isSystem = column.key === "__select__" || column.key === "__expand__";
+                              const isSystem = column.key === "__select__" || column.key === "__expand__" || column.key === "__drag__";
                               const widthPercent = SHIMMER_WIDTHS2[(rowIndex * 7 + colIndex) % SHIMMER_WIDTHS2.length];
                               return /* @__PURE__ */ jsx5(
                                 "div",
@@ -4385,7 +4609,7 @@ function BoltTable({
                           }),
                           (() => {
                             const firstDataColIndex = orderedColumns.findIndex(
-                              (c) => c.key !== "__select__" && c.key !== "__expand__"
+                              (c) => c.key !== "__select__" && c.key !== "__expand__" && c.key !== "__drag__"
                             );
                             return orderedColumns.map((column, visualIndex) => {
                               const isInGroup = groupedColumnKeySet?.has(column.key) ?? false;
@@ -4462,6 +4686,39 @@ function BoltTable({
                                   "__select__"
                                 );
                               }
+                              if (column.key === "__drag__") {
+                                return /* @__PURE__ */ jsx5(
+                                  "div",
+                                  {
+                                    "data-bt-header": "",
+                                    "data-bt-pinned": "",
+                                    className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                    style: {
+                                      display: "flex",
+                                      height: leafHeight,
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      overflow: "hidden",
+                                      whiteSpace: "nowrap",
+                                      boxSizing: "border-box",
+                                      position: "sticky",
+                                      left: columnOffsets.get("__drag__") ?? 0,
+                                      top: 0,
+                                      zIndex: 13,
+                                      width: "36px",
+                                      gridRow: leafGridRow,
+                                      ...styles.header,
+                                      ...styles.pinnedHeader,
+                                      borderTop: "none",
+                                      borderLeft: "none",
+                                      borderBottom: "1px solid rgba(128,128,128,0.2)",
+                                      borderRight: "1px solid rgba(128,128,128,0.2)"
+                                    },
+                                    children: /* @__PURE__ */ jsx5(GripVerticalIcon, { style: { width: 12, height: 12, opacity: 0.4 } })
+                                  },
+                                  "__drag__"
+                                );
+                              }
                               if (column.key === "__expand__") {
                                 return /* @__PURE__ */ jsx5(
                                   "div",
@@ -4526,7 +4783,8 @@ function BoltTable({
                                   disabledFilters,
                                   headerGridRow: leafGridRow,
                                   headerHeight: leafHeight,
-                                  stickyTop: leafStickyTop
+                                  stickyTop: leafStickyTop,
+                                  onAutoFitColumn: handleAutoFitColumn
                                 },
                                 column.key
                               );
@@ -4611,7 +4869,8 @@ function BoltTable({
                               enableDynamicRowHeight,
                               onRowHeightChange: handleRowHeightChange,
                               columnGridIndexMap,
-                              cellStyleFn: aiCellStyleOps.length > 0 ? (record, columnKey) => getAICellStyleForRecord(record, columnKey) : void 0
+                              cellStyleFn: aiCellStyleOps.length > 0 ? (record, columnKey) => getAICellStyleForRecord(record, columnKey) : void 0,
+                              onRowDragStart: rowDragEnabled && onRowReorder ? handleRowDragStart : void 0
                             }
                           )
                         ]
@@ -4965,6 +5224,35 @@ function BoltTable({
       ),
       document.body
     ),
+    mounted && rowDragEnabled && onRowReorder && createPortal2(
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref: rowDragGhostRef,
+          style: {
+            display: "none",
+            position: "fixed",
+            zIndex: 99999,
+            height: 32,
+            fontSize: 11,
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 12px",
+            borderRadius: 6,
+            border: `1px dashed ${accentColor}60`,
+            boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+            backdropFilter: "blur(16px)",
+            WebkitBackdropFilter: "blur(16px)",
+            backgroundColor: "rgba(128,128,128,0.12)",
+            cursor: "grabbing",
+            pointerEvents: "none",
+            fontWeight: 500,
+            color: accentColor
+          }
+        }
+      ),
+      document.body
+    ),
     cellContextMenu && mounted && (() => {
       const menuCol = freshOrderedColumns.find(
         (c) => c.key === cellContextMenu.columnKey

package/package.json

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