bolt-table 0.1.38 → 0.1.40

package/README.md

@@ -181,6 +181,14 @@ Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterCle
 | `hideGlobalSearch` | `boolean` | `false` | Hide the global search input above the table |
 | `globalSearchValue` | `string` | — | Controlled global search value |
 | `onGlobalSearchChange` | `(value: string) => void` | — | Called when the global search input changes |
+| `rowDragEnabled` | `boolean` | `false` | Show a drag grip handle on each row for drag-and-drop reordering |
+| `onRowReorder` | `(fromIndex, toIndex) => void` | — | Called when the user drops a row into a new position |
+| `aiMode` | `boolean` | `false` | Enable the AI assistant button in the toolbar |
+| `aiConfig` | `BoltTableAIConfig` | — | AI provider configuration (API key, model, etc.) |
+| `onAIQuery` | `(query, context) => Promise<AIResponse>` | — | Custom AI query handler (overrides built-in AI) |
+| `onAIResponse` | `(response: AIResponse) => void` | — | Called after AI applies operations |
+| `aiPlaceholder` | `string` | `"Ask AI anything..."` | Placeholder text for the AI search bar |
+| `aiButtonLabel` | `ReactNode` | `"Ask AI"` | Label for the AI button |
 
 ---
 
@@ -749,6 +757,145 @@ By default, BoltTable auto-sizes to its content. To fill a fixed-height containe
 </div>
 ```
 
+### Row drag-and-drop reordering
+
+Enable row reordering with a drag grip handle on each row. Users can drag rows to new positions.
+
+```tsx
+const [data, setData] = useState<User[]>(initialData);
+
+<BoltTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  rowDragEnabled
+  onRowReorder={(fromIndex, toIndex) => {
+    setData(prev => {
+      const next = [...prev];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      return next;
+    });
+  }}
+/>
+```
+
+A grip icon appears as a pinned column on the left. Drag a row by its grip handle and drop it onto another row — the blue indicator line shows where it will land.
+
+> **Note:** `onRowReorder` receives the indices within the current page's visible data. If you use server-side pagination, map these back to your full dataset accordingly.
+
+---
+
+### Column auto-fit width
+
+Double-click the resize handle (right edge) of any column header to automatically fit the column width to its content. The table measures the header title and all visible cell content, then sets the optimal width (clamped between 60px and 800px).
+
+```tsx
+// No extra configuration needed — auto-fit is built into every column's resize handle.
+// Just double-click the right edge of any header.
+
+<BoltTable columns={columns} data={data} />
+```
+
+You still get notified via `onColumnResize` when an auto-fit happens:
+
+```tsx
+<BoltTable
+  columns={columns}
+  data={data}
+  onColumnResize={(columnKey, newWidth) => {
+    console.log(`Column ${columnKey} auto-fitted to ${newWidth}px`);
+  }}
+/>
+```
+
+---
+
+### AI mode
+
+Enable the AI assistant to let users interact with the table using natural language. The AI can filter, sort, style, resize, reorder, pin columns, and navigate pages.
+
+```tsx
+<BoltTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  aiMode
+  aiConfig={{
+    provider: 'openai',        // 'openai' | 'anthropic' | 'custom'
+    apiKey: 'sk-...',
+    model: 'gpt-4o-mini',     // optional, defaults vary by provider
+  }}
+  onAIResponse={(response) => {
+    console.log('AI applied:', response.message);
+  }}
+/>
+```
+
+**Custom AI handler** (bring your own backend):
+
+```tsx
+<BoltTable
+  columns={columns}
+  data={data}
+  aiMode
+  onAIQuery={async (query, { data, columns }) => {
+    const res = await fetch('/api/table-ai', {
+      method: 'POST',
+      body: JSON.stringify({ query, schema: columns.map(c => c.key) }),
+    });
+    return res.json(); // must return { operations: [...], message: "..." }
+  }}
+/>
+```
+
+**Saved filters** — when AI answers a query, a "Save Filter" button appears. Clicking it saves the operations to localStorage. Saved filters can be re-applied instantly with zero AI calls. The saved filters dropdown appears automatically when you have saved filters.
+
+```tsx
+// Saved filters are stored automatically using the columnPersistence storageKey.
+// To enable saved filters, just use aiMode with columnPersistence:
+<BoltTable
+  columns={columns}
+  data={data}
+  aiMode
+  aiConfig={{ provider: 'openai', apiKey: 'sk-...' }}
+  columnPersistence={{ storageKey: 'my-table' }}
+/>
+```
+
+---
+
+### Safe row keys (NaN / undefined / duplicates)
+
+BoltTable handles edge cases in row keys automatically. If your `rowKey` field contains `undefined`, `null`, `NaN`, or empty strings, the table falls back to index-based keys instead of producing broken or colliding keys.
+
+```tsx
+// All of these work correctly — no crashes, no duplicate key warnings:
+
+// Missing id field
+<BoltTable data={[{ name: 'Alice' }, { name: 'Bob' }]} rowKey="id" columns={columns} />
+
+// NaN values
+<BoltTable data={[{ id: NaN, name: 'Alice' }]} rowKey="id" columns={columns} />
+
+// Duplicate ids — automatically deduplicated
+<BoltTable
+  data={[
+    { id: 1, name: 'Alice' },
+    { id: 1, name: 'Alice (copy)' },
+  ]}
+  rowKey="id"
+  columns={columns}
+/>
+
+// rowKey function that might return undefined
+<BoltTable
+  data={data}
+  rowKey={(record) => record.uuid} // safe even if uuid is undefined
+  columns={columns}
+/>
+```
+
 ---
 
 ## Documentation
@@ -771,6 +918,11 @@ import type {
   SortDirection,
   DataRecord,
   BoltTableIcons,
+  // AI types
+  AIResponse,
+  AIOperation,
+  BoltTableAIConfig,
+  BoltTableConfig,
 } from 'bolt-table';
 ```
 
@@ -780,16 +932,6 @@ import type {
 
 MIT © [Venkatesh Sirigineedi](https://github.com/venkateshwebdev)
 
-
-[![npm version](https://img.shields.io/npm/v/bolt-table)](https://www.npmjs.com/package/bolt-table)
-[![license](https://img.shields.io/npm/l/bolt-table)](./LICENSE)
-[![github](https://img.shields.io/badge/GitHub-Source-181717?logo=github)](https://github.com/venkateshwebdev/Bolt-Table)
-[![website](https://img.shields.io/badge/Website-Live_Demo-blue?logo=vercel)](https://bolt-table.vercel.app/)
-
----
-
-## Features
-
 - **Row virtualization** — only visible rows are rendered, powered by TanStack Virtual
 - **Drag to reorder columns** — custom zero-dependency drag-and-drop (no @dnd-kit needed)
 - **Column pinning** — pin columns to the left or right edge via right-click

package/dist/index.d.mts

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

package/dist/index.d.ts

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