bolt-table 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,1542 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, CSSProperties } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+
+/**
+ * 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);
+ */
+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>,
+ *   },
+ * ];
+ */
+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>
+     */
+    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'
+     */
+    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
+     */
+    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'
+     */
+    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>
+     * )
+     */
+    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' }} />
+     * )
+     */
+    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
+     */
+    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()
+     */
+    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
+     */
+    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)
+     */
+    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
+     */
+    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
+     */
+    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')
+     */
+    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'
+     */
+    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'
+     */
+    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' }
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 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),
+ *   },
+ * ];
+ */
+interface ColumnContextMenuItem {
+    /**
+     * Unique identifier for this menu item.
+     * Used as the React `key` prop — must be unique among all custom items.
+     */
+    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>
+     */
+    label: React.ReactNode;
+    /**
+     * Optional icon shown to the left of the label.
+     * Recommended size: 12–14px (e.g. a lucide-react icon at h-3 w-3).
+     *
+     * @example
+     * icon: <CopyIcon className="h-3 w-3" />
+     */
+    icon?: React.ReactNode;
+    /**
+     * When `true`, the label renders in red to indicate a destructive action.
+     *
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * When `true`, the item is grayed out and the click handler is not called.
+     *
+     * @default false
+     */
+    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)
+     */
+    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
+ */
+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>
+ *   ),
+ * };
+ */
+interface ExpandableConfig<T = unknown> {
+    /**
+     * When `true`, all rows are expanded on initial render.
+     * Takes priority over `defaultExpandedRowKeys`.
+     *
+     * @default false
+     */
+    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}
+     */
+    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>
+     * )
+     */
+    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']}
+     */
+    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)}
+     */
+    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
+     */
+    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
+     */
+    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),
+ * };
+ */
+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'
+     */
+    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
+     */
+    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']}
+     */
+    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) : []);
+     * }
+     */
+    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'}`);
+     * }
+     */
+    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);
+     * }
+     */
+    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',
+     * })
+     */
+    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}`,
+ * }}
+ */
+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?: 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
+     */
+    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;
+    /**
+     * 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`
+     */
+    showTotal?: (total: number, range: [number, number]) => ReactNode;
+}
+/**
+ * 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} />
+ */
+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 },
+     * ];
+     */
+    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[]
+     */
+    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}
+     */
+    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}
+     */
+    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}
+     */
+    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%)"
+     */
+    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"
+     */
+    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',
+     * }}
+     */
+    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' },
+     * }}
+     */
+    readonly styles?: StylesTypes;
+    /**
+     * A custom React node to use as the drag grip icon in column headers.
+     * When omitted, the default `GripVertical` icon from lucide-react is used.
+     * Ignored when `hideGripIcon` is `true`.
+     *
+     * @example
+     * gripIcon={<DragHandleIcon className="h-3 w-3" />}
+     */
+    readonly gripIcon?: React$1.ReactNode;
+    /**
+     * 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}
+     */
+    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)
+     */
+    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 });
+     * }}
+     */
+    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 }));
+     * }}
+     */
+    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);
+     * }}
+     */
+    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
+     *   ));
+     * }}
+     */
+    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
+     *   ));
+     * }}
+     */
+    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}`}
+     */
+    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),
+     * }}
+     */
+    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} />,
+     * }}
+     */
+    readonly rowSelection?: RowSelectionConfig<T>;
+    /**
+     * 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();
+     * }}
+     */
+    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}
+     */
+    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}
+     */
+    readonly isLoading?: boolean;
+    /**
+     * Scroll indicator configuration (reserved for future use).
+     * Currently unused but accepted to avoid prop-drilling issues in parent components.
+     */
+    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 });
+     * }}
+     */
+    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 });
+     * }}
+     */
+    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),
+     *   },
+     * ]}
+     */
+    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}
+     */
+    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}
+     */
+    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>
+     * }
+     */
+    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.
+     */
+    header?: string;
+    /** Applied to all body cells (both pinned and non-pinned) */
+    cell?: string;
+    /** Applied to each row's wrapper element (reserved for future use) */
+    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.
+     */
+    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.
+     */
+    pinnedHeader?: string;
+    /**
+     * Applied additionally to pinned column body cells.
+     * Use this to add a border or separator between pinned and scrolling columns.
+     */
+    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.
+     */
+    expandedRow?: 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 */
+    header?: CSSProperties;
+    /** Inline styles for all body cells */
+    cell?: CSSProperties;
+    /** Inline styles for each row wrapper (reserved for future use) */
+    row?: CSSProperties;
+    /**
+     * Inline styles for the drag overlay header shown while dragging a column.
+     * Applied on top of `header` styles.
+     */
+    dragHeader?: CSSProperties;
+    /**
+     * Inline styles for pinned column header cells.
+     * Applied on top of `header` styles.
+     */
+    pinnedHeader?: CSSProperties;
+    /**
+     * Inline styles for pinned column body cells.
+     * Applied on top of `cell` styles.
+     */
+    pinnedCell?: CSSProperties;
+    /** Inline styles for the expanded row content panel */
+    expandedRow?: CSSProperties;
+    /**
+     * CSS color string applied as the background of hovered rows.
+     * Defaults to `hsl(var(--muted) / 0.5)` if omitted.
+     *
+     * @example
+     * rowHover: { backgroundColor: '#f8fafc' }
+     */
+    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' }
+     */
+    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)'
+     */
+    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, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, 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: 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.
+     */
+    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'
+     */
+    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.
+     *
+     * @param columnKey - The key of the column being resized
+     * @param event     - The React mouse event from the resize handle mousedown
+     */
+    onResizeStart?: (columnKey: string, event: React$1.MouseEvent) => void;
+    /**
+     * Shared styling overrides for header cells.
+     * `styles.header` applies to all headers; `styles.pinnedHeader` applies
+     * additionally to pinned column headers.
+     */
+    styles?: StylesTypes;
+    /**
+     * Shared CSS class name overrides for header cells.
+     * `classNames.header` applies to all headers; `classNames.pinnedHeader`
+     * applies additionally to pinned column headers.
+     */
+    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
+     */
+    hideGripIcon?: boolean;
+    /**
+     * A custom React node to use as the drag grip icon.
+     * When omitted, the default `GripVertical` icon from lucide-react is used.
+     *
+     * @example
+     * gripIcon={<MyCustomDragIcon />}
+     */
+    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.
+     */
+    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)
+     */
+    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
+     */
+    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
+     */
+    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.
+     */
+    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)
+     */
+    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 ''
+     */
+    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
+     */
+    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
+     */
+    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),
+     *   }
+     * ]}
+     */
+    customContextMenuItems?: ColumnContextMenuItem[];
+}
+/**
+ * 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, }: 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"
+     */
+    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) */
+    data: DataRecord[];
+    /** The ordered visible columns (left pinned → unpinned → right pinned) */
+    orderedColumns: ColumnType<DataRecord>[];
+    /**
+     * The TanStack Virtual row virtualizer instance.
+     * Provides `getVirtualItems()` and `getTotalSize()` for rendering.
+     */
+    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.
+     */
+    columnOffsets: Map<string, number>;
+    /** Shared style overrides passed down from BoltTable */
+    styles?: StylesTypes;
+    /** Shared class name overrides passed down 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.
+     */
+    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 []
+     */
+    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
+     */
+    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?: ExpandableConfig<DataRecord>;
+    /**
+     * The set of currently expanded row keys.
+     * Used to determine whether to render the expanded content panel for each row.
+     */
+    resolvedExpandedKeys?: Set<React$1.Key>;
+    /**
+     * Height of each regular (non-expanded) row in pixels.
+     * Must match the `rowHeight` prop passed to BoltTable.
+     *
+     * @default 40
+     */
+    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.
+     */
+    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.
+     */
+    scrollAreaWidth?: number;
+    /**
+     * The accent color used for the expand toggle button chevron icon.
+     * Should match the `accentColor` prop on BoltTable.
+     *
+     * @default '#1890ff'
+     */
+    accentColor?: string;
+    /**
+     * Ref to the scroll container element.
+     * Reserved for potential future use (e.g. programmatic scrolling from within TableBody).
+     */
+    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
+     */
+    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)
+     */
+    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}
+     */
+    maxExpandedRowHeight?: 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 ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowSelectionConfig, type SortDirection, TableBody };