bolt-table 0.1.0 → 0.1.2

package/README.md

@@ -1,16 +1,18 @@
-# @venkateshsirigineedi/bolt-table
+# bolt-table
 
-A high-performance, fully-featured React table component built on [TanStack Virtual](https://tanstack.com/virtual) and [@dnd-kit](https://dndkit.com). Only the rows visible in the viewport are ever in the DOM — making it fast for datasets of any size.
+A high-performance, zero-dependency\* React table component built on [TanStack Virtual](https://tanstack.com/virtual). Only the rows visible in the viewport are ever in the DOM — making it fast for datasets of any size.
 
-[![npm version](https://img.shields.io/npm/v/@venkateshsirigineedi/bolt-table)](https://www.npmjs.com/package/@venkateshsirigineedi/bolt-table)
-[![license](https://img.shields.io/npm/l/@venkateshsirigineedi/bolt-table)](./LICENSE)
+\*Only peer dependency is `@tanstack/react-virtual` (+ React). No Tailwind, no CSS framework, no icon library required.
+
+[![npm version](https://img.shields.io/npm/v/bolt-table)](https://www.npmjs.com/package/bolt-table)
+[![license](https://img.shields.io/npm/l/bolt-table)](./LICENSE)
 
 ---
 
 ## Features
 
 - **Row virtualization** — only visible rows are rendered, powered by TanStack Virtual
-- **Drag to reorder columns** — grab any header and drag it to a new position
+- **Drag to reorder columns** — custom zero-dependency drag-and-drop (no @dnd-kit needed)
 - **Column pinning** — pin columns to the left or right edge via right-click
 - **Column resizing** — drag the right edge of any header to resize
 - **Column hiding** — hide/show columns via the right-click context menu
@@ -24,30 +26,25 @@ A high-performance, fully-featured React table component built on [TanStack Virt
 - **Empty state** — custom renderer or default "No data" message
 - **Auto height** — table shrinks/grows to fit rows, capped at 10 rows by default
 - **Right-click context menu** — sort, filter, pin, hide, plus custom items
-- **Dark mode** — works out of the box with CSS variables
+- **Theme-agnostic** — works in light and dark mode out of the box, no CSS variables needed
+- **Custom icons** — override any built-in icon via the `icons` prop
 
 ---
 
 ## Installation
 
 ```bash
-npm install @venkateshsirigineedi/bolt-table
+npm install bolt-table @tanstack/react-virtual
 ```
 
-### Peer dependencies
-
-These must be installed separately in your project:
-
-```bash
-npm install @tanstack/react-virtual @dnd-kit/core @dnd-kit/sortable lucide-react
-```
+That's it. No other peer dependencies.
 
 ---
 
 ## Quick start
 
 ```tsx
-import { BoltTable, ColumnType } from '@venkateshsirigineedi/bolt-table';
+import { BoltTable, ColumnType } from 'bolt-table';
 
 interface User {
   id: string;
@@ -83,20 +80,38 @@ export default function App() {
 
 ## Next.js (App Router)
 
-BoltTable uses browser APIs and must be wrapped in a client boundary. Remove the `'use client'` directive from the component files and wrap usage instead:
+BoltTable uses browser APIs and must be wrapped in a client boundary:
 
 ```tsx
 'use client';
-import { BoltTable } from '@venkateshsirigineedi/bolt-table';
+import { BoltTable } from 'bolt-table';
 ```
 
 ---
 
 ## Styling
 
-BoltTable uses [Tailwind CSS](https://tailwindcss.com) utility classes and [Shadcn/ui](https://ui.shadcn.com) CSS variables (`--muted`, `--background`, `--border`, etc.).
+BoltTable uses **inline CSS styles** for all defaults — no Tailwind, no CSS variables, no external stylesheets required. It works out of the box in any React project, light or dark mode.
+
+You can customize everything via the `styles` and `classNames` props. If your project uses Tailwind, you can pass Tailwind classes through `classNames` and they'll be applied on top of the inline defaults.
+
+### Custom icons
+
+All built-in icons are inline SVGs. Override any icon via the `icons` prop:
+
+```tsx
+import type { BoltTableIcons } from 'bolt-table';
+
+<BoltTable
+  icons={{
+    gripVertical: <MyGripIcon size={12} />,
+    sortAsc: <MySortUpIcon size={12} />,
+    chevronsLeft: <MyFirstPageIcon size={12} />,
+  }}
+/>
+```
 
-Make sure your project has Tailwind configured and the Shadcn CSS variables defined in your global stylesheet. If you use a different design system, you can override styles via the `styles` and `classNames` props.
+Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterClear`, `pin`, `pinOff`, `eyeOff`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsLeft`, `chevronsRight`.
 
 ---
 
@@ -116,7 +131,8 @@ Make sure your project has Tailwind configured and the Shadcn CSS variables defi
 | `className` | `string` | `''` | Class name for the outer wrapper |
 | `classNames` | `ClassNamesTypes` | `{}` | Granular class overrides per table region |
 | `styles` | `StylesTypes` | `{}` | Inline style overrides per table region |
-| `gripIcon` | `ReactNode` | — | Custom drag grip icon (defaults to `GripVertical`) |
+| `icons` | `BoltTableIcons` | — | Custom icon overrides for built-in SVG icons |
+| `gripIcon` | `ReactNode` | — | Custom drag grip icon (deprecated, use `icons.gripVertical`) |
 | `hideGripIcon` | `boolean` | `false` | Hide the drag grip icon from all headers |
 | `pagination` | `PaginationType \| false` | — | Pagination config, or `false` to disable |
 | `onPaginationChange` | `(page, pageSize) => void` | — | Called when page or page size changes |
@@ -172,7 +188,6 @@ const columns: ColumnType<User>[] = [
     dataIndex: 'name',
     title: 'Name',
     sortable: true,
-    // Optional custom comparator:
     sorter: (a, b) => a.name.localeCompare(b.name),
   },
   {
@@ -180,7 +195,6 @@ const columns: ColumnType<User>[] = [
     dataIndex: 'age',
     title: 'Age',
     sortable: true,
-    // Default numeric comparator used when sorter is omitted
   },
 ];
 
@@ -217,7 +231,6 @@ const columns: ColumnType<User>[] = [
     dataIndex: 'status',
     title: 'Status',
     filterable: true,
-    // Exact match instead of default substring:
     filterFn: (value, record) => record.status === value,
   },
 ];
@@ -245,11 +258,9 @@ const columns: ColumnType<User>[] = [
 ```tsx
 <BoltTable
   columns={columns}
-  data={allUsers}          // all 500 rows
+  data={allUsers}
   pagination={{ pageSize: 20 }}
-  onPaginationChange={(page, size) => {
-    setPage(page);
-  }}
+  onPaginationChange={(page, size) => setPage(page)}
 />
 ```
 
@@ -258,7 +269,7 @@ const columns: ColumnType<User>[] = [
 ```tsx
 <BoltTable
   columns={columns}
-  data={currentPageData}   // only 20 rows
+  data={currentPageData}
   pagination={{
     current: page,
     pageSize: 20,
@@ -287,10 +298,9 @@ const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   data={data}
   rowKey="id"
   rowSelection={{
-    type: 'checkbox',           // or 'radio'
+    type: 'checkbox',
     selectedRowKeys,
     onChange: (keys, rows) => setSelectedRowKeys(keys),
-    // Disable selection for specific rows:
     getCheckboxProps: (record) => ({
       disabled: record.status === 'locked',
     }),
@@ -315,12 +325,9 @@ const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
         <pre>{JSON.stringify(record.details, null, 2)}</pre>
       </div>
     ),
-    // Optional: control expanded state yourself
-    // expandedRowKeys={expandedKeys}
-    // onExpandedRowsChange={(keys) => setExpandedKeys(keys)}
   }}
-  expandedRowHeight={150}      // initial estimate
-  maxExpandedRowHeight={400}   // makes panel scrollable if taller
+  expandedRowHeight={150}
+  maxExpandedRowHeight={400}
 />
 ```
 
@@ -353,8 +360,6 @@ const loadMore = async () => {
 
 ### Column pinning
 
-Pinning via column definition:
-
 ```tsx
 const columns: ColumnType<User>[] = [
   { key: 'name',    dataIndex: 'name',    title: 'Name',    pinned: 'left',  width: 200 },
@@ -367,58 +372,6 @@ Users can also pin/unpin columns at runtime via the right-click context menu.
 
 ---
 
-### Custom cell rendering
-
-```tsx
-const columns: ColumnType<User>[] = [
-  {
-    key: 'status',
-    dataIndex: 'status',
-    title: 'Status',
-    width: 120,
-    render: (value, record) => (
-      <span
-        style={{
-          padding: '2px 8px',
-          borderRadius: 4,
-          fontSize: 12,
-          backgroundColor: record.status === 'active' ? '#d1fae5' : '#fee2e2',
-          color: record.status === 'active' ? '#065f46' : '#991b1b',
-        }}
-      >
-        {String(value)}
-      </span>
-    ),
-  },
-];
-```
-
----
-
-### Custom context menu items
-
-```tsx
-<BoltTable
-  columns={columns}
-  data={data}
-  columnContextMenuItems={[
-    {
-      key: 'copy',
-      label: 'Copy column data',
-      icon: <CopyIcon className="h-3 w-3" />,
-      onClick: (columnKey) => copyColumnToClipboard(columnKey),
-    },
-    {
-      key: 'reset-width',
-      label: 'Reset width',
-      onClick: (columnKey) => resetColumnWidth(columnKey),
-    },
-  ]}
-/>
-```
-
----
-
 ### Styling overrides
 
 ```tsx
@@ -443,27 +396,6 @@ const columns: ColumnType<User>[] = [
 
 ---
 
-### Loading skeleton
-
-```tsx
-// Full skeleton on initial load (no data yet)
-<BoltTable
-  columns={columns}
-  data={[]}
-  isLoading={true}
-  pagination={{ pageSize: 20 }}
-/>
-
-// Layout skeleton before column widths are known
-<BoltTable
-  columns={columns}
-  data={[]}
-  layoutLoading={true}
-/>
-```
-
----
-
 ### Fixed height (fill parent)
 
 By default, BoltTable auto-sizes to its content. To fill a fixed-height container instead:
@@ -491,11 +423,12 @@ import type {
   PaginationType,
   SortDirection,
   DataRecord,
-} from '@venkateshsirigineedi/bolt-table';
+  BoltTableIcons,
+} from 'bolt-table';
 ```
 
 ---
 
 ## License
 
-MIT © [Venkatesh Sirigineedi](https://github.com/venkateshsirigineedi)
+MIT © [Venkatesh Sirigineedi](https://github.com/venkateshsirigineedi)

package/dist/index.d.mts

@@ -2,6 +2,35 @@ 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} />,
+ *   }}
+ * />
+ */
+interface BoltTableIcons {
+    gripVertical?: React$1.ReactNode;
+    sortAsc?: React$1.ReactNode;
+    sortDesc?: React$1.ReactNode;
+    filter?: React$1.ReactNode;
+    filterClear?: React$1.ReactNode;
+    pin?: React$1.ReactNode;
+    pinOff?: React$1.ReactNode;
+    eyeOff?: React$1.ReactNode;
+    chevronDown?: React$1.ReactNode;
+    chevronLeft?: React$1.ReactNode;
+    chevronRight?: React$1.ReactNode;
+    chevronsLeft?: React$1.ReactNode;
+    chevronsRight?: React$1.ReactNode;
+}
+
 /**
  * The direction of a column sort.
  *
@@ -249,7 +278,7 @@ interface ColumnContextMenuItem {
     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).
+     * Recommended size: 12–14px .
      *
      * @example
      * icon: <CopyIcon className="h-3 w-3" />
@@ -709,13 +738,28 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     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.
+     * 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 className="h-3 w-3" />}
+     * gripIcon={<DragHandleIcon style={{ width: 12, height: 12 }} />}
      */
     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} />,
+     * }}
+     */
+    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.
@@ -1166,7 +1210,7 @@ interface StylesTypes {
  *   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;
+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, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the DraggableHeader component.
@@ -1194,11 +1238,13 @@ interface DraggableHeaderProps {
     /**
      * 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;
+    /**
+     * Called when the user starts dragging this column header to reorder.
+     * BoltTable handles the full drag lifecycle from this point.
+     */
+    onColumnDragStart?: (columnKey: string, event: React$1.PointerEvent) => void;
     /**
      * Shared styling overrides for header cells.
      * `styles.header` applies to all headers; `styles.pinnedHeader` applies
@@ -1220,7 +1266,7 @@ interface DraggableHeaderProps {
     hideGripIcon?: boolean;
     /**
      * A custom React node to use as the drag grip icon.
-     * When omitted, the default `GripVertical` icon from lucide-react is used.
+     * When omitted, the default `GripVertical` icon is used.
      *
      * @example
      * gripIcon={<MyCustomDragIcon />}
@@ -1307,6 +1353,11 @@ interface DraggableHeaderProps {
      * ]}
      */
     customContextMenuItems?: ColumnContextMenuItem[];
+    /**
+     * Custom icon overrides from BoltTable's `icons` prop.
+     * Passed through automatically — do not set manually.
+     */
+    icons?: BoltTableIcons;
 }
 /**
  * DraggableHeader — a single column header cell for BoltTable.
@@ -1326,7 +1377,7 @@ interface DraggableHeaderProps {
  *
  * @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>;
+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`.
@@ -1539,4 +1590,4 @@ interface TableBodyProps {
  */
 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 };
+export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowSelectionConfig, type SortDirection, TableBody };

package/dist/index.d.ts

@@ -2,6 +2,35 @@ 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} />,
+ *   }}
+ * />
+ */
+interface BoltTableIcons {
+    gripVertical?: React$1.ReactNode;
+    sortAsc?: React$1.ReactNode;
+    sortDesc?: React$1.ReactNode;
+    filter?: React$1.ReactNode;
+    filterClear?: React$1.ReactNode;
+    pin?: React$1.ReactNode;
+    pinOff?: React$1.ReactNode;
+    eyeOff?: React$1.ReactNode;
+    chevronDown?: React$1.ReactNode;
+    chevronLeft?: React$1.ReactNode;
+    chevronRight?: React$1.ReactNode;
+    chevronsLeft?: React$1.ReactNode;
+    chevronsRight?: React$1.ReactNode;
+}
+
 /**
  * The direction of a column sort.
  *
@@ -249,7 +278,7 @@ interface ColumnContextMenuItem {
     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).
+     * Recommended size: 12–14px .
      *
      * @example
      * icon: <CopyIcon className="h-3 w-3" />
@@ -709,13 +738,28 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     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.
+     * 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 className="h-3 w-3" />}
+     * gripIcon={<DragHandleIcon style={{ width: 12, height: 12 }} />}
      */
     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} />,
+     * }}
+     */
+    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.
@@ -1166,7 +1210,7 @@ interface StylesTypes {
  *   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;
+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, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the DraggableHeader component.
@@ -1194,11 +1238,13 @@ interface DraggableHeaderProps {
     /**
      * 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;
+    /**
+     * Called when the user starts dragging this column header to reorder.
+     * BoltTable handles the full drag lifecycle from this point.
+     */
+    onColumnDragStart?: (columnKey: string, event: React$1.PointerEvent) => void;
     /**
      * Shared styling overrides for header cells.
      * `styles.header` applies to all headers; `styles.pinnedHeader` applies
@@ -1220,7 +1266,7 @@ interface DraggableHeaderProps {
     hideGripIcon?: boolean;
     /**
      * A custom React node to use as the drag grip icon.
-     * When omitted, the default `GripVertical` icon from lucide-react is used.
+     * When omitted, the default `GripVertical` icon is used.
      *
      * @example
      * gripIcon={<MyCustomDragIcon />}
@@ -1307,6 +1353,11 @@ interface DraggableHeaderProps {
      * ]}
      */
     customContextMenuItems?: ColumnContextMenuItem[];
+    /**
+     * Custom icon overrides from BoltTable's `icons` prop.
+     * Passed through automatically — do not set manually.
+     */
+    icons?: BoltTableIcons;
 }
 /**
  * DraggableHeader — a single column header cell for BoltTable.
@@ -1326,7 +1377,7 @@ interface DraggableHeaderProps {
  *
  * @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>;
+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`.
@@ -1539,4 +1590,4 @@ interface TableBodyProps {
  */
 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 };
+export { BoltTable, type BoltTableIcons, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowSelectionConfig, type SortDirection, TableBody };