bolt-table 0.1.37 → 0.1.39

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",
                   {
@@ -711,66 +719,68 @@ function detectColumnType(key, data) {
   }
   return { type: "string", sample: sampleStr };
 }
+var cachedSchema = null;
+function buildSchemaFingerprint(columns, dataLen) {
+  return columns.filter((c) => c.key !== "__select__" && c.key !== "__expand__").map((c) => c.key).join(",") + `:${dataLen}`;
+}
 function buildSystemPrompt(columns, data) {
-  const schemaLines = columns.filter((c) => c.key !== "__select__" && c.key !== "__expand__").map((c) => {
+  const fingerprint = buildSchemaFingerprint(columns, data.length);
+  if (cachedSchema?.fingerprint === fingerprint) {
+    return cachedSchema.prompt;
+  }
+  const cols = columns.filter((c) => c.key !== "__select__" && c.key !== "__expand__");
+  const schema = cols.map((c) => {
     const key = c.dataIndex ?? c.key;
     const title = typeof c.title === "string" ? c.title : c.key;
     const info = detectColumnType(key, data);
-    return `  - key: "${c.key}", title: "${title}", dataIndex: "${key}", type: ${info.type}${info.sample ? ` (values: ${info.sample})` : ""}`;
+    const w = c.width ?? 150;
+    const pin = c.pinned ? `, pinned: "${c.pinned}"` : "";
+    const hidden = c.hidden ? ", hidden: true" : "";
+    const vals = info.sample ? "|vals: " + info.sample : "";
+    return `  ${c.key}|${key}|"${title}"|${info.type}|w:${w}${pin}${hidden}${vals}`;
   }).join("\n");
-  const sample = data.slice(0, 5).map((row) => {
+  const sample = data.slice(0, 3).map((row) => {
     const obj = {};
-    for (const col of columns) {
-      if (col.key === "__select__" || col.key === "__expand__") continue;
+    for (const col of cols) {
       const di = col.dataIndex ?? col.key;
       obj[di] = row[di];
     }
     return obj;
   });
-  return `You are a data table assistant. You help users query, filter, sort, and style tabular data.
-You MUST respond with ONLY a valid JSON object \u2014 no markdown fences, no explanation, no extra text.
-
-## Table Schema
-${schemaLines}
-
-## Sample Data (first ${sample.length} of ${data.length} rows)
-${JSON.stringify(sample, null, 2)}
-
-## Available Operations
-Combine any of these in a single response:
+  const prompt = `Data table AI. Respond ONLY with valid JSON, no markdown/explanation.
 
-1. **filter** \u2014 show only rows matching conditions
-   { "type": "filter", "conditions": [{ "column": "<dataIndex>", "op": "<op>", "value": <val> }], "logic": "and" | "or" }
+SCHEMA (key|dataIndex|title|type|width|flags|sample):
+${schema}
 
-2. **rowStyle** \u2014 apply CSS styles to entire rows matching conditions
-   { "type": "rowStyle", "conditions": [...], "logic": "and"|"or", "style": { "<cssProp>": "<value>" } }
+SAMPLE (${sample.length}/${data.length} rows):
+${JSON.stringify(sample)}
 
-3. **cellStyle** \u2014 apply CSS styles to a specific column's cells matching conditions
-   { "type": "cellStyle", "column": "<dataIndex>", "conditions": [...], "logic": "and"|"or", "style": { "<cssProp>": "<value>" } }
+COLUMN ORDER: [${cols.map((c) => `"${c.key}"`).join(",")}]
 
-4. **sort** \u2014 sort data by a column
-   { "type": "sort", "column": "<dataIndex>", "direction": "asc" | "desc" }
+OPS (combine any):
+filter: {type:"filter",conditions:[{column:"<dataIndex>",op:"<op>",value:<v>}],logic:"and"|"or"}
+sort: {type:"sort",column:"<dataIndex>",direction:"asc"|"desc"}
+rowStyle: {type:"rowStyle",conditions:[...],logic:"and"|"or",style:{cssProp:"val"}}
+cellStyle: {type:"cellStyle",column:"<dataIndex>",conditions:[...],logic:"and"|"or",style:{cssProp:"val"}}
+hideColumns: {type:"hideColumns",columns:["key",...]}
+showColumns: {type:"showColumns",columns:["key",...]}
+resizeColumn: {type:"resizeColumn",column:"<key>",width:<px>}
+reorderColumns: {type:"reorderColumns",order:["key1","key2",...]}  (full column order)
+pinColumn: {type:"pinColumn",column:"<key>",pinned:"left"|"right"|false}
+setPage: {type:"setPage",page:<number>}
 
-5. **hideColumns** / **showColumns** \u2014 toggle column visibility
-   { "type": "hideColumns" | "showColumns", "columns": ["<key>", ...] }
+OPS: eq,neq,gt,gte,lt,lte,contains,notContains,startsWith,endsWith,in,notIn
 
-## Operators
-eq, neq, gt, gte, lt, lte, contains, notContains, startsWith, endsWith, in, notIn
+FORMAT: {"operations":[...],"message":"brief description"}
 
-## Response format
-{
-  "operations": [ ... ],
-  "message": "Brief user-friendly description of what was applied"
-}
-
-## Rules
-- Use the dataIndex values from the schema, not display titles.
-- For colors use semi-transparent values like "rgba(255,0,0,0.15)" so text stays readable.
-- CSS property names must be camelCase (e.g. "backgroundColor", "color", "fontWeight").
-- If the user asks to highlight / color / mark specific rows, use rowStyle or cellStyle.
-- If the user asks to show only certain rows, use filter.
-- You can combine filter + rowStyle + sort etc. in one response.
-- The "message" should be concise: what was done, in plain English.`;
+RULES:
+- Use dataIndex for data ops, key for column ops (hide/show/resize/reorder/pin).
+- Colors: semi-transparent rgba. CSS props: camelCase.
+- reorderColumns: provide FULL ordered array of ALL visible column keys.
+- resizeColumn width: integer pixels (min 40, max 800).
+- Combine multiple ops freely. Message: concise plain English.`;
+  cachedSchema = { fingerprint, prompt };
+  return prompt;
 }
 async function callAI(config, systemPrompt, userQuery) {
   const { provider, apiKey, model, baseUrl, maxTokens = 1024, temperature = 0.1 } = config;
@@ -936,6 +946,10 @@ function applyAIOperations(data, operations) {
   const cellStyleOps = [];
   const hideColumns = [];
   const showColumns = [];
+  const resizeOps = [];
+  let reorderOp = null;
+  const pinOps = [];
+  let setPageOp = null;
   for (const op of operations) {
     switch (op.type) {
       case "filter":
@@ -956,12 +970,24 @@ function applyAIOperations(data, operations) {
       case "showColumns":
         showColumns.push(...op.columns);
         break;
+      case "resizeColumn":
+        resizeOps.push(op);
+        break;
+      case "reorderColumns":
+        reorderOp = op;
+        break;
+      case "pinColumn":
+        pinOps.push(op);
+        break;
+      case "setPage":
+        setPageOp = op;
+        break;
     }
   }
   if (sortOp) {
     filteredData = applyAISort(filteredData, sortOp);
   }
-  return { filteredData, sortOp, styleOps, cellStyleOps, hideColumns, showColumns };
+  return { filteredData, sortOp, styleOps, cellStyleOps, hideColumns, showColumns, resizeOps, reorderOp, pinOps, setPageOp };
 }
 
 // src/ResizeOverlay.tsx
@@ -1472,7 +1498,8 @@ var TableBody = ({
   enableDynamicRowHeight = false,
   onRowHeightChange,
   columnGridIndexMap,
-  cellStyleFn
+  cellStyleFn,
+  onRowDragStart
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1554,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,
@@ -1566,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,
@@ -2061,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;
@@ -2248,6 +2316,104 @@ function BoltTable({
   const [aiFilteredDataKeys, setAiFilteredDataKeys] = (0, import_react4.useState)(null);
   const [aiSortKey, setAiSortKey] = (0, import_react4.useState)(null);
   const [aiSortDir, setAiSortDir] = (0, import_react4.useState)(null);
+  const aiFiltersStorageKey = columnPersistence && typeof columnPersistence === "object" ? `bt-ai-filters-${columnPersistence.storageKey}` : "bt-ai-filters";
+  const [savedAIFilters, setSavedAIFilters] = (0, import_react4.useState)(() => {
+    try {
+      const raw = localStorage.getItem(aiFiltersStorageKey);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  });
+  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;
+    const close = (e) => {
+      if (savedFiltersRef.current && !savedFiltersRef.current.contains(e.target)) {
+        setShowSavedFilters(false);
+      }
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [showSavedFilters]);
+  const saveCurrentAIFilter = (0, import_react4.useCallback)(() => {
+    if (!aiResult) return;
+    const label = aiQuery || aiResult.message;
+    const entry = { label, operations: aiResult.operations, query: aiQuery };
+    const next = [...savedAIFilters, entry];
+    setSavedAIFilters(next);
+    try {
+      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);
+    setSavedAIFilters(next);
+    try {
+      localStorage.setItem(aiFiltersStorageKey, JSON.stringify(next));
+    } catch {
+    }
+  }, [savedAIFilters, aiFiltersStorageKey]);
+  const applySavedFilter = (0, import_react4.useCallback)((filter) => {
+    const { filteredData, sortOp, styleOps: sOps, cellStyleOps: csOps, hideColumns: hideCols, showColumns: showCols, resizeOps, reorderOp, pinOps, setPageOp } = applyAIOperations(data, filter.operations);
+    setAiStyleOps(sOps);
+    setAiCellStyleOps(csOps);
+    if (filter.operations.some((op) => op.type === "filter")) {
+      const keySet = /* @__PURE__ */ new Set();
+      filteredData.forEach((row, idx) => {
+        const k = typeof rowKey === "function" ? rowKey(row) : String(row[typeof rowKey === "string" ? rowKey : "id"] ?? idx);
+        keySet.add(k);
+      });
+      setAiFilteredDataKeys(keySet);
+    } else {
+      setAiFilteredDataKeys(null);
+    }
+    if (sortOp) {
+      setAiSortKey(sortOp.column);
+      setAiSortDir(sortOp.direction);
+    } else {
+      setAiSortKey(null);
+      setAiSortDir(null);
+    }
+    if (hideCols.length > 0 || showCols.length > 0) {
+      setColumns(
+        (prev) => prev.map((col) => {
+          if (hideCols.includes(col.key)) return { ...col, hidden: true };
+          if (showCols.includes(col.key)) return { ...col, hidden: false };
+          return col;
+        })
+      );
+    }
+    for (const rOp of resizeOps) {
+      const w = Math.max(40, Math.min(800, rOp.width));
+      setColumnWidths((prev) => {
+        const n = new Map(prev);
+        n.set(rOp.column, w);
+        return n;
+      });
+      onColumnResize?.(rOp.column, w);
+    }
+    if (reorderOp) {
+      setColumnOrder(reorderOp.order);
+      onColumnOrderChange?.(reorderOp.order);
+    }
+    for (const pOp of pinOps) {
+      setColumns(
+        (prev) => prev.map((col) => col.key === pOp.column ? { ...col, pinned: pOp.pinned } : col)
+      );
+      onColumnPin?.(pOp.column, pOp.pinned);
+    }
+    if (setPageOp) {
+      setInternalPage(setPageOp.page);
+    }
+    setAiResult({ operations: filter.operations, message: `Applied saved filter: ${filter.label}` });
+    setShowSavedFilters(false);
+  }, [data, rowKey, onColumnResize, onColumnOrderChange, onColumnPin]);
   const onAIResponseRef = (0, import_react4.useRef)(onAIResponse);
   onAIResponseRef.current = onAIResponse;
   const handleAISubmit = (0, import_react4.useCallback)(async () => {
@@ -2269,7 +2435,7 @@ function BoltTable({
       } else {
         throw new Error("AI mode requires either aiConfig or onAIQuery prop");
       }
-      const { filteredData, sortOp, styleOps: sOps, cellStyleOps: csOps, hideColumns, showColumns } = applyAIOperations(data, response.operations);
+      const { filteredData, sortOp, styleOps: sOps, cellStyleOps: csOps, hideColumns: hideCols, showColumns: showCols, resizeOps, reorderOp, pinOps, setPageOp } = applyAIOperations(data, response.operations);
       setAiStyleOps(sOps);
       setAiCellStyleOps(csOps);
       if (response.operations.some((op) => op.type === "filter")) {
@@ -2289,15 +2455,37 @@ function BoltTable({
         setAiSortKey(null);
         setAiSortDir(null);
       }
-      if (hideColumns.length > 0 || showColumns.length > 0) {
+      if (hideCols.length > 0 || showCols.length > 0) {
         setColumns(
           (prev) => prev.map((col) => {
-            if (hideColumns.includes(col.key)) return { ...col, hidden: true };
-            if (showColumns.includes(col.key)) return { ...col, hidden: false };
+            if (hideCols.includes(col.key)) return { ...col, hidden: true };
+            if (showCols.includes(col.key)) return { ...col, hidden: false };
             return col;
           })
         );
       }
+      for (const rOp of resizeOps) {
+        const w = Math.max(40, Math.min(800, rOp.width));
+        setColumnWidths((prev) => {
+          const n = new Map(prev);
+          n.set(rOp.column, w);
+          return n;
+        });
+        onColumnResize?.(rOp.column, w);
+      }
+      if (reorderOp) {
+        setColumnOrder(reorderOp.order);
+        onColumnOrderChange?.(reorderOp.order);
+      }
+      for (const pOp of pinOps) {
+        setColumns(
+          (prev) => prev.map((col) => col.key === pOp.column ? { ...col, pinned: pOp.pinned } : col)
+        );
+        onColumnPin?.(pOp.column, pOp.pinned);
+      }
+      if (setPageOp) {
+        setInternalPage(setPageOp.page);
+      }
       setAiResult(response);
       onAIResponseRef.current?.(response);
     } catch (err) {
@@ -2375,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]
   );
@@ -2419,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;
@@ -2510,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);
@@ -2592,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]"
       );
@@ -2627,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;
           }
@@ -2679,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,
@@ -2745,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__"] : []
     ];
@@ -2759,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]
@@ -2767,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 {
@@ -3260,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]);
@@ -3407,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;
@@ -3417,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; }
@@ -3435,7 +3793,7 @@ function BoltTable({
                 borderBottom: "1px solid rgba(128,128,128,0.2)",
                 fontSize: 12,
                 flexShrink: 0,
-                overflow: "hidden"
+                zIndex: 20
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -3572,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
@@ -3627,6 +3985,110 @@ function BoltTable({
                           }
                         )
                       ] }),
+                      aiMode && savedAIFilters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: savedFiltersRef, style: { position: "relative", flexShrink: 0 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setShowSavedFilters((p) => !p),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 4,
+                              background: "none",
+                              border: "1px solid rgba(128,128,128,0.2)",
+                              borderRadius: 4,
+                              cursor: "pointer",
+                              padding: "4px 6px",
+                              color: "inherit",
+                              fontSize: 12
+                            },
+                            title: "Saved AI filters",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: savedAIFilters.length })
+                            ]
+                          }
+                        ),
+                        showSavedFilters && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: "100%",
+                              right: 0,
+                              zIndex: 99999,
+                              minWidth: 240,
+                              maxWidth: 360,
+                              maxHeight: 320,
+                              overflowY: "auto",
+                              borderRadius: 8,
+                              border: "1px solid rgba(128,128,128,0.2)",
+                              boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
+                              backdropFilter: "blur(16px)",
+                              WebkitBackdropFilter: "blur(16px)",
+                              backgroundColor: "rgba(128,128,128,0.08)",
+                              padding: "4px 0",
+                              marginTop: 4
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, opacity: 0.5, fontWeight: 600 }, children: "Saved Filters" }),
+                              savedAIFilters.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 6,
+                                    padding: "6px 12px",
+                                    cursor: "pointer",
+                                    fontSize: 12
+                                  },
+                                  onMouseEnter: (e) => {
+                                    e.currentTarget.style.backgroundColor = "rgba(128,128,128,0.15)";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    e.currentTarget.style.backgroundColor = "transparent";
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                      "span",
+                                      {
+                                        style: { flex: "1 1 0%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                                        onClick: () => applySavedFilter(f),
+                                        children: f.label
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          removeSavedFilter(i);
+                                        },
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          background: "none",
+                                          border: "none",
+                                          cursor: "pointer",
+                                          padding: 2,
+                                          color: "GrayText",
+                                          flexShrink: 0
+                                        },
+                                        title: "Remove",
+                                        children: icons?.close ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { style: { width: 10, height: 10 } })
+                                      }
+                                    )
+                                  ]
+                                },
+                                i
+                              ))
+                            ]
+                          }
+                        )
+                      ] }),
                       aiMode && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "button",
                         {
@@ -3792,6 +4254,38 @@ function BoltTable({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: accentColor, display: "flex", flexShrink: 0 }, children: icons?.sparkles ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparklesIcon, { style: { width: 14, height: 14 } }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { flex: "1 1 0%", opacity: 0.85 }, children: aiResult.message }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: saveCurrentAIFilter,
+                    disabled: justSavedFilter,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      background: justSavedFilter ? `${accentColor}25` : `${accentColor}12`,
+                      border: `1px solid ${justSavedFilter ? accentColor : `${accentColor}30`}`,
+                      borderRadius: 4,
+                      cursor: justSavedFilter ? "default" : "pointer",
+                      padding: "2px 8px",
+                      color: accentColor,
+                      fontSize: 11,
+                      flexShrink: 0,
+                      fontWeight: 500,
+                      transition: "all 0.2s ease"
+                    },
+                    title: justSavedFilter ? "Filter saved!" : "Save this filter for quick access later",
+                    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: justSavedFilter ? "Saved" : "Save Filter" })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "button",
                   {
@@ -3895,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",
                             {
@@ -3934,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",
@@ -4144,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;
@@ -4221,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",
@@ -4285,7 +4812,8 @@ function BoltTable({
                                   disabledFilters,
                                   headerGridRow: leafGridRow,
                                   headerHeight: leafHeight,
-                                  stickyTop: leafStickyTop
+                                  stickyTop: leafStickyTop,
+                                  onAutoFitColumn: handleAutoFitColumn
                                 },
                                 column.key
                               );
@@ -4370,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
                             }
                           )
                         ]
@@ -4724,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