bolt-table 0.1.40 → 0.1.41

package/README.md

@@ -5,40 +5,34 @@ A high-performance, zero-dependency\* React table component. Only the rows visib
 [![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/)
+[![website](https://img.shields.io/badge/Docs_&_Examples-bolt--table.vercel.app-blue?logo=vercel)](https://bolt-table.vercel.app/)
 
 ---
 
 ## Features
 
-- **Row virtualization** — only visible rows are rendered, powered by TanStack Virtual
-- **Horizontal virtualization** — optionally render only visible columns (great for 100+ column tables)
-- **Dynamic row heights** — auto-measure row heights from content instead of using a fixed `rowHeight`
-- **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
-- **Column resizing** — drag the right edge of any header to resize
-- **Column hiding** — hide/show columns via the right-click context menu
-- **Column picker** — built-in checklist panel to toggle multiple columns on/off at once
-- **Column persistence** — optional localStorage save/restore of column order, widths, visibility, and pinned state
-- **Global search** — a search bar above the table that filters all rows across every column
-- **Sorting** — client-side or server-side, with custom comparators per column
-- **Filtering** — client-side or server-side, with custom filter functions per column
-- **Pagination** — client-side slice or server-side with full control
-- **Row selection** — checkbox or radio, with select-all, indeterminate state, and disabled rows
-- **Expandable rows** — auto-measured content panels below each row, controlled or uncontrolled
-- **Shimmer loading** — animated skeleton rows on initial load and infinite scroll append
-- **Infinite scroll** — `onEndReached` callback with configurable threshold
-- **Empty state** — custom renderer or default "No data" message
-- **Auto height** — table shrinks/grows to fit rows, capped at 10 rows by default
-- **Row pinning** — pin rows to the top or bottom of the table, sticky during vertical scroll
-- **Cell context menu** — right-click (or long-press on mobile) any cell to pin rows or copy values
-- **Right-click context menu** — sort, filter, pin, hide, plus custom items
-- **Mobile-friendly context menus** — long-press (touch-and-hold) triggers context menus on touch devices
-- **Nested / grouped columns** — group related columns under a shared header spanning multiple columns
-- **Duplicate key safety** — automatically deduplicates row keys when data contains rows with the same ID
-- **Theme-agnostic** — works in light and dark mode out of the box, no CSS variables needed
-- **Editable cells** — right-click any cell on an `editable` column to inline-edit via the context menu
-- **Custom icons** — override any built-in icon via the `icons` prop
+- Row & column virtualization
+- Dynamic row heights
+- Drag-to-reorder columns & rows
+- Column pinning, resizing, hiding, picker & persistence
+- Row pinning (sticky top/bottom)
+- Global search & filter builder
+- Sorting (multi-sort with Shift+click)
+- Filtering (text, date range, number range)
+- Pagination (client or server-side)
+- Row selection (checkbox / radio)
+- Expandable rows & master-detail
+- Conditional formatting
+- Row grouping with aggregations
+- Tree data (hierarchical rows)
+- Editable cells (text, number, select, date, toggle)
+- Shimmer loading & infinite scroll
+- AI mode (natural-language queries, insights, charts)
+- Status bar, toolbar customization, custom icons
+- Theme support (auto / light / dark)
+- Mobile-friendly context menus (long-press)
+- Nested / grouped columns
+- Zero-config styling (inline CSS, no imports needed)
 
 ---
 
@@ -48,923 +42,6 @@ A high-performance, zero-dependency\* React table component. Only the rows visib
 npm install bolt-table @tanstack/react-virtual
 ```
 
-That's it. No other peer dependencies.
-
----
-
-## Quick start
-
-```tsx
-import { BoltTable, ColumnType } from 'bolt-table';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-
-const columns: ColumnType<User>[] = [
-  { key: 'name',  dataIndex: 'name',  title: 'Name',  width: 200 },
-  { key: 'email', dataIndex: 'email', title: 'Email', width: 280 },
-  { key: 'age',   dataIndex: 'age',   title: 'Age',   width: 80  },
-];
-
-const data: User[] = [
-  { id: '1', name: 'Alice',   email: 'alice@example.com',   age: 28 },
-  { id: '2', name: 'Bob',     email: 'bob@example.com',     age: 34 },
-  { id: '3', name: 'Charlie', email: 'charlie@example.com', age: 22 },
-];
-
-export default function App() {
-  return (
-    <BoltTable<User>
-      columns={columns}
-      data={data}
-      rowKey="id"
-    />
-  );
-}
-```
-
----
-
-## Next.js (App Router)
-
-BoltTable uses browser APIs and must be wrapped in a client boundary:
-
-```tsx
-'use client';
-import { BoltTable } from 'bolt-table';
-```
-
----
-
-## Styling
-
-BoltTable uses **inline CSS styles** for all defaults — no Tailwind, no CSS variables, no external stylesheets required. It works out of the box in any React project, light or dark mode.
-
-You can customize everything via the `styles` and `classNames` props, including headers, cells, rows, pinned regions, and pagination. If your project uses Tailwind, you can pass Tailwind classes through `classNames` and they'll be applied on top of the inline defaults.
-
-### Custom icons
-
-All built-in icons are inline SVGs. Override any icon via the `icons` prop:
-
-```tsx
-import type { BoltTableIcons } from 'bolt-table';
-
-<BoltTable
-  icons={{
-    gripVertical: <MyGripIcon size={12} />,
-    sortAsc: <MySortUpIcon size={12} />,
-    chevronsLeft: <MyFirstPageIcon size={12} />,
-    search: <MySearchIcon size={14} />,
-    columns: <MyColumnsIcon size={14} />,
-    close: <MyXIcon size={12} />,
-  }}
-/>
-```
-
-Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterClear`, `pin`, `pinOff`, `eyeOff`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsLeft`, `chevronsRight`, `copy`, `edit`, `search`, `columns`, `close`.
-
----
-
-## Props
-
-### `BoltTable`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `ColumnType<T>[]` | — | Column definitions (required) |
-| `data` | `T[]` | — | Row data array (required) |
-| `rowKey` | `string \| (record: T) => string` | `'id'` | Unique row identifier. Duplicate keys are handled automatically |
-| `rowHeight` | `number` | `40` | Base height of each row in pixels |
-| `expandedRowHeight` | `number` | `200` | Estimated height for expanded rows |
-| `maxExpandedRowHeight` | `number` | — | Max height for expanded row panels (makes them scrollable) |
-| `accentColor` | `string` | `'#1890ff'` | Color used for sort icons, selected rows, resize line, etc. |
-| `className` | `string` | `''` | Class name for the outer wrapper |
-| `classNames` | `ClassNamesTypes` | `{}` | Granular class overrides per table region |
-| `styles` | `StylesTypes` | `{}` | Inline style overrides per table region |
-| `icons` | `BoltTableIcons` | — | Custom icon overrides for built-in SVG icons |
-| `gripIcon` | `ReactNode` | — | Custom drag grip icon (deprecated, use `icons.gripVertical`) |
-| `hideGripIcon` | `boolean` | `false` | Hide the drag grip icon from all headers |
-| `pagination` | `PaginationType \| false` | — | Pagination config, or `false` to disable |
-| `onPaginationChange` | `(page, pageSize) => void` | — | Called when page or page size changes |
-| `onColumnResize` | `(columnKey, newWidth) => void` | — | Called when a column is resized |
-| `onColumnOrderChange` | `(newOrder) => void` | — | Called when columns are reordered |
-| `onColumnPin` | `(columnKey, pinned) => void` | — | Called when a column is pinned/unpinned |
-| `onColumnHide` | `(columnKey, hidden) => void` | — | Called when a column is hidden/shown |
-| `rowSelection` | `RowSelectionConfig<T>` | — | Row selection config |
-| `rowPinning` | `RowPinningConfig` | — | Row pinning config (`{ top?: Key[], bottom?: Key[] }`) |
-| `onRowPin` | `(rowKey, pinned) => void` | — | Called when a row is pinned/unpinned via cell context menu |
-| `expandable` | `ExpandableConfig<T>` | — | Expandable row config |
-| `onEndReached` | `() => void` | — | Called when scrolled near the bottom (infinite scroll) |
-| `onEndReachedThreshold` | `number` | `5` | Rows from end to trigger `onEndReached` |
-| `isLoading` | `boolean` | `false` | Shows shimmer skeleton rows when `true` |
-| `onSortChange` | `(columnKey, direction) => void` | — | Server-side sort handler (disables local sort) |
-| `onFilterChange` | `(filters) => void` | — | Server-side filter handler (disables local filter) |
-| `columnContextMenuItems` | `ColumnContextMenuItem[]` | — | Custom items appended to the header context menu |
-| `autoHeight` | `boolean` | `true` | Auto-size table height to content (capped at 10 rows) |
-| `layoutLoading` | `boolean` | `false` | Show full skeleton layout (headers + rows) |
-| `emptyRenderer` | `ReactNode` | — | Custom empty state content |
-| `rowClassName` | `(record, index) => string` | — | Returns a CSS class name for conditional row styling |
-| `rowStyle` | `(record, index) => CSSProperties` | — | Returns inline styles for conditional row styling |
-| `disabledFilters` | `boolean` | `false` | Removes the filter option from all header context menus |
-| `onCopy` | `(text, columnKey, record, rowIndex) => void` | — | Called after a cell value is copied to the clipboard |
-| `keepPinnedRowsAcrossPages` | `boolean` | `false` | Pinned rows remain visible after navigating to a different page |
-| `onEdit` | `(value, record, dataIndex, rowIndex) => void` | — | Called when a user finishes editing an editable cell |
-| `onRowClick` | `(record, index, event) => void` | — | Called when a row is clicked; adds pointer cursor to all cells |
-| `enableColumnVirtualization` | `boolean` | `false` | Only render columns visible in the viewport. Recommended for 100+ column tables |
-| `enableDynamicRowHeight` | `boolean` | `false` | Measure each row's actual content height instead of using a fixed `rowHeight` |
-| `columnPersistence` | `ColumnPersistenceConfig \| false` | `false` | Save column order, widths, visibility, and pinned state to localStorage |
-| `showColumnSettings` | `boolean` | `true` | Show the column picker button (checklist panel to toggle columns on/off) |
-| `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 |
-
----
-
-### `ColumnType<T>`
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `key` | `string` | — | Unique column identifier (required) |
-| `dataIndex` | `string` | — | Row object property to display (required for leaf columns, omit for groups) |
-| `title` | `string \| ReactNode` | — | Header label (required) |
-| `width` | `number` | `150` | Column width in pixels |
-| `render` | `(value, record, index) => ReactNode` | — | Custom cell renderer |
-| `shimmerRender` | `() => ReactNode` | — | Custom shimmer skeleton for this column |
-| `sortable` | `boolean` | `true` | Show sort controls for this column |
-| `sorter` | `boolean \| (a: T, b: T) => number` | — | Custom sort comparator for client-side sort |
-| `filterable` | `boolean` | `true` | Show filter option in context menu |
-| `filterFn` | `(value, record, dataIndex) => boolean` | — | Custom filter predicate for client-side filter |
-| `hidden` | `boolean` | `false` | Hide this column |
-| `defaultHidden` | `boolean` | `false` | Hide this column on first render (uncontrolled) |
-| `pinned` | `'left' \| 'right' \| false` | `false` | Pin this column to an edge |
-| `defaultPinned` | `'left' \| 'right' \| false` | `false` | Pin this column on first render (uncontrolled) |
-| `className` | `string` | — | Class applied to all cells in this column |
-| `style` | `CSSProperties` | — | Styles applied to all cells in this column |
-| `copy` | `boolean \| (value, record, index) => string` | — | Enable "Copy" in cell context menu; function customizes what's copied |
-| `editable` | `boolean` | `false` | Cells become inline-editable (no custom `render` required) |
-| `children` | `ColumnType<T>[]` | — | Nested child columns. Makes this column a header group — only leaf columns render data |
-
----
-
-### `ColumnPersistenceConfig`
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `storageKey` | `string` | — | localStorage key prefix used to store the state (required) |
-| `persistOrder` | `boolean` | `true` | Persist and restore column order |
-| `persistWidths` | `boolean` | `true` | Persist and restore column widths |
-| `persistVisibility` | `boolean` | `true` | Persist and restore hidden/visible state |
-| `persistPinned` | `boolean` | `true` | Persist and restore column pinned state |
-
----
-
-## Examples
-
-### Global search
-
-BoltTable renders a search bar above the table by default. It searches across **all columns** of every row using a case-insensitive substring match.
-
-```tsx
-// Uncontrolled — BoltTable manages the search value internally
-<BoltTable columns={columns} data={data} />
-
-// Hide it entirely
-<BoltTable columns={columns} data={data} hideGlobalSearch />
-
-// Controlled — drive the search value from outside
-const [search, setSearch] = useState('');
-
-<BoltTable
-  columns={columns}
-  data={data}
-  globalSearchValue={search}
-  onGlobalSearchChange={setSearch}
-/>
-```
-
----
-
-### Column picker
-
-The column picker button ("Columns") is shown in the toolbar by default. Clicking it opens a checklist panel letting users toggle any non-pinned column on or off.
-
-```tsx
-// Shown by default — no configuration needed
-<BoltTable columns={columns} data={data} />
-
-// Hide the column picker button
-<BoltTable columns={columns} data={data} showColumnSettings={false} />
-```
-
-> **Note:** Pinned columns cannot be hidden from the picker — unpin them first.
-
----
-
-### Column persistence
-
-Pass a `columnPersistence` config to automatically save column state to `localStorage`. On the next page load the table restores the saved order, widths, visibility, and pinned state.
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  columnPersistence={{
-    storageKey: 'users-table',       // stored as bt_users-table in localStorage
-    persistOrder: true,              // default
-    persistWidths: true,             // default
-    persistVisibility: true,         // default
-    persistPinned: true,             // default
-  }}
-/>
-```
-
-To persist only widths (not order or visibility):
-
-```tsx
-<BoltTable
-  columnPersistence={{
-    storageKey: 'orders-table',
-    persistOrder: false,
-    persistVisibility: false,
-    persistPinned: false,
-  }}
-/>
-```
-
----
-
-### Horizontal virtualization
-
-For tables with a large number of columns enable column virtualization. Only the columns currently visible in the viewport (plus one overscan column on each side) are rendered. Pinned columns always render regardless.
-
-```tsx
-<BoltTable
-  columns={hundredsOfColumns}
-  data={data}
-  enableColumnVirtualization
-/>
-```
-
-> Best suited for tables with 50+ columns. For typical column counts (< 30) the overhead isn't worth it.
-
----
-
-### Dynamic row heights
-
-When row content can vary in height (e.g. multi-line text, embedded components), enable dynamic row heights. BoltTable uses `ResizeObserver` to measure each row's actual rendered height and updates the virtualizer accordingly.
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  enableDynamicRowHeight
-  rowHeight={40}  // used as the minimum / estimated height
-/>
-```
-
-The `rowHeight` prop still acts as the minimum and estimated height used before measurement. Rows grow taller as needed based on their content.
-
----
-
-### Duplicate row keys
-
-If your data can contain rows with the same `id` (or whatever field is used as `rowKey`), BoltTable handles it automatically — no extra configuration needed. Internally it detects duplicates and appends the row index to produce a unique key for the virtualizer and DOM, while still passing the original key to selection and event callbacks.
-
-```tsx
-// Works correctly even with duplicate ids
-<BoltTable
-  columns={columns}
-  data={[
-    { id: 1, name: 'Alice' },
-    { id: 1, name: 'Alice (copy)' }, // same id — renders correctly
-  ]}
-  rowKey="id"
-/>
-```
-
----
-
-### Sorting
-
-**Client-side** (no `onSortChange` — BoltTable sorts locally):
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'name',
-    dataIndex: 'name',
-    title: 'Name',
-    sortable: true,
-    sorter: (a, b) => a.name.localeCompare(b.name),
-  },
-  {
-    key: 'age',
-    dataIndex: 'age',
-    title: 'Age',
-    sortable: true,
-  },
-];
-
-<BoltTable columns={columns} data={data} />
-```
-
-**Server-side** (provide `onSortChange` — BoltTable delegates to you):
-
-```tsx
-const [sortKey, setSortKey] = useState('');
-const [sortDir, setSortDir] = useState<SortDirection>(null);
-
-<BoltTable
-  columns={columns}
-  data={serverData}
-  onSortChange={(key, dir) => {
-    setSortKey(key);
-    setSortDir(dir);
-    refetch({ sortKey: key, sortDir: dir });
-  }}
-/>
-```
-
----
-
-### Filtering
-
-**Client-side** (no `onFilterChange`):
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'status',
-    dataIndex: 'status',
-    title: 'Status',
-    filterable: true,
-    filterFn: (value, record) => record.status === value,
-  },
-];
-```
-
-**Server-side**:
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={serverData}
-  onFilterChange={(filters) => {
-    setActiveFilters(filters);
-    refetch({ filters });
-  }}
-/>
-```
-
----
-
-### Pagination
-
-**Client-side** (pass all data, BoltTable slices it):
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={allUsers}
-  pagination={{ pageSize: 20 }}
-  onPaginationChange={(page, size) => setPage(page)}
-/>
-```
-
-**Server-side** (pass only the current page):
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={currentPageData}
-  pagination={{
-    current: page,
-    pageSize: 20,
-    total: 500,
-    showTotal: (total, [from, to]) => `${from}-${to} of ${total} users`,
-  }}
-  onPaginationChange={(page, size) => fetchPage(page, size)}
-/>
-```
-
-**Disable pagination:**
-
-```tsx
-<BoltTable columns={columns} data={data} pagination={false} />
-```
-
----
-
-### Row selection
-
-```tsx
-const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  rowSelection={{
-    type: 'checkbox',
-    selectedRowKeys,
-    onChange: (keys, rows) => setSelectedRowKeys(keys),
-    getCheckboxProps: (record) => ({
-      disabled: record.status === 'locked',
-    }),
-  }}
-/>
-```
-
----
-
-### Expandable rows
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  expandable={{
-    rowExpandable: (record) => record.details !== null,
-    expandedRowRender: (record) => (
-      <div style={{ padding: 16 }}>
-        <h4>{record.name} — Details</h4>
-        <pre>{JSON.stringify(record.details, null, 2)}</pre>
-      </div>
-    ),
-  }}
-  expandedRowHeight={150}
-  maxExpandedRowHeight={400}
-/>
-```
-
----
-
-### Infinite scroll
-
-```tsx
-const [data, setData] = useState<User[]>([]);
-const [isLoading, setIsLoading] = useState(false);
-
-const loadMore = async () => {
-  setIsLoading(true);
-  const newRows = await fetchNextPage();
-  setData(prev => [...prev, ...newRows]);
-  setIsLoading(false);
-};
-
-<BoltTable
-  columns={columns}
-  data={data}
-  isLoading={isLoading}
-  onEndReached={loadMore}
-  onEndReachedThreshold={8}
-  pagination={false}
-/>
-```
-
----
-
-### Column pinning
-
-```tsx
-const columns: ColumnType<User>[] = [
-  { key: 'name',    dataIndex: 'name',    title: 'Name',    pinned: 'left',  width: 200 },
-  { key: 'email',   dataIndex: 'email',   title: 'Email',   width: 250 },
-  { key: 'actions', dataIndex: 'actions', title: 'Actions', pinned: 'right', width: 100 },
-];
-```
-
-Users can also pin/unpin columns at runtime via the right-click context menu.
-
----
-
-### Row pinning
-
-Pin rows to the top or bottom of the table so they stay visible while scrolling vertically. Pinned rows transcend pagination — they are always visible regardless of which page the user is on.
-
-```tsx
-const [rowPinning, setRowPinning] = useState({ top: [], bottom: [] });
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  rowPinning={rowPinning}
-  onRowPin={(key, pinned) => {
-    setRowPinning(prev => {
-      const top = (prev.top ?? []).filter(k => String(k) !== String(key));
-      const bottom = (prev.bottom ?? []).filter(k => String(k) !== String(key));
-      if (pinned === 'top') top.push(key);
-      if (pinned === 'bottom') bottom.push(key);
-      return { top, bottom };
-    });
-  }}
-  styles={{ pinnedRowBg: 'rgba(255, 255, 255, 0.95)' }}
-/>
-```
-
-Users can also pin/unpin rows at runtime via the right-click context menu on any body cell (when `onRowPin` is provided).
-
-Pinned rows use `position: sticky` with `backdropFilter: blur(12px)` and a subtle box-shadow to visually separate them from scrolling content. Customize with `classNames.pinnedRow`, `styles.pinnedRow`, and `styles.pinnedRowBg`.
-
----
-
-### Cell context menu & copy
-
-Right-click (or long-press on mobile) any body cell to see a context menu with:
-
-- **Pin to Top / Unpin from Top** — shown when `onRowPin` is provided
-- **Pin to Bottom / Unpin from Bottom** — shown when `onRowPin` is provided
-- **Copy** — shown when the column has `copy: true` or a copy function
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'name',
-    dataIndex: 'name',
-    title: 'Name',
-    copy: true, // copies the raw cell value
-  },
-  {
-    key: 'email',
-    dataIndex: 'email',
-    title: 'Email',
-    // Custom copy — control exactly what goes to the clipboard
-    copy: (value, record) => `${record.name} <${value}>`,
-  },
-];
-```
-
-The cell context menu only appears when there is at least one action available (either `onRowPin` or `column.copy`). Otherwise, the browser's default context menu is used.
-
----
-
-### Editable cells
-
-Mark columns as `editable: true` and provide an `onEdit` callback to allow inline editing. Right-click (or long-press on mobile) an editable cell to see the **Edit** option (with a pencil icon) in the context menu. Selecting it turns the cell into an input field. Press **Enter** or click away to commit, **Escape** to cancel.
-
-```tsx
-const [data, setData] = useState<User[]>(initialData);
-
-const columns: ColumnType<User>[] = [
-  { key: 'name',  dataIndex: 'name',  title: 'Name',  editable: true, width: 200 },
-  { key: 'age',   dataIndex: 'age',   title: 'Age',   editable: true, width: 80  },
-  {
-    key: 'status',
-    dataIndex: 'status',
-    title: 'Status',
-    render: (value) => <span className="badge">{String(value)}</span>,
-    editable: true, // ignored — custom render takes precedence
-  },
-];
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  onEdit={(value, record, dataIndex, rowIndex) => {
-    setData(prev =>
-      prev.map((row, i) =>
-        i === rowIndex ? { ...row, [dataIndex]: value } : row
-      )
-    );
-  }}
-/>
-```
-
-The edit icon can be customized via the `icons` prop:
-
-```tsx
-<BoltTable icons={{ edit: <MyPencilIcon size={14} /> }} />
-```
-
-> **Note:** `editable` is skipped for columns that define a custom `render` function — since the cell content is fully controlled by the renderer, inline editing wouldn't know how to display or commit changes. If you need editable custom-rendered cells, handle the editing UX inside your `render` function.
-
----
-
-### Styling overrides
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  accentColor="#6366f1"
-  classNames={{
-    header: 'text-xs uppercase tracking-wider text-gray-500',
-    cell: 'text-sm',
-    pinnedHeader: 'border-r border-indigo-200',
-    pinnedCell: 'border-r border-indigo-100',
-  }}
-  styles={{
-    header: { fontWeight: 600 },
-    rowHover: { backgroundColor: '#f0f9ff' },
-    rowSelected: { backgroundColor: '#e0e7ff' },
-    pinnedBg: 'rgba(238, 242, 255, 0.95)',
-  }}
-/>
-```
-
----
-
-### Nested / grouped columns
-
-Group related columns under a shared header. Parent columns act as header groups — only leaf columns (without `children`) render data cells. Leaf columns within groups support resizing and reordering just like standalone columns.
-
-```tsx
-const columns: ColumnType<User>[] = [
-  { key: 'id', dataIndex: 'id', title: 'ID', width: 80 },
-  {
-    key: 'nameGroup',
-    title: 'Name',
-    children: [
-      { key: 'firstName', dataIndex: 'firstName', title: 'First Name', width: 150 },
-      { key: 'lastName',  dataIndex: 'lastName',  title: 'Last Name',  width: 150 },
-    ],
-  },
-  {
-    key: 'contactGroup',
-    title: 'Contact Info',
-    children: [
-      { key: 'email', dataIndex: 'email', title: 'Email', width: 250 },
-      { key: 'phone', dataIndex: 'phone', title: 'Phone', width: 150 },
-    ],
-  },
-  { key: 'age', dataIndex: 'age', title: 'Age', width: 80 },
-];
-
-<BoltTable columns={columns} data={data} rowKey="id" />
-```
-
-The header renders two rows: group headers span their children columns in the top row, and leaf column headers appear in the bottom row. Standalone columns (not in any group) span both header rows.
-
----
-
-### Pagination styles
-
-Customize every part of the pagination footer via `styles` and `classNames`:
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  pagination={{ pageSize: 20 }}
-  classNames={{
-    pagination: 'bg-gray-50 border-t border-gray-200',
-    paginationButton: 'rounded hover:bg-gray-200',
-    paginationActiveButton: 'font-bold text-blue-600',
-    paginationSelect: 'rounded border-gray-300',
-    paginationInfo: 'text-gray-500 text-xs',
-  }}
-  styles={{
-    pagination: { height: 40 },
-    paginationButton: { borderRadius: 4 },
-    paginationActiveButton: { fontWeight: 700 },
-    paginationSelect: { borderRadius: 4 },
-    paginationInfo: { fontSize: 11 },
-  }}
-/>
-```
-
-Available pagination style/class keys: `pagination` (wrapper), `paginationButton` (nav buttons), `paginationActiveButton` (active page), `paginationSelect` (page-size dropdown), `paginationInfo` (range text).
-
----
-
-### Fixed height (fill parent)
-
-By default, BoltTable auto-sizes to its content. To fill a fixed-height container instead:
-
-```tsx
-<div style={{ height: 600 }}>
-  <BoltTable
-    columns={columns}
-    data={data}
-    autoHeight={false}
-  />
-</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
-
-For the complete guide with in-depth examples for every feature, visit the **[BoltTable Documentation](https://bolt-table.vercel.app/)**.
-
----
-
-## Type exports
-
-```ts
-import type {
-  ColumnType,
-  ColumnContextMenuItem,
-  ColumnPersistenceConfig,
-  RowSelectionConfig,
-  RowPinningConfig,
-  ExpandableConfig,
-  PaginationType,
-  SortDirection,
-  DataRecord,
-  BoltTableIcons,
-  // AI types
-  AIResponse,
-  AIOperation,
-  BoltTableAIConfig,
-  BoltTableConfig,
-} from 'bolt-table';
-```
-
----
-
-## License
-
-MIT © [Venkatesh Sirigineedi](https://github.com/venkateshwebdev)
-
-- **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
-- **Column resizing** — drag the right edge of any header to resize
-- **Column hiding** — hide/show columns via the right-click context menu
-- **Sorting** — client-side or server-side, with custom comparators per column
-- **Filtering** — client-side or server-side, with custom filter functions per column
-- **Pagination** — client-side slice or server-side with full control
-- **Row selection** — checkbox or radio, with select-all, indeterminate state, and disabled rows
-- **Expandable rows** — auto-measured content panels below each row, controlled or uncontrolled
-- **Shimmer loading** — animated skeleton rows on initial load and infinite scroll append
-- **Infinite scroll** — `onEndReached` callback with configurable threshold
-- **Empty state** — custom renderer or default "No data" message
-- **Auto height** — table shrinks/grows to fit rows, capped at 10 rows by default
-- **Row pinning** — pin rows to the top or bottom of the table, sticky during vertical scroll
-- **Cell context menu** — right-click (or long-press on mobile) any cell to pin rows or copy values
-- **Right-click context menu** — sort, filter, pin, hide, plus custom items
-- **Mobile-friendly context menus** — long-press (touch-and-hold) triggers context menus on touch devices
-- **Nested / grouped columns** — group related columns under a shared header spanning multiple columns
-- **Theme-agnostic** — works in light and dark mode out of the box, no CSS variables needed
-- **Editable cells** — right-click any cell on an `editable` column to inline-edit via the context menu
-- **Custom icons** — override any built-in icon via the `icons` prop
-
----
-
-## Installation
-
-```bash
-npm install bolt-table @tanstack/react-virtual
-```
-
-That's it. No other peer dependencies.
-
 ---
 
 ## Quick start
@@ -1002,11 +79,7 @@ export default function App() {
 }
 ```
 
----
-
-## Next.js (App Router)
-
-BoltTable uses browser APIs and must be wrapped in a client boundary:
+### Next.js (App Router)
 
 ```tsx
 'use client';
@@ -1015,510 +88,9 @@ import { BoltTable } from 'bolt-table';
 
 ---
 
-## Styling
-
-BoltTable uses **inline CSS styles** for all defaults — no Tailwind, no CSS variables, no external stylesheets required. It works out of the box in any React project, light or dark mode.
-
-You can customize everything via the `styles` and `classNames` props, including headers, cells, rows, pinned regions, and pagination. If your project uses Tailwind, you can pass Tailwind classes through `classNames` and they'll be applied on top of the inline defaults.
-
-### Custom icons
-
-All built-in icons are inline SVGs. Override any icon via the `icons` prop:
-
-```tsx
-import type { BoltTableIcons } from 'bolt-table';
-
-<BoltTable
-  icons={{
-    gripVertical: <MyGripIcon size={12} />,
-    sortAsc: <MySortUpIcon size={12} />,
-    chevronsLeft: <MyFirstPageIcon size={12} />,
-  }}
-/>
-```
-
-Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterClear`, `pin`, `pinOff`, `eyeOff`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsLeft`, `chevronsRight`, `copy`, `edit`.
-
----
-
-## Props
-
-### `BoltTable`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `ColumnType<T>[]` | — | Column definitions (required) |
-| `data` | `T[]` | — | Row data array (required) |
-| `rowKey` | `string \| (record: T) => string` | `'id'` | Unique row identifier |
-| `rowHeight` | `number` | `40` | Height of each row in pixels |
-| `expandedRowHeight` | `number` | `200` | Estimated height for expanded rows |
-| `maxExpandedRowHeight` | `number` | — | Max height for expanded row panels (makes them scrollable) |
-| `accentColor` | `string` | `'#1890ff'` | Color used for sort icons, selected rows, resize line, etc. |
-| `className` | `string` | `''` | Class name for the outer wrapper |
-| `classNames` | `ClassNamesTypes` | `{}` | Granular class overrides per table region |
-| `styles` | `StylesTypes` | `{}` | Inline style overrides per table region |
-| `icons` | `BoltTableIcons` | — | Custom icon overrides for built-in SVG icons |
-| `gripIcon` | `ReactNode` | — | Custom drag grip icon (deprecated, use `icons.gripVertical`) |
-| `hideGripIcon` | `boolean` | `false` | Hide the drag grip icon from all headers |
-| `pagination` | `PaginationType \| false` | — | Pagination config, or `false` to disable |
-| `onPaginationChange` | `(page, pageSize) => void` | — | Called when page or page size changes |
-| `onColumnResize` | `(columnKey, newWidth) => void` | — | Called when a column is resized |
-| `onColumnOrderChange` | `(newOrder) => void` | — | Called when columns are reordered |
-| `onColumnPin` | `(columnKey, pinned) => void` | — | Called when a column is pinned/unpinned |
-| `onColumnHide` | `(columnKey, hidden) => void` | — | Called when a column is hidden/shown |
-| `rowSelection` | `RowSelectionConfig<T>` | — | Row selection config |
-| `rowPinning` | `RowPinningConfig` | — | Row pinning config (`{ top?: Key[], bottom?: Key[] }`) |
-| `onRowPin` | `(rowKey, pinned) => void` | — | Called when a row is pinned/unpinned via cell context menu |
-| `expandable` | `ExpandableConfig<T>` | — | Expandable row config |
-| `onEndReached` | `() => void` | — | Called when scrolled near the bottom (infinite scroll) |
-| `onEndReachedThreshold` | `number` | `5` | Rows from end to trigger `onEndReached` |
-| `isLoading` | `boolean` | `false` | Shows shimmer skeleton rows when `true` |
-| `onSortChange` | `(columnKey, direction) => void` | — | Server-side sort handler (disables local sort) |
-| `onFilterChange` | `(filters) => void` | — | Server-side filter handler (disables local filter) |
-| `columnContextMenuItems` | `ColumnContextMenuItem[]` | — | Custom items appended to the header context menu |
-| `autoHeight` | `boolean` | `true` | Auto-size table height to content (capped at 10 rows) |
-| `layoutLoading` | `boolean` | `false` | Show full skeleton layout (headers + rows) |
-| `emptyRenderer` | `ReactNode` | — | Custom empty state content |
-| `rowClassName` | `(record, index) => string` | — | Returns a CSS class name for conditional row styling |
-| `rowStyle` | `(record, index) => CSSProperties` | — | Returns inline styles for conditional row styling |
-| `disabledFilters` | `boolean` | `false` | Removes the filter option from all header context menus |
-| `onCopy` | `(text, columnKey, record, rowIndex) => void` | — | Called after a cell value is copied to the clipboard |
-| `keepPinnedRowsAcrossPages` | `boolean` | `false` | Pinned rows remain visible after navigating to a different page |
-| `onEdit` | `(value, record, dataIndex, rowIndex) => void` | — | Called when a user finishes editing an editable cell |
-
----
-
-### `ColumnType<T>`
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `key` | `string` | — | Unique column identifier (required) |
-| `dataIndex` | `string` | — | Row object property to display (required for leaf columns, omit for groups) |
-| `title` | `string \| ReactNode` | — | Header label (required) |
-| `width` | `number` | `150` | Column width in pixels |
-| `render` | `(value, record, index) => ReactNode` | — | Custom cell renderer |
-| `shimmerRender` | `() => ReactNode` | — | Custom shimmer skeleton for this column |
-| `sortable` | `boolean` | `true` | Show sort controls for this column |
-| `sorter` | `boolean \| (a: T, b: T) => number` | — | Custom sort comparator for client-side sort |
-| `filterable` | `boolean` | `true` | Show filter option in context menu |
-| `filterFn` | `(value, record, dataIndex) => boolean` | — | Custom filter predicate for client-side filter |
-| `hidden` | `boolean` | `false` | Hide this column |
-| `pinned` | `'left' \| 'right' \| false` | `false` | Pin this column to an edge |
-| `className` | `string` | — | Class applied to all cells in this column |
-| `style` | `CSSProperties` | — | Styles applied to all cells in this column |
-| `copy` | `boolean \| (value, record, index) => string` | — | Enable "Copy" in cell context menu; function customizes what's copied |
-| `editable` | `boolean` | `false` | When `true` and no custom `render` is set, cells become inline-editable on double-click |
-| `children` | `ColumnType<T>[]` | — | Nested child columns. Makes this column a header group — only leaf columns render data |
-
----
-
-## Examples
-
-### Sorting
-
-**Client-side** (no `onSortChange` — BoltTable sorts locally):
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'name',
-    dataIndex: 'name',
-    title: 'Name',
-    sortable: true,
-    sorter: (a, b) => a.name.localeCompare(b.name),
-  },
-  {
-    key: 'age',
-    dataIndex: 'age',
-    title: 'Age',
-    sortable: true,
-  },
-];
-
-<BoltTable columns={columns} data={data} />
-```
-
-**Server-side** (provide `onSortChange` — BoltTable delegates to you):
-
-```tsx
-const [sortKey, setSortKey] = useState('');
-const [sortDir, setSortDir] = useState<SortDirection>(null);
-
-<BoltTable
-  columns={columns}
-  data={serverData}
-  onSortChange={(key, dir) => {
-    setSortKey(key);
-    setSortDir(dir);
-    refetch({ sortKey: key, sortDir: dir });
-  }}
-/>
-```
-
----
-
-### Filtering
-
-**Client-side** (no `onFilterChange`):
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'status',
-    dataIndex: 'status',
-    title: 'Status',
-    filterable: true,
-    filterFn: (value, record) => record.status === value,
-  },
-];
-```
-
-**Server-side**:
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={serverData}
-  onFilterChange={(filters) => {
-    setActiveFilters(filters);
-    refetch({ filters });
-  }}
-/>
-```
-
----
-
-### Pagination
-
-**Client-side** (pass all data, BoltTable slices it):
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={allUsers}
-  pagination={{ pageSize: 20 }}
-  onPaginationChange={(page, size) => setPage(page)}
-/>
-```
-
-**Server-side** (pass only the current page):
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={currentPageData}
-  pagination={{
-    current: page,
-    pageSize: 20,
-    total: 500,
-    showTotal: (total, [from, to]) => `${from}-${to} of ${total} users`,
-  }}
-  onPaginationChange={(page, size) => fetchPage(page, size)}
-/>
-```
-
-**Disable pagination:**
-
-```tsx
-<BoltTable columns={columns} data={data} pagination={false} />
-```
-
----
-
-### Row selection
-
-```tsx
-const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  rowSelection={{
-    type: 'checkbox',
-    selectedRowKeys,
-    onChange: (keys, rows) => setSelectedRowKeys(keys),
-    getCheckboxProps: (record) => ({
-      disabled: record.status === 'locked',
-    }),
-  }}
-/>
-```
-
----
-
-### Expandable rows
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  expandable={{
-    rowExpandable: (record) => record.details !== null,
-    expandedRowRender: (record) => (
-      <div style={{ padding: 16 }}>
-        <h4>{record.name} — Details</h4>
-        <pre>{JSON.stringify(record.details, null, 2)}</pre>
-      </div>
-    ),
-  }}
-  expandedRowHeight={150}
-  maxExpandedRowHeight={400}
-/>
-```
-
----
-
-### Infinite scroll
-
-```tsx
-const [data, setData] = useState<User[]>([]);
-const [isLoading, setIsLoading] = useState(false);
-
-const loadMore = async () => {
-  setIsLoading(true);
-  const newRows = await fetchNextPage();
-  setData(prev => [...prev, ...newRows]);
-  setIsLoading(false);
-};
-
-<BoltTable
-  columns={columns}
-  data={data}
-  isLoading={isLoading}
-  onEndReached={loadMore}
-  onEndReachedThreshold={8}
-  pagination={false}
-/>
-```
-
----
-
-### Column pinning
-
-```tsx
-const columns: ColumnType<User>[] = [
-  { key: 'name',    dataIndex: 'name',    title: 'Name',    pinned: 'left',  width: 200 },
-  { key: 'email',   dataIndex: 'email',   title: 'Email',   width: 250 },
-  { key: 'actions', dataIndex: 'actions', title: 'Actions', pinned: 'right', width: 100 },
-];
-```
-
-Users can also pin/unpin columns at runtime via the right-click context menu.
-
----
-
-### Row pinning
-
-Pin rows to the top or bottom of the table so they stay visible while scrolling vertically. Pinned rows transcend pagination — they are always visible regardless of which page the user is on.
-
-```tsx
-const [rowPinning, setRowPinning] = useState({ top: [], bottom: [] });
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  rowPinning={rowPinning}
-  onRowPin={(key, pinned) => {
-    setRowPinning(prev => {
-      const top = (prev.top ?? []).filter(k => String(k) !== String(key));
-      const bottom = (prev.bottom ?? []).filter(k => String(k) !== String(key));
-      if (pinned === 'top') top.push(key);
-      if (pinned === 'bottom') bottom.push(key);
-      return { top, bottom };
-    });
-  }}
-  styles={{ pinnedRowBg: 'rgba(255, 255, 255, 0.95)' }}
-/>
-```
-
-Users can also pin/unpin rows at runtime via the right-click context menu on any body cell (when `onRowPin` is provided).
-
-Pinned rows use `position: sticky` with `backdropFilter: blur(12px)` and a subtle box-shadow to visually separate them from scrolling content. Customize with `classNames.pinnedRow`, `styles.pinnedRow`, and `styles.pinnedRowBg`.
-
----
-
-### Cell context menu & copy
-
-Right-click (or long-press on mobile) any body cell to see a context menu with:
-
-- **Pin to Top / Unpin from Top** — shown when `onRowPin` is provided
-- **Pin to Bottom / Unpin from Bottom** — shown when `onRowPin` is provided
-- **Copy** — shown when the column has `copy: true` or a copy function
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'name',
-    dataIndex: 'name',
-    title: 'Name',
-    copy: true, // copies the raw cell value
-  },
-  {
-    key: 'email',
-    dataIndex: 'email',
-    title: 'Email',
-    // Custom copy — control exactly what goes to the clipboard
-    copy: (value, record) => `${record.name} <${value}>`,
-  },
-];
-```
-
-The cell context menu only appears when there is at least one action available (either `onRowPin` or `column.copy`). Otherwise, the browser's default context menu is used.
-
----
-
-### Editable cells
-
-Mark columns as `editable: true` and provide an `onEdit` callback to allow inline editing. Right-click (or long-press on mobile) an editable cell to see the **Edit** option (with a pencil icon) in the context menu. Selecting it turns the cell into an input field. Press **Enter** or click away to commit, **Escape** to cancel.
-
-```tsx
-const [data, setData] = useState<User[]>(initialData);
-
-const columns: ColumnType<User>[] = [
-  { key: 'name',  dataIndex: 'name',  title: 'Name',  editable: true, width: 200 },
-  { key: 'age',   dataIndex: 'age',   title: 'Age',   editable: true, width: 80  },
-  {
-    key: 'status',
-    dataIndex: 'status',
-    title: 'Status',
-    render: (value) => <span className="badge">{String(value)}</span>,
-    editable: true, // ignored — custom render takes precedence
-  },
-];
-
-<BoltTable
-  columns={columns}
-  data={data}
-  rowKey="id"
-  onEdit={(value, record, dataIndex, rowIndex) => {
-    setData(prev =>
-      prev.map((row, i) =>
-        i === rowIndex ? { ...row, [dataIndex]: value } : row
-      )
-    );
-  }}
-/>
-```
-
-The edit icon can be customized via the `icons` prop:
-
-```tsx
-<BoltTable icons={{ edit: <MyPencilIcon size={14} /> }} />
-```
-
-> **Note:** `editable` is skipped for columns that define a custom `render` function — since the cell content is fully controlled by the renderer, inline editing wouldn't know how to display or commit changes. If you need editable custom-rendered cells, handle the editing UX inside your `render` function.
-
----
-
-### Styling overrides
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  accentColor="#6366f1"
-  classNames={{
-    header: 'text-xs uppercase tracking-wider text-gray-500',
-    cell: 'text-sm',
-    pinnedHeader: 'border-r border-indigo-200',
-    pinnedCell: 'border-r border-indigo-100',
-  }}
-  styles={{
-    header: { fontWeight: 600 },
-    rowHover: { backgroundColor: '#f0f9ff' },
-    rowSelected: { backgroundColor: '#e0e7ff' },
-    pinnedBg: 'rgba(238, 242, 255, 0.95)',
-  }}
-/>
-```
-
----
-
-### Nested / grouped columns
-
-Group related columns under a shared header. Parent columns act as header groups — only leaf columns (without `children`) render data cells. Leaf columns within groups support resizing and reordering just like standalone columns.
-
-```tsx
-const columns: ColumnType<User>[] = [
-  { key: 'id', dataIndex: 'id', title: 'ID', width: 80 },
-  {
-    key: 'nameGroup',
-    title: 'Name',
-    children: [
-      { key: 'firstName', dataIndex: 'firstName', title: 'First Name', width: 150 },
-      { key: 'lastName',  dataIndex: 'lastName',  title: 'Last Name',  width: 150 },
-    ],
-  },
-  {
-    key: 'contactGroup',
-    title: 'Contact Info',
-    children: [
-      { key: 'email', dataIndex: 'email', title: 'Email', width: 250 },
-      { key: 'phone', dataIndex: 'phone', title: 'Phone', width: 150 },
-    ],
-  },
-  { key: 'age', dataIndex: 'age', title: 'Age', width: 80 },
-];
-
-<BoltTable columns={columns} data={data} rowKey="id" />
-```
-
-The header renders two rows: group headers span their children columns in the top row, and leaf column headers appear in the bottom row. Standalone columns (not in any group) span both header rows.
-
----
-
-### Pagination styles
-
-Customize every part of the pagination footer via `styles` and `classNames`:
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  pagination={{ pageSize: 20 }}
-  classNames={{
-    pagination: 'bg-gray-50 border-t border-gray-200',
-    paginationButton: 'rounded hover:bg-gray-200',
-    paginationActiveButton: 'font-bold text-blue-600',
-    paginationSelect: 'rounded border-gray-300',
-    paginationInfo: 'text-gray-500 text-xs',
-  }}
-  styles={{
-    pagination: { height: 40 },
-    paginationButton: { borderRadius: 4 },
-    paginationActiveButton: { fontWeight: 700 },
-    paginationSelect: { borderRadius: 4 },
-    paginationInfo: { fontSize: 11 },
-  }}
-/>
-```
-
-Available pagination style/class keys: `pagination` (wrapper), `paginationButton` (nav buttons), `paginationActiveButton` (active page), `paginationSelect` (page-size dropdown), `paginationInfo` (range text).
-
----
-
-### Fixed height (fill parent)
-
-By default, BoltTable auto-sizes to its content. To fill a fixed-height container instead:
-
-```tsx
-<div style={{ height: 600 }}>
-  <BoltTable
-    columns={columns}
-    data={data}
-    autoHeight={false}
-  />
-</div>
-```
-
----
-
 ## Documentation
 
-For the complete guide with in-depth examples for every feature, visit the **[BoltTable Documentation](https://bolt-table.vercel.app/)**.
+For the complete guide with interactive examples, props reference, and API docs visit **[bolt-table.vercel.app](https://bolt-table.vercel.app/)**.
 
 ---
 
@@ -1528,6 +100,8 @@ For the complete guide with in-depth examples for every feature, visit the **[Bo
 import type {
   ColumnType,
   ColumnContextMenuItem,
+  CellContextMenuItem,
+  ColumnPersistenceConfig,
   RowSelectionConfig,
   RowPinningConfig,
   ExpandableConfig,
@@ -1535,6 +109,16 @@ import type {
   SortDirection,
   DataRecord,
   BoltTableIcons,
+  ConditionalFormatRule,
+  RowGroupingConfig,
+  AggregateFunction,
+  TreeDataConfig,
+  ClassNamesTypes,
+  StylesTypes,
+  AIResponse,
+  AIOperation,
+  BoltTableAIConfig,
+  BoltTableConfig,
 } from 'bolt-table';
 ```