bolt-table 0.1.0 → 0.1.1

package/README.md

@@ -1,9 +1,9 @@
-# @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.
 
-[![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)
+[![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)
 
 ---
 
@@ -31,7 +31,7 @@ A high-performance, fully-featured React table component built on [TanStack Virt
 ## Installation
 
 ```bash
-npm install @venkateshsirigineedi/bolt-table
+npm install bolt-table
 ```
 
 ### Peer dependencies
@@ -47,7 +47,7 @@ npm install @tanstack/react-virtual @dnd-kit/core @dnd-kit/sortable lucide-react
 ## Quick start
 
 ```tsx
-import { BoltTable, ColumnType } from '@venkateshsirigineedi/bolt-table';
+import { BoltTable, ColumnType } from 'bolt-table';
 
 interface User {
   id: string;
@@ -87,7 +87,7 @@ BoltTable uses browser APIs and must be wrapped in a client boundary. Remove the
 
 ```tsx
 'use client';
-import { BoltTable } from '@venkateshsirigineedi/bolt-table';
+import { BoltTable } from 'bolt-table';
 ```
 
 ---
@@ -491,11 +491,11 @@ import type {
   PaginationType,
   SortDirection,
   DataRecord,
-} from '@venkateshsirigineedi/bolt-table';
+} from 'bolt-table';
 ```
 
 ---
 
 ## License
 
-MIT © [Venkatesh Sirigineedi](https://github.com/venkateshsirigineedi)
+MIT © [Venkatesh Sirigineedi](https://github.com

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.
  *
@@ -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.
@@ -1307,6 +1351,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 +1375,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, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
 
 /**
  * The imperative handle exposed by ResizeOverlay via `ref`.
@@ -1539,4 +1588,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.
  *
@@ -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.
@@ -1307,6 +1351,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 +1375,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, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
 
 /**
  * The imperative handle exposed by ResizeOverlay via `ref`.
@@ -1539,4 +1588,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 };