bolt-table 0.1.14 → 0.1.16

package/dist/index.d.ts

@@ -2,19 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode, CSSProperties } from 'react';
 import { Virtualizer } from '@tanstack/react-virtual';
 
-/**
- * Customizable icon overrides for BoltTable.
- * Pass any of these to the `icons` prop on BoltTable to replace the default SVG icons.
- * Each icon should be a pre-sized React node (e.g. an SVG at 12×12px).
- *
- * @example
- * <BoltTable
- *   icons={{
- *     gripVertical: <MyGripIcon size={12} />,
- *     sortAsc: <MySortUpIcon size={12} />,
- *   }}
- * />
- */
+/** Customizable icon overrides for BoltTable. */
 interface BoltTableIcons {
     gripVertical?: React$1.ReactNode;
     sortAsc?: React$1.ReactNode;
@@ -32,1680 +20,350 @@ interface BoltTableIcons {
     copy?: React$1.ReactNode;
 }
 
-/**
- * The direction of a column sort.
- *
- * - `'asc'`  — ascending order (A → Z, 0 → 9)
- * - `'desc'` — descending order (Z → A, 9 → 0)
- * - `null`   — no sort applied
- *
- * @example
- * const [sortDir, setSortDir] = useState<SortDirection>(null);
- */
+/** `'asc'` | `'desc'` | `null` — the direction of a column sort. */
 type SortDirection = 'asc' | 'desc' | null;
-/**
- * Defines the shape of a single column in BoltTable.
- *
- * @typeParam T - The type of a single row record. Defaults to `unknown`.
- *
- * @example
- * const columns: ColumnType<User>[] = [
- *   {
- *     key: 'name',
- *     dataIndex: 'name',
- *     title: 'Full Name',
- *     width: 200,
- *     sortable: true,
- *     render: (value, record) => <strong>{record.name}</strong>,
- *   },
- * ];
- */
+/** Defines the shape of a single column in BoltTable. */
 interface ColumnType<T = unknown> {
-    /**
-     * The text or React node shown in the column header.
-     *
-     * @example
-     * title: 'Full Name'
-     * title: <span style={{ color: 'red' }}>Name</span>
-     */
+    /** The text or React node shown in the column header. */
     title: string | ReactNode;
-    /**
-     * The key in the row data object whose value this column displays.
-     * Must match a property name on your row record type `T`.
-     *
-     * @example
-     * // For a row { id: 1, firstName: 'John' }
-     * dataIndex: 'firstName'
-     */
+    /** The key in the row data object whose value this column displays. */
     dataIndex: string;
-    /**
-     * The fixed pixel width of this column.
-     * If omitted, defaults to `150px`.
-     * The last column always stretches to fill remaining space (minmax).
-     *
-     * @example
-     * width: 200
-     */
+    /** Fixed pixel width of this column. Defaults to `150px`; last column stretches to fill. */
     width?: number;
-    /**
-     * A unique identifier for this column.
-     * Used internally for drag-and-drop ordering, pinning, hiding, and sorting.
-     * Should match `dataIndex` in most cases unless you have computed columns.
-     *
-     * @example
-     * key: 'firstName'
-     */
+    /** Unique identifier for this column, used for ordering, pinning, hiding, and sorting. */
     key: string;
-    /**
-     * Custom render function for the cell content.
-     * If omitted, the raw value from `dataIndex` is rendered as-is.
-     *
-     * @param text   - The raw cell value (`record[dataIndex]`)
-     * @param record - The full row data object
-     * @param index  - The row index (0-based) in the current page/view
-     * @returns A React node to render inside the cell
-     *
-     * @example
-     * render: (value, record) => (
-     *   <span style={{ color: record.isActive ? 'green' : 'gray' }}>
-     *     {String(value)}
-     *   </span>
-     * )
-     */
+    /** Custom render function for cell content. Receives `(value, record, index)`. */
     render?: (text: unknown, record: T, index: number) => ReactNode;
-    /**
-     * Custom render function for the shimmer (loading skeleton) state.
-     * When the table is loading and has no data, this replaces the default
-     * animated pulse bar for this column.
-     *
-     * @returns A React node to render as the loading placeholder
-     *
-     * @example
-     * shimmerRender: () => (
-     *   <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#eee' }} />
-     * )
-     */
+    /** Custom render for the shimmer/loading skeleton state of this column. */
     shimmerRender?: () => ReactNode;
-    /**
-     * Whether this column shows sort controls (ascending/descending).
-     * Defaults to `true`. Set to `false` to hide sorting for this column entirely.
-     *
-     * @default true
-     *
-     * @example
-     * sortable: false  // disables sort UI for this column
-     */
+    /** Whether this column shows sort controls. Defaults to `true`. */
     sortable?: boolean;
     /**
-     * Custom sort comparator used for **client-side** (local) sorting.
-     * Only applies when no `onSortChange` callback is provided to BoltTable
-     * (i.e. you are not doing server-side sorting).
-     *
-     * - Pass `true` to use the default comparator (string localeCompare / number subtraction).
-     * - Pass a function `(a, b) => number` for custom sort logic.
-     *   Return negative if `a` should come first, positive if `b` should come first, 0 if equal.
-     *
-     * @example
-     * // Default comparator
-     * sorter: true
-     *
-     * // Custom comparator — sort by string length
-     * sorter: (a, b) => String(a.name).length - String(b.name).length
-     *
-     * // Custom comparator — sort by date
-     * sorter: (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+     * Client-side sort comparator. `true` uses default comparator;
+     * pass `(a, b) => number` for custom logic.
      */
     sorter?: boolean | ((a: T, b: T) => number);
-    /**
-     * Whether this column shows a filter control in the context menu.
-     * Defaults to `true`. Set to `false` to hide filtering for this column.
-     *
-     * @default true
-     *
-     * @example
-     * filterable: false  // disables filter UI for this column
-     */
+    /** Whether this column shows a filter control. Defaults to `true`. */
     filterable?: boolean;
     /**
-     * Custom filter predicate used for **client-side** (local) filtering.
-     * Only applies when no `onFilterChange` callback is provided to BoltTable.
-     *
-     * @param filterValue - The string the user typed into the filter input
-     * @param record      - The full row data object being tested
-     * @param dataIndex   - The column's `dataIndex` value
-     * @returns `true` to keep the row, `false` to exclude it
-     *
-     * Falls back to a case-insensitive substring match when not provided.
-     *
-     * @example
-     * // Only show rows where the status exactly matches the filter
-     * filterFn: (filterValue, record) =>
-     *   record.status === filterValue
-     *
-     * // Numeric range filter — keep rows where age >= filterValue
-     * filterFn: (filterValue, record) =>
-     *   Number(record.age) >= Number(filterValue)
+     * Client-side filter predicate. Return `true` to keep the row.
+     * Falls back to case-insensitive substring match when not provided.
      */
     filterFn?: (filterValue: string, record: T, dataIndex: string) => boolean;
-    /**
-     * Whether this column is hidden by default on first render.
-     * The user can still show it via column visibility controls if you expose them.
-     *
-     * @default false
-     */
+    /** Whether this column is hidden by default on first render. */
     defaultHidden?: boolean;
-    /**
-     * Which side this column is pinned to by default on first render.
-     * - `'left'`  — column sticks to the left edge while scrolling horizontally
-     * - `'right'` — column sticks to the right edge
-     * - `false`   — column is not pinned (scrolls normally)
-     *
-     * @default false
-     */
+    /** Which side this column is pinned to by default: `'left'`, `'right'`, or `false`. */
     defaultPinned?: 'left' | 'right' | false;
-    /**
-     * Controls the current hidden state of the column.
-     * Use this for controlled visibility (managed by parent state).
-     * For uncontrolled, use `defaultHidden` instead.
-     *
-     * @example
-     * hidden: hiddenColumns.includes('email')
-     */
+    /** Controlled hidden state of the column. For uncontrolled, use `defaultHidden`. */
     hidden?: boolean;
-    /**
-     * Controls the current pinned state of the column.
-     * Use this for controlled pinning (managed by parent state).
-     * For uncontrolled, use `defaultPinned` instead.
-     *
-     * - `'left'`  — pinned to the left
-     * - `'right'` — pinned to the right
-     * - `false`   — not pinned
-     *
-     * @example
-     * pinned: 'left'
-     */
+    /** Controlled pinned state: `'left'`, `'right'`, or `false`. For uncontrolled, use `defaultPinned`. */
     pinned?: 'left' | 'right' | false;
-    /**
-     * Additional CSS class name(s) applied to every cell in this column,
-     * including both the header and body cells.
-     *
-     * @example
-     * className: 'text-right font-mono'
-     */
+    /** Additional CSS class name(s) applied to every cell in this column. */
     className?: string;
-    /**
-     * Inline CSS styles applied to every cell in this column,
-     * including both the header and body cells.
-     *
-     * @example
-     * style: { textAlign: 'right', fontFamily: 'monospace' }
-     */
+    /** Inline CSS styles applied to every cell in this column. */
     style?: React.CSSProperties;
     /**
-     * Enables the "Copy" action in the cell right-click context menu.
-     *
-     * - `true` — copies the raw cell value as a string via `String(value)`
-     * - A function — called with `(value, record, index)` to produce the
-     *   string that is copied to the clipboard. Similar to `sorter`.
-     *
-     * When omitted or `false`, no "Copy" option appears in the cell menu.
-     *
-     * @example
-     * // Default copy
-     * copy: true
-     *
-     * // Custom copy — combine fields
-     * copy: (value, record) => `${record.firstName} ${record.lastName}`
+     * Enables the "Copy" action in the cell context menu.
+     * `true` copies the raw value; pass a function for custom copy text.
      */
     copy?: boolean | ((value: unknown, record: T, index: number) => string);
 }
-/**
- * A single item in the column header context menu (right-click menu).
- * Use `columnContextMenuItems` on BoltTable to inject custom actions
- * alongside the built-in sort/filter/pin/hide options.
- *
- * @example
- * const menuItems: ColumnContextMenuItem[] = [
- *   {
- *     key: 'copy',
- *     label: 'Copy column data',
- *     icon: <CopyIcon />,
- *     onClick: (columnKey) => copyColumnToClipboard(columnKey),
- *   },
- *   {
- *     key: 'delete',
- *     label: 'Remove column',
- *     danger: true,
- *     onClick: (columnKey) => removeColumn(columnKey),
- *   },
- * ];
- */
+/** A single item in the column header right-click context menu. */
 interface ColumnContextMenuItem {
-    /**
-     * Unique identifier for this menu item.
-     * Used as the React `key` prop — must be unique among all custom items.
-     */
+    /** Unique identifier for this menu item, used as the React `key`. */
     key: string;
-    /**
-     * The label shown in the menu. Can be a string or any React node.
-     *
-     * @example
-     * label: 'Copy column'
-     * label: <span style={{ fontWeight: 'bold' }}>Copy column</span>
-     */
+    /** The label shown in the menu. Can be a string or React node. */
     label: React.ReactNode;
-    /**
-     * Optional icon shown to the left of the label.
-     * Recommended size: 12–14px .
-     *
-     * @example
-     * icon: <CopyIcon className="h-3 w-3" />
-     */
+    /** Optional icon shown to the left of the label. */
     icon?: React.ReactNode;
-    /**
-     * When `true`, the label renders in red to indicate a destructive action.
-     *
-     * @default false
-     */
+    /** When `true`, the label renders in red to indicate a destructive action. */
     danger?: boolean;
-    /**
-     * When `true`, the item is grayed out and the click handler is not called.
-     *
-     * @default false
-     */
+    /** When `true`, the item is grayed out and click handler is not called. */
     disabled?: boolean;
-    /**
-     * Called when the user clicks this menu item.
-     *
-     * @param columnKey - The `key` of the column whose header was right-clicked
-     *
-     * @example
-     * onClick: (columnKey) => console.log('Clicked on column:', columnKey)
-     */
+    /** Called when the user clicks this menu item. Receives the column `key`. */
     onClick: (columnKey: string) => void;
 }
-/**
- * How the row selection was triggered.
- *
- * - `'all'`      — select/deselect all rows via the header checkbox
- * - `'single'`   — a single row was selected (radio or single click)
- * - `'multiple'` — individual checkboxes toggled
- */
+/** How the row selection was triggered: `'all'`, `'single'`, or `'multiple'`. */
 type RowSelectMethod = 'all' | 'single' | 'multiple';
-/**
- * Configuration for expandable rows.
- * When provided, each row gets an expand toggle button that reveals
- * a custom rendered panel below the row.
- *
- * @typeParam T - The type of a single row record
- *
- * @example
- * const expandable: ExpandableConfig<Order> = {
- *   rowExpandable: (record) => record.items.length > 0,
- *   expandedRowRender: (record) => (
- *     <div>
- *       {record.items.map(item => <div key={item.id}>{item.name}</div>)}
- *     </div>
- *   ),
- * };
- */
+/** Configuration for expandable rows with a custom rendered panel below each row. */
 interface ExpandableConfig<T = unknown> {
-    /**
-     * When `true`, all rows are expanded on initial render.
-     * Takes priority over `defaultExpandedRowKeys`.
-     *
-     * @default false
-     */
+    /** When `true`, all rows are expanded on initial render. */
     defaultExpandAllRows?: boolean;
-    /**
-     * Controlled list of currently expanded row keys.
-     * When provided, BoltTable operates in **controlled mode** — you must
-     * update this list yourself in `onExpandedRowsChange`.
-     * When omitted, BoltTable manages expansion state internally.
-     *
-     * @example
-     * expandedRowKeys={expandedKeys}
-     */
+    /** Controlled list of currently expanded row keys. Omit for uncontrolled mode. */
     expandedRowKeys?: React.Key[];
-    /**
-     * Renders the expanded content panel for a row.
-     * This panel appears directly below the row when it is expanded.
-     * The panel auto-sizes to its content height.
-     *
-     * @param record   - The row data object
-     * @param index    - The row index (0-based)
-     * @param indent   - The indent level (always 0 for flat tables)
-     * @param expanded - Whether the row is currently expanded (`true`)
-     * @returns The React content to render in the expanded panel
-     *
-     * @example
-     * expandedRowRender: (record) => (
-     *   <pre>{JSON.stringify(record, null, 2)}</pre>
-     * )
-     */
+    /** Renders the expanded content panel for a row. */
     expandedRowRender: (record: T, index: number, indent: number, expanded: boolean) => ReactNode;
-    /**
-     * Row keys that are expanded by default on first render (uncontrolled mode).
-     * Ignored when `expandedRowKeys` is provided.
-     *
-     * @example
-     * defaultExpandedRowKeys={['row-1', 'row-3']}
-     */
+    /** Row keys expanded by default on first render (uncontrolled mode). */
     defaultExpandedRowKeys?: React.Key[];
-    /**
-     * Called whenever the set of expanded rows changes.
-     * In controlled mode, use this to update your `expandedRowKeys` state.
-     *
-     * @param expandedKeys - The full list of currently expanded row keys
-     *
-     * @example
-     * onExpandedRowsChange={(keys) => setExpandedKeys(keys)}
-     */
+    /** Called whenever the set of expanded rows changes. */
     onExpandedRowsChange?: (expandedKeys: React.Key[]) => void;
-    /**
-     * Controls whether to show the expand icon for a specific row.
-     * Return `false` to hide the toggle for rows that cannot be expanded visually.
-     *
-     * @example
-     * showExpandIcon: (record) => record.hasChildren
-     */
+    /** Controls whether the expand icon is shown for a specific row. */
     showExpandIcon?: (record: T) => boolean;
-    /**
-     * Determines whether a specific row is expandable.
-     * When this returns `false` for a row, no expand button is rendered for it.
-     *
-     * @example
-     * rowExpandable: (record) => record.subRows.length > 0
-     */
+    /** Determines whether a specific row is expandable. */
     rowExpandable?: (record: T) => boolean;
 }
-/**
- * Configuration for row selection (checkboxes or radio buttons).
- * When provided, a selection column is prepended to the left of the table.
- *
- * @typeParam T - The type of a single row record
- *
- * @example
- * // Checkbox selection
- * const rowSelection: RowSelectionConfig<User> = {
- *   type: 'checkbox',
- *   selectedRowKeys,
- *   onChange: (keys, rows) => setSelectedRowKeys(keys),
- * };
- *
- * // Radio selection (single row only)
- * const rowSelection: RowSelectionConfig<User> = {
- *   type: 'radio',
- *   selectedRowKeys,
- *   onChange: (keys, rows) => setSelectedRowKeys(keys),
- * };
- */
+/** Configuration for row selection (checkboxes or radio buttons). */
 interface RowSelectionConfig<T = unknown> {
-    /**
-     * The type of selection control.
-     * - `'checkbox'` — multiple rows can be selected (default)
-     * - `'radio'`    — only one row can be selected at a time
-     *
-     * @default 'checkbox'
-     */
+    /** `'checkbox'` for multi-select (default) or `'radio'` for single-select. */
     type?: 'checkbox' | 'radio';
-    /**
-     * When `true`, hides the "select all" checkbox in the header.
-     * Useful when using radio mode or when you want to prevent bulk selection.
-     *
-     * @default false
-     */
+    /** When `true`, hides the "select all" checkbox in the header. */
     hideSelectAll?: boolean;
-    /**
-     * The currently selected row keys (controlled).
-     * This must always be provided — BoltTable does not manage selection state internally.
-     * Keys are matched against the value returned by the `rowKey` prop on BoltTable.
-     *
-     * @example
-     * selectedRowKeys={['row-1', 'row-5']}
-     */
+    /** The currently selected row keys (controlled). */
     selectedRowKeys: React.Key[];
-    /**
-     * Called when the header "select all" checkbox is toggled.
-     *
-     * @param selected     - `true` if selecting all, `false` if deselecting all
-     * @param selectedRows - The rows that are now selected
-     * @param changeRows   - The rows that changed in this action
-     *
-     * @example
-     * onSelectAll: (selected, rows) => {
-     *   setSelectedKeys(selected ? rows.map(r => r.id) : []);
-     * }
-     */
+    /** Called when the header "select all" checkbox is toggled. */
     onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
-    /**
-     * Called when a single row's checkbox or radio is toggled.
-     *
-     * @param record        - The row record that was toggled
-     * @param selected      - `true` if the row is now selected
-     * @param selectedRows  - All currently selected rows after this change
-     * @param nativeEvent   - The original DOM event
-     *
-     * @example
-     * onSelect: (record, selected) => {
-     *   console.log(`Row ${record.id} is now ${selected ? 'selected' : 'deselected'}`);
-     * }
-     */
+    /** Called when a single row's checkbox or radio is toggled. */
     onSelect?: (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
-    /**
-     * Called whenever the selection changes for any reason (single toggle or select all).
-     * This is the primary callback for keeping your state in sync.
-     *
-     * @param selectedRowKeys - The full list of currently selected row keys
-     * @param selectedRows    - The full list of currently selected row records
-     * @param info            - Metadata about how the change was triggered
-     *
-     * @example
-     * onChange: (keys, rows) => {
-     *   setSelectedRowKeys(keys);
-     *   setSelectedRows(rows);
-     * }
-     */
+    /** Called whenever the selection changes for any reason. Primary state-sync callback. */
     onChange?: (selectedRowKeys: React.Key[], selectedRows: T[], info: {
         type: RowSelectMethod;
     }) => void;
-    /**
-     * Returns additional props for the checkbox/radio of a specific row.
-     * Currently supports `disabled` to prevent a row from being selected.
-     *
-     * @param record - The row record
-     * @returns An object with optional `disabled` boolean
-     *
-     * @example
-     * getCheckboxProps: (record) => ({
-     *   disabled: record.status === 'locked',
-     * })
-     */
+    /** Returns additional props (e.g. `disabled`) for the checkbox/radio of a specific row. */
     getCheckboxProps?: (record: T) => {
         disabled?: boolean;
     };
 }
-/**
- * Configuration for the pagination footer.
- * Pass `false` to the `pagination` prop on BoltTable to disable pagination entirely.
- *
- * BoltTable supports both **client-side** and **server-side** pagination:
- * - **Client-side**: pass all your data at once; BoltTable slices it per page automatically.
- * - **Server-side**: pass only the current page's data; set `total` to the full dataset size
- *   and handle `onPaginationChange` to fetch the next page from your API.
- *
- * @example
- * // Client-side (pass all data)
- * pagination={{ pageSize: 20 }}
- *
- * // Server-side
- * pagination={{
- *   current: page,
- *   pageSize: 20,
- *   total: 500,
- *   showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
- * }}
- */
+/** Configuration for the pagination footer. Pass `false` to disable pagination. */
 interface PaginationType {
-    /**
-     * The current active page number (1-based).
-     * Required for controlled / server-side pagination.
-     * Defaults to `1` if omitted.
-     *
-     * @example
-     * current: 3  // currently on page 3
-     */
+    /** Current active page number (1-based). Defaults to `1`. */
     current?: number;
-    /**
-     * Number of rows displayed per page.
-     * The user can also change this via the page-size selector in the footer.
-     *
-     * @default 10
-     *
-     * @example
-     * pageSize: 25
-     */
+    /** Number of rows displayed per page. Defaults to `10`. */
     pageSize?: number;
-    /**
-     * The total number of rows across **all pages**.
-     * Required for server-side pagination so BoltTable knows how many pages exist.
-     * For client-side pagination, omit this — BoltTable calculates it from `data.length`.
-     *
-     * @example
-     * total: 1234  // 1234 rows total on the server
-     */
+    /** Total number of rows across all pages. Required for server-side pagination. */
     total?: number;
-    /**
-     * Custom renderer for the "showing X-Y of Z" text in the pagination footer.
-     *
-     * @param total - The total number of rows
-     * @param range - A tuple `[start, end]` of the currently visible row range
-     * @returns A React node to render as the total label
-     *
-     * @example
-     * showTotal: (total, [start, end]) => `Showing ${start} to ${end} of ${total} results`
-     */
+    /** Custom renderer for the "showing X–Y of Z" text in the pagination footer. */
     showTotal?: (total: number, range: [number, number]) => ReactNode;
 }
-/**
- * Configuration for row pinning.
- * When provided, the specified rows are rendered as sticky rows at the top
- * and/or bottom of the table body, remaining visible during vertical scroll.
- *
- * Pinned rows are excluded from pagination — they are always visible regardless
- * of which page the user is on. Filtering still applies: if a pinned row's key
- * doesn't exist in the (filtered) data, it simply won't appear.
- *
- * @example
- * // Pin two rows to the top and one to the bottom
- * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
- *
- * @example
- * // Controlled pinning — manage pinned keys in parent state
- * const [pinning, setPinning] = useState<RowPinningConfig>({ top: ['header-row'] });
- * <BoltTable rowPinning={pinning} ... />
- */
+/** Configuration for row pinning. Pinned rows remain visible during vertical scroll. */
 interface RowPinningConfig {
-    /**
-     * Row keys to pin at the top of the table.
-     * These rows stick below the column headers during vertical scroll.
-     * Order is preserved — rows are rendered in the order listed here.
-     */
+    /** Row keys to pin at the top of the table. */
     top?: React.Key[];
-    /**
-     * Row keys to pin at the bottom of the table.
-     * These rows stick to the bottom of the visible area during vertical scroll.
-     * Order is preserved — rows are rendered in the order listed here.
-     */
+    /** Row keys to pin at the bottom of the table. */
     bottom?: React.Key[];
 }
-/**
- * The base type for a row record in BoltTable.
- * All row data objects must be indexable by string keys.
- *
- * BoltTable is generic over `T extends DataRecord`, so you can pass your
- * own strongly-typed row type for full type safety in `render`, `sorter`,
- * `filterFn`, and selection callbacks.
- *
- * @example
- * interface User extends DataRecord {
- *   id: string;
- *   name: string;
- *   email: string;
- *   age: number;
- * }
- *
- * <BoltTable<User> columns={columns} data={users} />
- */
+/** Base type for row records — all row objects must be indexable by string keys. */
 type DataRecord = Record<string, unknown>;
 
-/**
- * Props for the BoltTable component.
- *
- * @typeParam T - The type of a single row record. Must extend `DataRecord`
- *               (i.e. `Record<string, unknown>`). Pass your own interface for
- *               full type safety in column `render`, `sorter`, and `filterFn`.
- *
- * @example
- * interface User {
- *   id: string;
- *   name: string;
- *   email: string;
- *   age: number;
- * }
- *
- * <BoltTable<User>
- *   columns={columns}
- *   data={users}
- *   rowKey="id"
- *   pagination={{ pageSize: 20 }}
- * />
- */
 interface BoltTableProps<T extends DataRecord = DataRecord> {
-    /**
-     * Column definitions array. Controls what columns are shown, their order,
-     * width, pinning, sort/filter behavior, and cell rendering.
-     *
-     * BoltTable watches this array for changes using a content fingerprint
-     * (key + hidden + pinned + width). The internal column state syncs whenever
-     * the fingerprint changes, but sub-pixel width jitter (e.g. percentage widths)
-     * is normalized to avoid unnecessary re-syncs.
-     *
-     * @example
-     * const columns: ColumnType<User>[] = [
-     *   { key: 'name', dataIndex: 'name', title: 'Name', width: 200, sortable: true },
-     *   { key: 'email', dataIndex: 'email', title: 'Email', width: 250 },
-     *   { key: 'age', dataIndex: 'age', title: 'Age', width: 80, sortable: true },
-     * ];
-     */
+    /** Column definitions controlling what columns are shown, their order, width, pinning, sort/filter, and rendering. */
     readonly columns: ColumnType<T>[];
-    /**
-     * The row data to display. Each element corresponds to one table row.
-     *
-     * For **client-side** pagination/sort/filter, pass the full dataset.
-     * BoltTable will slice, sort, and filter it internally.
-     *
-     * For **server-side** operations, pass only the current page's data and
-     * provide `onSortChange`, `onFilterChange`, and `onPaginationChange` callbacks
-     * to handle these operations on your server.
-     *
-     * @example
-     * data={users}  // User[]
-     */
+    /** The row data to display. Each element corresponds to one table row. */
     readonly data: T[];
-    /**
-     * Height of each regular (non-expanded) row in pixels.
-     * All rows must have the same base height for virtualization to work correctly.
-     *
-     * @default 40
-     *
-     * @example
-     * rowHeight={48}
-     */
+    /** Height of each row in pixels. All rows must have the same base height for virtualization. */
     readonly rowHeight?: number;
-    /**
-     * The **estimated** height (in pixels) for expanded row content panels.
-     * Used as the initial size estimate when a row is first expanded, before
-     * the actual content height has been measured by ResizeObserver.
-     * Once measured, the virtualizer updates to the real height.
-     *
-     * Set this close to your typical expanded row height for the smoothest experience.
-     *
-     * @default 200
-     *
-     * @example
-     * expandedRowHeight={300}
-     */
+    /** Estimated height (px) for expanded row content, used before actual measurement. */
     readonly expandedRowHeight?: number;
-    /**
-     * Optional maximum height in pixels for expanded row panels.
-     * When the expanded content exceeds this height, the panel becomes scrollable.
-     * When omitted, panels grow to their full content height.
-     *
-     * @example
-     * maxExpandedRowHeight={400}
-     */
+    /** Max height in pixels for expanded row panels. Scrolls when exceeded. */
     readonly maxExpandedRowHeight?: number;
-    /**
-     * The primary color used for interactive elements throughout the table:
-     * - Sort direction indicators in column headers
-     * - Active filter icon in column headers
-     * - Column resize overlay line and label
-     * - Selected row background tint (as a transparent overlay)
-     * - Expand/collapse chevron buttons
-     * - Checkbox and radio button accent color
-     * - Highlighted sort/filter options in the context menu
-     * - Page number highlight in the pagination footer
-     *
-     * Accepts any valid CSS color string.
-     *
-     * @default '#1890ff'
-     *
-     * @example
-     * accentColor="#6366f1"   // indigo
-     * accentColor="#10b981"   // emerald
-     * accentColor="hsl(262, 80%, 50%)"
-     */
+    /** Primary color for interactive elements (sort indicators, selected rows, checkboxes, etc.). */
     readonly accentColor?: string;
-    /**
-     * Additional CSS class name applied to the outermost wrapper div of BoltTable.
-     * Use this to apply custom sizing, border, or shadow to the table container.
-     *
-     * @example
-     * className="rounded-lg border shadow-sm"
-     */
+    /** Additional CSS class name applied to the outermost wrapper div. */
     readonly className?: string;
-    /**
-     * Granular CSS class name overrides for specific parts of the table.
-     * Each key targets a different region of the table.
-     *
-     * @example
-     * classNames={{
-     *   header: 'text-xs uppercase tracking-wider',
-     *   cell: 'text-sm',
-     *   row: 'border-b',
-     *   pinnedHeader: 'bg-blue-50',
-     *   pinnedCell: 'bg-blue-50/50',
-     * }}
-     */
+    /** Granular CSS class name overrides for specific parts of the table. */
     readonly classNames?: ClassNamesTypes;
-    /**
-     * Inline style overrides for specific parts of the table.
-     * Applied after all default and className-based styles, so these take
-     * the highest specificity.
-     *
-     * Note: `pinnedBg` is a special string property (not CSSProperties) that
-     * sets the background color of pinned column cells and headers directly.
-     *
-     * @example
-     * styles={{
-     *   header: { fontSize: 12, fontWeight: 600 },
-     *   pinnedBg: 'rgba(239, 246, 255, 0.9)',
-     *   rowHover: { backgroundColor: '#f0f9ff' },
-     *   rowSelected: { backgroundColor: '#dbeafe' },
-     * }}
-     */
+    /** Inline style overrides for specific parts of the table. */
     readonly styles?: StylesTypes;
-    /**
-     * A custom React node to use as the drag grip icon in column headers.
-     * When omitted, the default GripVertical SVG icon is used.
-     * Ignored when `hideGripIcon` is `true`.
-     *
-     * @deprecated Use `icons.gripVertical` instead. This prop is kept for backward compatibility.
-     *
-     * @example
-     * gripIcon={<DragHandleIcon style={{ width: 12, height: 12 }} />}
-     */
+    /** @deprecated Use `icons.gripVertical` instead. Custom drag grip icon for column headers. */
     readonly gripIcon?: React$1.ReactNode;
-    /**
-     * Custom icon overrides for the table's built-in icons.
-     * Pass any subset of icons to replace the defaults. Unspecified icons use
-     * the built-in SVG icons. Each icon should be a pre-sized React node.
-     *
-     * @example
-     * icons={{
-     *   gripVertical: <MyGripIcon size={12} />,
-     *   sortAsc: <MySortUpIcon size={12} />,
-     *   chevronsLeft: <MyFirstPageIcon size={12} />,
-     * }}
-     */
+    /** Custom icon overrides for the table's built-in icons. */
     readonly icons?: BoltTableIcons;
-    /**
-     * When `true`, the drag grip icon is hidden from all column headers.
-     * Columns can still be dragged even without the grip icon.
-     *
-     * @default false
-     *
-     * @example
-     * hideGripIcon={true}
-     */
+    /** When true, the drag grip icon is hidden from all column headers. */
     readonly hideGripIcon?: boolean;
-    /**
-     * Pagination configuration for the footer, or `false` to disable pagination entirely.
-     *
-     * **Client-side pagination** (pass all data, BoltTable slices it):
-     * ```tsx
-     * pagination={{ pageSize: 20 }}
-     * ```
-     *
-     * **Server-side pagination** (pass only current page's data):
-     * ```tsx
-     * pagination={{ current: page, pageSize: 20, total: 500 }}
-     * onPaginationChange={(page, size) => fetchPage(page, size)}
-     * ```
-     *
-     * **Disable pagination:**
-     * ```tsx
-     * pagination={false}
-     * ```
-     *
-     * @default undefined (pagination footer shown with default settings)
-     */
+    /** Pagination configuration for the footer, or false to disable pagination. */
     readonly pagination?: PaginationType | false;
-    /**
-     * Called when the user changes the current page or page size via the pagination footer.
-     * Required for server-side pagination. For client-side pagination, this is optional
-     * (BoltTable handles page changes internally).
-     *
-     * @param page     - The new page number (1-based)
-     * @param pageSize - The new page size
-     *
-     * @example
-     * onPaginationChange={(page, size) => {
-     *   setCurrentPage(page);
-     *   setPageSize(size);
-     *   fetchData({ page, size });
-     * }}
-     */
+    /** Called when the user changes the current page or page size via the pagination footer. */
     readonly onPaginationChange?: (page: number, pageSize: number) => void;
-    /**
-     * Called when the user finishes resizing a column (on mouse up).
-     * Use this to persist the new width to your state or storage.
-     *
-     * @param columnKey - The `key` of the resized column
-     * @param newWidth  - The new column width in pixels
-     *
-     * @example
-     * onColumnResize={(key, width) => {
-     *   setColumnWidths(prev => ({ ...prev, [key]: width }));
-     * }}
-     */
+    /** Called when the user finishes resizing a column (on mouse up). */
     readonly onColumnResize?: (columnKey: string, newWidth: number) => void;
-    /**
-     * Called after the user drops a column header into a new position.
-     * Receives the full new column key order.
-     * Use this to persist the order to your state or storage.
-     *
-     * @param newOrder - Array of all column keys in their new order
-     *
-     * @example
-     * onColumnOrderChange={(order) => {
-     *   setColumnOrder(order);
-     * }}
-     */
+    /** Called after the user drops a column header into a new position. */
     readonly onColumnOrderChange?: (newOrder: string[]) => void;
-    /**
-     * Called when the user pins or unpins a column via the context menu.
-     *
-     * @param columnKey - The `key` of the column whose pin state changed
-     * @param pinned    - The new pin state: `'left'`, `'right'`, or `false`
-     *
-     * @example
-     * onColumnPin={(key, pinned) => {
-     *   setColumns(prev => prev.map(col =>
-     *     col.key === key ? { ...col, pinned } : col
-     *   ));
-     * }}
-     */
+    /** Called when the user pins or unpins a column via the context menu. */
     readonly onColumnPin?: (columnKey: string, pinned: 'left' | 'right' | false) => void;
-    /**
-     * Called when the user hides or shows a column via the context menu.
-     * Note: pinned columns cannot be hidden.
-     *
-     * @param columnKey - The `key` of the column whose visibility changed
-     * @param hidden    - `true` if the column is now hidden, `false` if now visible
-     *
-     * @example
-     * onColumnHide={(key, hidden) => {
-     *   setColumns(prev => prev.map(col =>
-     *     col.key === key ? { ...col, hidden } : col
-     *   ));
-     * }}
-     */
+    /** Called when the user hides or shows a column via the context menu. */
     readonly onColumnHide?: (columnKey: string, hidden: boolean) => void;
-    /**
-     * Determines the unique key for each row. Used for selection, expansion,
-     * and stable virtualizer item keys.
-     *
-     * Can be:
-     * - A **string**: the name of a property on the row object (e.g. `'id'`)
-     * - A **function**: `(record) => string` for computed keys
-     * - A **number** or **symbol**: property access by index/symbol
-     *
-     * Always returns a string internally (numbers/symbols are coerced to string).
-     *
-     * @default 'id'
-     *
-     * @example
-     * rowKey="id"
-     * rowKey={(record) => `${record.type}-${record.id}`}
-     */
+    /** Determines the unique key for each row. Can be a string property name, function, number, or symbol. */
     readonly rowKey?: string | ((record: T) => string) | number | symbol;
-    /**
-     * Row selection configuration. When provided, prepends a checkbox (or radio)
-     * column to the left of the table.
-     *
-     * BoltTable does not manage selection state internally — you must track
-     * `selectedRowKeys` in your own state and update it in `onChange`.
-     *
-     * @example
-     * rowSelection={{
-     *   type: 'checkbox',
-     *   selectedRowKeys,
-     *   onChange: (keys) => setSelectedRowKeys(keys),
-     * }}
-     */
+    /** Row selection configuration. Prepends a checkbox/radio column when provided. */
     expandable?: ExpandableConfig<T>;
-    /**
-     * Expandable row configuration. When provided, prepends an expand toggle
-     * column to the left of the table (to the right of the selection column
-     * if both are used).
-     *
-     * Supports both controlled (`expandedRowKeys`) and uncontrolled modes.
-     *
-     * @example
-     * expandable={{
-     *   rowExpandable: (record) => record.hasDetails,
-     *   expandedRowRender: (record) => <DetailPanel record={record} />,
-     * }}
-     */
+    /** Expandable row configuration. Prepends an expand toggle column when provided. */
     readonly rowSelection?: RowSelectionConfig<T>;
-    /**
-     * Row pinning configuration. When provided, the specified rows are rendered
-     * as sticky rows at the top and/or bottom of the table body.
-     *
-     * Pinned rows transcend pagination — they are always visible regardless of
-     * which page the user is on. Filtering still applies.
-     *
-     * @example
-     * rowPinning={{ top: ['row-1', 'row-3'], bottom: ['row-10'] }}
-     */
+    /** Row pinning configuration. Specified rows render as sticky at top and/or bottom. */
     readonly rowPinning?: RowPinningConfig;
-    /**
-     * Called when the user pins or unpins a row via the cell right-click context menu.
-     * Update your `rowPinning` state in this callback.
-     *
-     * @param rowKey - The key of the row whose pin state changed
-     * @param pinned - `'top'`, `'bottom'`, or `false` (unpinned)
-     *
-     * @example
-     * 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 };
-     *   });
-     * }}
-     */
+    /** Called when the user pins or unpins a row via the cell context menu. */
     readonly onRowPin?: (rowKey: React$1.Key, pinned: 'top' | 'bottom' | false) => void;
-    /**
-     * Called when the user scrolls near the bottom of the table.
-     * Use this for infinite scroll / load-more behavior.
-     * Fires when the last visible row is within `onEndReachedThreshold` rows of the end.
-     *
-     * A debounce guard prevents this from firing repeatedly — it resets automatically
-     * when `data.length` changes or when `isLoading` flips back to `false`.
-     *
-     * @example
-     * onEndReached={() => {
-     *   if (!isLoading) fetchNextPage();
-     * }}
-     */
+    /** Called when the user scrolls near the bottom of the table. Use for infinite scroll. */
     readonly onEndReached?: () => void;
-    /**
-     * How many rows from the end of the list should trigger `onEndReached`.
-     * A higher value triggers loading earlier (more buffer); lower means later.
-     *
-     * @default 5
-     *
-     * @example
-     * onEndReachedThreshold={10}
-     */
+    /** How many rows from the end of the list should trigger onEndReached. */
     readonly onEndReachedThreshold?: number;
-    /**
-     * When `true` and `data` is empty, the table renders animated shimmer
-     * skeleton rows instead of the empty state or real data.
-     *
-     * When `true` and `data` is non-empty (e.g. loading the next page in
-     * infinite scroll), a small number of shimmer rows are appended at the
-     * bottom below the real data.
-     *
-     * @default false
-     *
-     * @example
-     * isLoading={isFetching}
-     */
+    /** When true and data is empty, shows shimmer skeleton rows. With data, appends shimmer rows at bottom. */
     readonly isLoading?: boolean;
-    /**
-     * Scroll indicator configuration (reserved for future use).
-     * Currently unused but accepted to avoid prop-drilling issues in parent components.
-     */
+    /** Scroll indicator configuration (reserved for future use). */
     readonly scrollIndicators?: {
         vertical?: boolean;
         horizontal?: boolean;
     };
-    /**
-     * Called when the user changes the sort direction via the column header context menu.
-     *
-     * **Server-side sorting**: provide this callback. BoltTable will NOT sort the
-     * data locally — it will pass the event to you and display the data as-is.
-     *
-     * **Client-side sorting** (default): omit this callback. BoltTable will sort
-     * the data locally using `column.sorter` or a default comparator.
-     *
-     * @param columnKey - The `key` of the column being sorted
-     * @param direction - The new sort direction, or `null` to clear the sort
-     *
-     * @example
-     * // Server-side
-     * onSortChange={(key, dir) => {
-     *   setSortKey(key);
-     *   setSortDir(dir);
-     *   refetch({ sortKey: key, sortDir: dir });
-     * }}
-     */
+    /** Called when the user changes sort direction. Provide for server-side sorting. */
     readonly onSortChange?: (columnKey: string, direction: SortDirection) => void;
-    /**
-     * Called when the user applies or clears a column filter via the context menu.
-     *
-     * **Server-side filtering**: provide this callback. BoltTable will NOT filter
-     * the data locally — it passes the full filters map to you.
-     *
-     * **Client-side filtering** (default): omit this callback. BoltTable will filter
-     * locally using `column.filterFn` or a default case-insensitive substring match.
-     *
-     * @param filters - A map of `{ [columnKey]: filterValue }` for all active filters.
-     *                  A column is removed from the map when its filter is cleared.
-     *
-     * @example
-     * // Server-side
-     * onFilterChange={(filters) => {
-     *   setActiveFilters(filters);
-     *   refetch({ filters });
-     * }}
-     */
+    /** Called when the user applies or clears a column filter. Provide for server-side filtering. */
     readonly onFilterChange?: (filters: Record<string, string>) => void;
-    /**
-     * Custom items to append to the bottom of the right-click context menu
-     * that appears on column headers. These appear after the built-in
-     * sort / filter / pin / hide options.
-     *
-     * @example
-     * columnContextMenuItems={[
-     *   {
-     *     key: 'copy-col',
-     *     label: 'Copy column data',
-     *     icon: <CopyIcon className="h-3 w-3" />,
-     *     onClick: (columnKey) => copyColumnToClipboard(columnKey),
-     *   },
-     * ]}
-     */
+    /** Custom items to append to the column header right-click context menu. */
     readonly columnContextMenuItems?: ColumnContextMenuItem[];
-    /**
-     * Controls how the table's height is determined.
-     *
-     * - `true` (default): the table **auto-sizes** to its content, up to a maximum
-     *   of 10 rows. Shorter tables occupy less vertical space. The container uses
-     *   `maxHeight` so a smaller flex parent can still clip it.
-     *
-     * - `false`: the table fills its parent container (`height: 100%`). The parent
-     *   is fully responsible for providing a height. Use this when BoltTable is
-     *   placed inside a fixed-height container (e.g. a modal, a resizable panel).
-     *
-     * @default true
-     *
-     * @example
-     * // Table inside a fixed-height panel
-     * autoHeight={false}
-     */
+    /** Controls table height. True: auto-sizes to content (max 10 rows). False: fills parent container. */
     readonly autoHeight?: boolean;
-    /**
-     * When `true`, renders a full shimmer skeleton layout (including column headers)
-     * before the table's column widths have been calculated from real data.
-     *
-     * Use this for the initial page load when you don't yet know the column widths
-     * but want to show a realistic skeleton immediately.
-     *
-     * Differs from `isLoading`:
-     * - `layoutLoading=true` → entire grid (headers + rows) is a skeleton
-     * - `isLoading=true` → headers are real, only body rows are skeletons
-     *
-     * @default false
-     *
-     * @example
-     * layoutLoading={!columnsResolved}
-     */
+    /** When true, renders a full shimmer skeleton layout before column widths are calculated. */
     readonly layoutLoading?: boolean;
-    /**
-     * Custom React node to render when the table has no data and is not loading.
-     * Replaces the default "No data" message.
-     * The empty state is centered in the visible viewport (sticky left + fixed width)
-     * so it always appears centered even when the table is scrolled horizontally.
-     *
-     * @example
-     * emptyRenderer={
-     *   <div className="flex flex-col items-center gap-2 py-12 text-muted-foreground">
-     *     <SearchX className="h-8 w-8" />
-     *     <p>No results found</p>
-     *   </div>
-     * }
-     */
+    /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
 }
-/**
- * CSS class name overrides for specific regions of BoltTable.
- * All fields are optional — omit any you don't need to customize.
- *
- * @example
- * const classNames: ClassNamesTypes = {
- *   header: 'text-xs font-semibold uppercase text-gray-500',
- *   cell: 'text-sm text-gray-900',
- *   pinnedHeader: 'bg-blue-50 border-r border-blue-200',
- *   pinnedCell: 'bg-blue-50/50',
- * };
- */
 interface ClassNamesTypes {
-    /**
-     * Applied to all non-pinned column header cells.
-     * Pinned headers also receive `pinnedHeader` on top of this.
-     */
+    /** Applied to all non-pinned column header cells. */
     header?: string;
-    /** Applied to all body cells (both pinned and non-pinned) */
+    /** Applied to all body cells (both pinned and non-pinned). */
     cell?: string;
-    /** Applied to each row's wrapper element (reserved for future use) */
+    /** Applied to each row's wrapper element. */
     row?: string;
-    /**
-     * Applied to the floating drag overlay header shown while dragging a column.
-     * Use this to style the "ghost" column that follows the cursor.
-     */
+    /** Applied to the floating drag overlay header while dragging a column. */
     dragHeader?: string;
-    /**
-     * Applied additionally to pinned column header cells (on top of `header`).
-     * Use this to add a border, background, or shadow to distinguish pinned headers.
-     */
+    /** Applied additionally to pinned column header cells. */
     pinnedHeader?: string;
-    /**
-     * Applied additionally to pinned column body cells.
-     * Use this to add a border or separator between pinned and scrolling columns.
-     */
+    /** Applied additionally to pinned column body cells. */
     pinnedCell?: string;
-    /**
-     * Applied to the expanded row content panel (the div below an expanded row).
-     * Does not affect the row itself, only the expanded panel.
-     */
+    /** Applied to the expanded row content panel. */
     expandedRow?: string;
-    /**
-     * Applied to each pinned row's wrapper div (the grid row containing all cells).
-     * Use this to add a border, background, or separator for pinned rows.
-     */
+    /** Applied to each pinned row's wrapper div. */
     pinnedRow?: string;
 }
-/**
- * Inline style overrides for specific regions of BoltTable.
- * Applied after all default styles, so these take the highest specificity.
- *
- * All fields accept standard React `CSSProperties` except `pinnedBg`,
- * which accepts a CSS color string directly.
- *
- * @example
- * const styles: StylesTypes = {
- *   header: { fontSize: 12, letterSpacing: '0.05em' },
- *   rowHover: { backgroundColor: '#f8fafc' },
- *   rowSelected: { backgroundColor: '#eff6ff' },
- *   pinnedBg: 'rgba(239, 246, 255, 0.95)',
- * };
- */
 interface StylesTypes {
-    /** Inline styles for all non-pinned column header cells */
+    /** Inline styles for all non-pinned column header cells. */
     header?: CSSProperties;
-    /** Inline styles for all body cells */
+    /** Inline styles for all body cells. */
     cell?: CSSProperties;
-    /** Inline styles for each row wrapper (reserved for future use) */
+    /** Inline styles for each row wrapper. */
     row?: CSSProperties;
-    /**
-     * Inline styles for the drag overlay header shown while dragging a column.
-     * Applied on top of `header` styles.
-     */
+    /** Inline styles for the drag overlay header. */
     dragHeader?: CSSProperties;
-    /**
-     * Inline styles for pinned column header cells.
-     * Applied on top of `header` styles.
-     */
+    /** Inline styles for pinned column header cells. */
     pinnedHeader?: CSSProperties;
-    /**
-     * Inline styles for pinned column body cells.
-     * Applied on top of `cell` styles.
-     */
+    /** Inline styles for pinned column body cells. */
     pinnedCell?: CSSProperties;
-    /** Inline styles for the expanded row content panel */
+    /** Inline styles for the expanded row content panel. */
     expandedRow?: CSSProperties;
-    /** Inline styles for pinned row wrappers (the grid row containing all cells) */
+    /** Inline styles for pinned row wrappers. */
     pinnedRow?: CSSProperties;
-    /**
-     * CSS color string for the background of pinned row cells.
-     * Should be opaque so that scrolling content behind pinned rows is hidden.
-     * Falls back to `pinnedBg` if not set.
-     *
-     * @example
-     * pinnedRowBg: 'rgba(255, 255, 255, 0.98)'
-     */
+    /** CSS color string for pinned row cell backgrounds. Falls back to pinnedBg. */
     pinnedRowBg?: string;
-    /**
-     * CSS color string applied as the background of hovered rows.
-     * Defaults to `hsl(var(--muted) / 0.5)` if omitted.
-     *
-     * @example
-     * rowHover: { backgroundColor: '#f8fafc' }
-     */
+    /** Styles applied to hovered rows. */
     rowHover?: CSSProperties;
-    /**
-     * CSS color string applied as the background tint of selected rows.
-     * Defaults to `${accentColor}15` (accentColor at 8% opacity).
-     *
-     * @example
-     * rowSelected: { backgroundColor: '#dbeafe' }
-     */
+    /** Styles applied to selected rows. */
     rowSelected?: CSSProperties;
-    /**
-     * CSS color string for the background of pinned column cells and headers.
-     * Accepts any valid CSS color. Defaults to a semi-transparent white/dark
-     * based on the current theme.
-     *
-     * @example
-     * pinnedBg: 'rgba(239, 246, 255, 0.9)'
-     */
+    /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-/**
- * BoltTable — high-performance virtualized React table.
- *
- * Renders only the rows currently visible in the viewport using TanStack Virtual,
- * making it suitable for datasets of any size without performance degradation.
- *
- * @typeParam T - Your row data type. Must extend `DataRecord` (i.e. `Record<string, unknown>`).
- *
- * @example
- * // Minimal usage
- * <BoltTable
- *   columns={[
- *     { key: 'name', dataIndex: 'name', title: 'Name' },
- *     { key: 'email', dataIndex: 'email', title: 'Email' },
- *   ]}
- *   data={users}
- * />
- *
- * @example
- * // Full-featured server-side example
- * <BoltTable<User>
- *   columns={columns}
- *   data={pageData}
- *   rowKey="id"
- *   isLoading={isFetching}
- *   pagination={{ current: page, pageSize: 20, total: totalCount }}
- *   onPaginationChange={(p, size) => fetchPage(p, size)}
- *   onSortChange={(key, dir) => refetch({ sortKey: key, sortDir: dir })}
- *   onFilterChange={(filters) => refetch({ filters })}
- *   rowSelection={{ selectedRowKeys, onChange: (keys) => setSelectedRowKeys(keys) }}
- *   expandable={{
- *     rowExpandable: (r) => r.hasDetails,
- *     expandedRowRender: (r) => <DetailPanel record={r} />,
- *   }}
- *   accentColor="#6366f1"
- *   autoHeight={false}
- * />
- */
 declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, 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, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
-/**
- * Props for the DraggableHeader component.
- * This is an internal component used by BoltTable — all props are passed
- * automatically and you do not need to use DraggableHeader directly.
- */
 interface DraggableHeaderProps {
-    /**
-     * The column definition for this header cell.
-     * Controls width, pinning, sort/filter capabilities, title, and styling.
-     */
+    /** Column definition for this header cell. */
     column: ColumnType<DataRecord>;
-    /**
-     * The visual position index of this column in the ordered column array.
-     * Used to set the CSS `grid-column` placement so headers align with body cells.
-     */
+    /** Visual position index in the ordered column array. */
     visualIndex: number;
-    /**
-     * The accent color used for sort indicators, filter icons, the active sort
-     * highlight in the context menu, and the resize handle hover line.
-     *
-     * @default '#1890ff'
-     */
+    /** Accent color for indicators and highlights. */
     accentColor?: string;
-    /**
-     * Called when the user presses down on the resize handle at the right edge
-     * of this header cell. Starts the resize drag operation in BoltTable.
-     */
+    /** Called when the user starts resizing this column. */
     onResizeStart?: (columnKey: string, event: React$1.MouseEvent) => void;
-    /**
-     * Called when the user starts dragging this column header to reorder.
-     * BoltTable handles the full drag lifecycle from this point.
-     */
+    /** Called when the user starts dragging this column header. */
     onColumnDragStart?: (columnKey: string, event: React$1.PointerEvent) => void;
-    /**
-     * Shared styling overrides for header cells.
-     * `styles.header` applies to all headers; `styles.pinnedHeader` applies
-     * additionally to pinned column headers.
-     */
+    /** Shared styling overrides for header cells. */
     styles?: StylesTypes;
-    /**
-     * Shared CSS class name overrides for header cells.
-     * `classNames.header` applies to all headers; `classNames.pinnedHeader`
-     * applies additionally to pinned column headers.
-     */
+    /** Shared CSS class name overrides for header cells. */
     classNames?: ClassNamesTypes;
-    /**
-     * When `true`, the drag grip icon on the left of the header label is hidden.
-     * The column can still be dragged; only the visual indicator is removed.
-     *
-     * @default false
-     */
+    /** When true, the drag grip icon is hidden. */
     hideGripIcon?: boolean;
-    /**
-     * A custom React node to use as the drag grip icon.
-     * When omitted, the default `GripVertical` icon is used.
-     *
-     * @example
-     * gripIcon={<MyCustomDragIcon />}
-     */
+    /** Custom React node to use as the drag grip icon. */
     gripIcon?: React$1.ReactNode;
-    /**
-     * The pixel offset from the pinned edge (left or right) for this column.
-     * Used to set `left` or `right` CSS on sticky-positioned pinned headers.
-     * Calculated by BoltTable based on the total width of all preceding pinned columns.
-     */
+    /** Pixel offset from the pinned edge for sticky positioning. */
     stickyOffset?: number;
-    /**
-     * Called when the user pins or unpins this column via the context menu
-     * or the unpin button shown on pinned headers.
-     *
-     * @param columnKey - The key of the column being toggled
-     * @param pinned    - The new pinned state: `'left'`, `'right'`, or `false` (unpinned)
-     */
+    /** Called when the user pins or unpins this column. */
     onTogglePin?: (columnKey: string, pinned: 'left' | 'right' | false) => void;
-    /**
-     * Called when the user clicks "Hide Column" in the context menu.
-     * The column's `hidden` property will be toggled in BoltTable's state.
-     * Pinned columns cannot be hidden and this will never be called for them.
-     *
-     * @param columnKey - The key of the column being hidden
-     */
+    /** Called when the user hides this column via the context menu. */
     onToggleHide?: (columnKey: string) => void;
-    /**
-     * Whether this is the rightmost visible column.
-     * When `true`, the header cell uses `width: 100%` instead of a fixed pixel
-     * width so it stretches to fill any remaining horizontal space.
-     *
-     * @default false
-     */
+    /** Whether this is the rightmost visible column. */
     isLastColumn?: boolean;
-    /**
-     * The current sort direction applied to this column.
-     * - `'asc'`  — column is sorted ascending (ArrowUpAZ icon shown)
-     * - `'desc'` — column is sorted descending (ArrowDownAZ icon shown)
-     * - `null`   — column is not currently sorted (no icon shown)
-     *
-     * Passed from BoltTable's sort state; only set for the currently sorted column.
-     */
+    /** Current sort direction applied to this column. */
     sortDirection?: SortDirection;
-    /**
-     * Called when the user clicks a sort option in the context menu.
-     *
-     * @param columnKey - The key of the column to sort
-     * @param direction - The requested sort direction (`'asc'`, `'desc'`, or `undefined` to toggle)
-     */
+    /** Called when the user clicks a sort option in the context menu. */
     onSort?: (columnKey: string, direction?: SortDirection) => void;
-    /**
-     * The current filter value active on this column.
-     * When non-empty, a small Filter icon is shown in the header label.
-     *
-     * @default ''
-     */
+    /** Current filter value active on this column. */
     filterValue?: string;
-    /**
-     * Called when the user submits a new filter value via the context menu input.
-     *
-     * @param columnKey - The key of the column being filtered
-     * @param value     - The filter string entered by the user
-     */
+    /** Called when the user submits a filter value via the context menu. */
     onFilter?: (columnKey: string, value: string) => void;
-    /**
-     * Called when the user clicks "Clear Filter" in the context menu.
-     *
-     * @param columnKey - The key of the column whose filter should be cleared
-     */
+    /** Called when the user clears the filter via the context menu. */
     onClearFilter?: (columnKey: string) => void;
-    /**
-     * Additional custom items to append at the bottom of the right-click context menu.
-     * These appear after the built-in sort/filter/pin/hide options.
-     *
-     * @example
-     * customContextMenuItems={[
-     *   {
-     *     key: 'copy',
-     *     label: 'Copy column data',
-     *     icon: <CopyIcon />,
-     *     onClick: (columnKey) => copyColumn(columnKey),
-     *   }
-     * ]}
-     */
+    /** Additional custom items for the right-click context menu. */
     customContextMenuItems?: ColumnContextMenuItem[];
-    /**
-     * Custom icon overrides from BoltTable's `icons` prop.
-     * Passed through automatically — do not set manually.
-     */
+    /** Custom icon overrides from BoltTable's icons prop. */
     icons?: BoltTableIcons;
 }
-/**
- * DraggableHeader — a single column header cell for BoltTable.
- *
- * Features:
- * - **Drag to reorder**: grip icon on the left; dragging is disabled for pinned columns.
- * - **Resize handle**: a 12px wide invisible hit area on the right edge.
- * - **Sort indicators**: ArrowUpAZ / ArrowDownAZ shown when sorted.
- * - **Filter indicator**: small Filter icon when a filter is active.
- * - **Right-click context menu**: sort asc/desc, filter input, pin left/right, hide column,
- *   plus any custom items passed via `customContextMenuItems`.
- * - **Unpin button**: replaces the resize handle on pinned columns.
- *
- * Wrapped in `React.memo` with a custom equality check — only re-renders when
- * its own column's data changes, preventing cascade re-renders across all headers
- * when a single column's sort/filter/width changes.
- *
- * @internal This is an internal BoltTable component. Use BoltTable directly.
- */
 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, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
 
-/**
- * The imperative handle exposed by ResizeOverlay via `ref`.
- * All three methods must be called in sequence during a resize operation:
- * `show()` → `move()` (many times) → `hide()`.
- */
 interface ResizeOverlayHandle {
-    /**
-     * Makes the overlay visible and positions it at the start of a resize.
-     * Call this on `mousedown` of the resize handle.
-     *
-     * @param viewportX        - The initial mouse X position in viewport coordinates (e.clientX)
-     * @param columnName       - The name/title of the column being resized (shown in the label)
-     * @param areaRect         - The bounding rect of the scroll container (from getBoundingClientRect)
-     * @param headerLeftLocal  - The left edge of the column header in scroll-content coordinates
-     * @param minSize          - The minimum allowed column width in pixels (used to clamp the line)
-     * @param scrollTop        - Current vertical scroll offset of the container (scrollTop)
-     * @param scrollLeft       - Current horizontal scroll offset of the container (scrollLeft)
-     * @param initialLineX     - The initial X position of the vertical line in content coordinates
-     */
     show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
-    /**
-     * Moves the vertical line to follow the mouse cursor during a resize drag.
-     * Call this on every `mousemove` event while dragging.
-     * The line is clamped to never go below the column's minimum width.
-     *
-     * @param viewportX - The current mouse X position in viewport coordinates (e.clientX)
-     */
     move: (viewportX: number) => void;
-    /**
-     * Hides the overlay completely.
-     * Call this on `mouseup` when the resize operation ends.
-     */
     hide: () => void;
 }
-/**
- * Props for the ResizeOverlay component.
- */
 interface ResizeOverlayProps {
-    /**
-     * The accent color used for the resize line and label background.
-     * Should match the `accentColor` prop passed to BoltTable for visual consistency.
-     *
-     * @default '#1778ff'
-     *
-     * @example
-     * accentColor="#6366f1"
-     */
+    /** @default '#1778ff' */
     accentColor?: string;
 }
-/**
- * ResizeOverlay — visual feedback component for column resize operations.
- *
- * Renders a colored vertical line and a floating column-name label that track
- * the user's cursor during a column resize drag. All DOM updates are direct
- * (bypassing React state) for zero-lag, 60fps movement.
- *
- * This component is an implementation detail of BoltTable and is not intended
- * to be used standalone. It is mounted once inside the scroll container and
- * controlled imperatively via the `ResizeOverlayHandle` ref.
- *
- * @example
- * // Inside BoltTable:
- * const resizeOverlayRef = useRef<ResizeOverlayHandle>(null);
- *
- * // On resize start:
- * resizeOverlayRef.current?.show(e.clientX, 'Name', areaRect, headerLeft, 40, scrollTop, scrollLeft, initX);
- *
- * // On mouse move:
- * resizeOverlayRef.current?.move(e.clientX);
- *
- * // On mouse up:
- * resizeOverlayRef.current?.hide();
- *
- * // In JSX:
- * <ResizeOverlay ref={resizeOverlayRef} accentColor={accentColor} />
- */
 declare const ResizeOverlay: React$1.ForwardRefExoticComponent<ResizeOverlayProps & React$1.RefAttributes<ResizeOverlayHandle>>;
 
-/**
- * Props for the TableBody component.
- * All props are passed automatically by BoltTable — this is an internal component.
- */
 interface TableBodyProps {
-    /** The current page's row data (already sliced/filtered/sorted by BoltTable) */
+    /** Current page's row data */
     data: DataRecord[];
-    /** The ordered visible columns (left pinned → unpinned → right pinned) */
+    /** Ordered visible columns (left pinned → unpinned → right pinned) */
     orderedColumns: ColumnType<DataRecord>[];
-    /**
-     * The TanStack Virtual row virtualizer instance.
-     * Provides `getVirtualItems()` and `getTotalSize()` for rendering.
-     */
+    /** TanStack Virtual row virtualizer instance */
     rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
-    /**
-     * Map of column key → sticky offset in pixels.
-     * For left-pinned columns: distance from the left edge.
-     * For right-pinned columns: distance from the right edge.
-     */
+    /** Map of column key → sticky offset in pixels */
     columnOffsets: Map<string, number>;
-    /** Shared style overrides passed down from BoltTable */
+    /** Shared style overrides from BoltTable */
     styles?: StylesTypes;
-    /** Shared class name overrides passed down from BoltTable */
+    /** Shared class name overrides from BoltTable */
     classNames?: ClassNamesTypes;
-    /**
-     * Row selection configuration.
-     * When provided, the `__select__` column renders checkboxes or radio buttons.
-     * `undefined` during shimmer loading to prevent selection UI on skeleton rows.
-     */
+    /** Row selection configuration */
     rowSelection?: RowSelectionConfig<DataRecord>;
-    /**
-     * Pre-normalized selected row keys (all converted to strings).
-     * Normalized in BoltTable so Cell never has to deal with number/string mismatches.
-     *
-     * @default []
-     */
+    /** Pre-normalized selected row keys (all strings) */
     normalizedSelectedKeys?: string[];
-    /**
-     * Returns the string key for a given row record and index.
-     * Derived from BoltTable's `rowKey` prop. Always returns a string.
-     *
-     * @param record - The row data object
-     * @param index  - The row's position in the data array
-     */
+    /** Returns the string key for a given row record and index */
     getRowKey?: (record: DataRecord, index: number) => string;
-    /**
-     * Expandable row configuration.
-     * When provided, rows in `resolvedExpandedKeys` render an expanded content panel.
-     * `undefined` during shimmer loading to prevent expand UI on skeleton rows.
-     */
+    /** Expandable row configuration */
     expandable?: ExpandableConfig<DataRecord>;
-    /**
-     * The set of currently expanded row keys.
-     * Used to determine whether to render the expanded content panel for each row.
-     */
+    /** Set of currently expanded row keys */
     resolvedExpandedKeys?: Set<React$1.Key>;
-    /**
-     * Height of each regular (non-expanded) row in pixels.
-     * Must match the `rowHeight` prop passed to BoltTable.
-     *
-     * @default 40
-     */
+    /** Height of each regular row in pixels */
     rowHeight?: number;
-    /**
-     * Total pixel width of all columns combined.
-     * Used to set `minWidth` on the column spacer so the grid never collapses
-     * below the sum of all column widths.
-     */
+    /** Total pixel width of all columns combined */
     totalTableWidth?: number;
-    /**
-     * The visible width of the scroll container in pixels.
-     * Used to set the width of expanded row panels and the empty state div
-     * so they fill exactly the visible viewport rather than the full content width.
-     */
+    /** Visible width of the scroll container in pixels */
     scrollAreaWidth?: number;
-    /**
-     * The accent color used for the expand toggle button chevron icon.
-     * Should match the `accentColor` prop on BoltTable.
-     *
-     * @default '#1890ff'
-     */
+    /** Accent color for the expand toggle button */
     accentColor?: string;
-    /**
-     * Ref to the scroll container element.
-     * Reserved for potential future use (e.g. programmatic scrolling from within TableBody).
-     */
+    /** Ref to the scroll container element */
     scrollContainerRef?: React$1.RefObject<HTMLDivElement | null>;
-    /**
-     * When `true`, all cells render as animated shimmer skeletons instead of
-     * real data. Used during initial loading when `data` is empty.
-     *
-     * @default false
-     */
+    /** When true, cells render as shimmer skeletons */
     isLoading?: boolean;
-    /**
-     * Called by `MeasuredExpandedRow` when an expanded row's content height changes.
-     * BoltTable uses this to update the virtualizer's size estimate for that row,
-     * triggering a re-layout so the expanded content is never clipped.
-     *
-     * @param rowKey        - The string key of the row whose expanded height changed
-     * @param contentHeight - The new content height in pixels (border-box)
-     */
+    /** Called when an expanded row's content height changes */
     onExpandedRowResize?: (rowKey: string, contentHeight: number) => void;
-    /**
-     * Optional maximum height in pixels for expanded row panels.
-     * When set, the panel becomes scrollable if its content exceeds this height.
-     * When omitted, the panel grows to its full content height.
-     *
-     * @example
-     * maxExpandedRowHeight={300}
-     */
+    /** Max height for expanded row panels (scrollable if exceeded) */
     maxExpandedRowHeight?: number;
-    /**
-     * Rows pinned to the top of the table body.
-     * Rendered as non-virtualized sticky rows below the column headers.
-     */
+    /** Rows pinned to the top of the table body */
     pinnedTopData?: DataRecord[];
-    /**
-     * Rows pinned to the bottom of the table body.
-     * Rendered as non-virtualized sticky rows at the bottom of the visible area.
-     */
+    /** Rows pinned to the bottom of the table body */
     pinnedBottomData?: DataRecord[];
-    /**
-     * The CSS `gridTemplateColumns` string matching the parent grid.
-     * Needed for pinned row sub-grids to align with the main column layout.
-     */
+    /** CSS gridTemplateColumns string matching the parent grid */
     gridTemplateColumns?: string;
-    /**
-     * Height of the column header row in pixels.
-     * Used to position the sticky top pinned rows below the headers.
-     *
-     * @default 36
-     */
+    /** Height of the column header row in pixels */
     headerHeight?: number;
 }
-/**
- * TableBody — the virtualized body renderer for BoltTable.
- *
- * Renders the visible rows using TanStack Virtual's window virtualization.
- * Only the rows currently in (or near) the viewport are in the DOM.
- *
- * Layout strategy:
- * - One `<div>` per column, spanning the full virtual height (`totalSize`px).
- * - Inside each column div, only the visible rows are rendered as
- *   `position: absolute` cells stacked at their `virtualRow.start` offset.
- * - Pinned columns use `position: sticky` on the column div itself, backed
- *   by a semi-transparent background to visually separate from scrolling content.
- * - Expanded rows are rendered in a separate full-width overlay div that sits
- *   on top of all column divs (z-index: 15) and uses `position: sticky; left: 0`
- *   to stay viewport-locked during horizontal scroll.
- *
- * @internal This is an internal BoltTable component. Use BoltTable directly.
- */
 declare const TableBody: React$1.FC<TableBodyProps>;
 
 export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };