bolt-table 0.1.37 → 0.1.38

package/dist/index.d.mts

@@ -251,8 +251,30 @@ interface AIColumnVisibilityOperation {
     type: "hideColumns" | "showColumns";
     columns: string[];
 }
+/** Resize a column to a specific width. */
+interface AIResizeColumnOperation {
+    type: "resizeColumn";
+    column: string;
+    width: number;
+}
+/** Reorder columns by moving a column to a new position. */
+interface AIReorderColumnsOperation {
+    type: "reorderColumns";
+    order: string[];
+}
+/** Pin or unpin a column. */
+interface AIPinColumnOperation {
+    type: "pinColumn";
+    column: string;
+    pinned: "left" | "right" | false;
+}
+/** Set the current page number. */
+interface AISetPageOperation {
+    type: "setPage";
+    page: number;
+}
 /** Union of all possible AI operations. */
-type AIOperation = AIFilterOperation | AIStyleOperation | AICellStyleOperation | AISortOperation | AIColumnVisibilityOperation;
+type AIOperation = AIFilterOperation | AIStyleOperation | AICellStyleOperation | AISortOperation | AIColumnVisibilityOperation | AIResizeColumnOperation | AIReorderColumnsOperation | AIPinColumnOperation | AISetPageOperation;
 /** The structured response returned by the AI. */
 interface AIResponse {
     operations: AIOperation[];
@@ -595,4 +617,4 @@ interface TableBodyProps {
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { type AICellStyleOperation, type AIColumnVisibilityOperation, type AICondition, type AIFilterOperation, type AIOperation, type AIOperator, type AIResponse, type AISortOperation, type AIStyleOperation, BoltTable, type BoltTableAIConfig, type BoltTableConfig, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnPersistenceConfig, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody, defineConfig };
+export { type AICellStyleOperation, type AIColumnVisibilityOperation, type AICondition, type AIFilterOperation, type AIOperation, type AIOperator, type AIPinColumnOperation, type AIReorderColumnsOperation, type AIResizeColumnOperation, type AIResponse, type AISetPageOperation, type AISortOperation, type AIStyleOperation, BoltTable, type BoltTableAIConfig, type BoltTableConfig, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnPersistenceConfig, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody, defineConfig };

package/dist/index.d.ts

@@ -251,8 +251,30 @@ interface AIColumnVisibilityOperation {
     type: "hideColumns" | "showColumns";
     columns: string[];
 }
+/** Resize a column to a specific width. */
+interface AIResizeColumnOperation {
+    type: "resizeColumn";
+    column: string;
+    width: number;
+}
+/** Reorder columns by moving a column to a new position. */
+interface AIReorderColumnsOperation {
+    type: "reorderColumns";
+    order: string[];
+}
+/** Pin or unpin a column. */
+interface AIPinColumnOperation {
+    type: "pinColumn";
+    column: string;
+    pinned: "left" | "right" | false;
+}
+/** Set the current page number. */
+interface AISetPageOperation {
+    type: "setPage";
+    page: number;
+}
 /** Union of all possible AI operations. */
-type AIOperation = AIFilterOperation | AIStyleOperation | AICellStyleOperation | AISortOperation | AIColumnVisibilityOperation;
+type AIOperation = AIFilterOperation | AIStyleOperation | AICellStyleOperation | AISortOperation | AIColumnVisibilityOperation | AIResizeColumnOperation | AIReorderColumnsOperation | AIPinColumnOperation | AISetPageOperation;
 /** The structured response returned by the AI. */
 interface AIResponse {
     operations: AIOperation[];
@@ -595,4 +617,4 @@ interface TableBodyProps {
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { type AICellStyleOperation, type AIColumnVisibilityOperation, type AICondition, type AIFilterOperation, type AIOperation, type AIOperator, type AIResponse, type AISortOperation, type AIStyleOperation, BoltTable, type BoltTableAIConfig, type BoltTableConfig, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnPersistenceConfig, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody, defineConfig };
+export { type AICellStyleOperation, type AIColumnVisibilityOperation, type AICondition, type AIFilterOperation, type AIOperation, type AIOperator, type AIPinColumnOperation, type AIReorderColumnsOperation, type AIResizeColumnOperation, type AIResponse, type AISetPageOperation, type AISortOperation, type AIStyleOperation, BoltTable, type BoltTableAIConfig, type BoltTableConfig, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnPersistenceConfig, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody, defineConfig };

package/dist/index.js

@@ -711,66 +711,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 +938,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 +962,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
@@ -2248,6 +2266,101 @@ 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 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 {
+    }
+  }, [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 +2382,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 +2402,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) {
@@ -3435,7 +3570,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)(
@@ -3627,6 +3762,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 +4031,37 @@ 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,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      background: `${accentColor}12`,
+                      border: `1px solid ${accentColor}30`,
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      padding: "2px 8px",
+                      color: accentColor,
+                      fontSize: 11,
+                      flexShrink: 0,
+                      fontWeight: 500,
+                      transition: "all 0.2s ease"
+                    },
+                    title: "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: [
+                        /* @__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.jsxs)(
                   "button",
                   {

package/dist/index.mjs

@@ -676,66 +676,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;
@@ -901,6 +903,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":
@@ -921,12 +927,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
@@ -2219,6 +2237,101 @@ function BoltTable({
   const [aiFilteredDataKeys, setAiFilteredDataKeys] = useState3(null);
   const [aiSortKey, setAiSortKey] = useState3(null);
   const [aiSortDir, setAiSortDir] = useState3(null);
+  const aiFiltersStorageKey = columnPersistence && typeof columnPersistence === "object" ? `bt-ai-filters-${columnPersistence.storageKey}` : "bt-ai-filters";
+  const [savedAIFilters, setSavedAIFilters] = useState3(() => {
+    try {
+      const raw = localStorage.getItem(aiFiltersStorageKey);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [showSavedFilters, setShowSavedFilters] = useState3(false);
+  const savedFiltersRef = useRef4(null);
+  React4.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 = useCallback2(() => {
+    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 {
+    }
+  }, [aiResult, aiQuery, savedAIFilters, aiFiltersStorageKey]);
+  const removeSavedFilter = useCallback2((index) => {
+    const next = savedAIFilters.filter((_, i) => i !== index);
+    setSavedAIFilters(next);
+    try {
+      localStorage.setItem(aiFiltersStorageKey, JSON.stringify(next));
+    } catch {
+    }
+  }, [savedAIFilters, aiFiltersStorageKey]);
+  const applySavedFilter = useCallback2((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 = useRef4(onAIResponse);
   onAIResponseRef.current = onAIResponse;
   const handleAISubmit = useCallback2(async () => {
@@ -2240,7 +2353,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")) {
@@ -2260,15 +2373,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) {
@@ -3406,7 +3541,7 @@ function BoltTable({
                 borderBottom: "1px solid rgba(128,128,128,0.2)",
                 fontSize: 12,
                 flexShrink: 0,
-                overflow: "hidden"
+                zIndex: 20
               },
               children: [
                 /* @__PURE__ */ jsxs5(
@@ -3598,6 +3733,110 @@ function BoltTable({
                           }
                         )
                       ] }),
+                      aiMode && savedAIFilters.length > 0 && /* @__PURE__ */ jsxs5("div", { ref: savedFiltersRef, style: { position: "relative", flexShrink: 0 }, children: [
+                        /* @__PURE__ */ jsxs5(
+                          "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__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }),
+                              /* @__PURE__ */ jsx5("span", { children: savedAIFilters.length })
+                            ]
+                          }
+                        ),
+                        showSavedFilters && /* @__PURE__ */ jsxs5(
+                          "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__ */ jsx5("div", { style: { padding: "6px 12px", fontSize: 11, opacity: 0.5, fontWeight: 600 }, children: "Saved Filters" }),
+                              savedAIFilters.map((f, i) => /* @__PURE__ */ jsxs5(
+                                "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__ */ jsx5(
+                                      "span",
+                                      {
+                                        style: { flex: "1 1 0%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                                        onClick: () => applySavedFilter(f),
+                                        children: f.label
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx5(
+                                      "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__ */ jsx5(XIcon, { style: { width: 10, height: 10 } })
+                                      }
+                                    )
+                                  ]
+                                },
+                                i
+                              ))
+                            ]
+                          }
+                        )
+                      ] }),
                       aiMode && /* @__PURE__ */ jsxs5(
                         "button",
                         {
@@ -3763,6 +4002,37 @@ function BoltTable({
               children: [
                 /* @__PURE__ */ jsx5("span", { style: { color: accentColor, display: "flex", flexShrink: 0 }, children: icons?.sparkles ?? /* @__PURE__ */ jsx5(SparklesIcon, { style: { width: 14, height: 14 } }) }),
                 /* @__PURE__ */ jsx5("span", { style: { flex: "1 1 0%", opacity: 0.85 }, children: aiResult.message }),
+                /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: saveCurrentAIFilter,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      background: `${accentColor}12`,
+                      border: `1px solid ${accentColor}30`,
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      padding: "2px 8px",
+                      color: accentColor,
+                      fontSize: 11,
+                      flexShrink: 0,
+                      fontWeight: 500,
+                      transition: "all 0.2s ease"
+                    },
+                    title: "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: [
+                        /* @__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__ */ jsxs5(
                   "button",
                   {

package/package.json

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