bolt-table 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # 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. Only the rows visible in the viewport are ever in the DOM — making it fast for datasets of any size uisng [TanStack Virtual](https://tanstack.com/virtual).
 
 [![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)
@@ -10,7 +10,7 @@ A high-performance, fully-featured React table component built on [TanStack Virt
 ## 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,23 +24,18 @@ 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 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.
 
 ---
 
@@ -83,7 +78,7 @@ 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';
@@ -94,9 +89,27 @@ 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 +129,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 +186,6 @@ const columns: ColumnType<User>[] = [
     dataIndex: 'name',
     title: 'Name',
     sortable: true,
-    // Optional custom comparator:
     sorter: (a, b) => a.name.localeCompare(b.name),
   },
   {
@@ -180,7 +193,6 @@ const columns: ColumnType<User>[] = [
     dataIndex: 'age',
     title: 'Age',
     sortable: true,
-    // Default numeric comparator used when sorter is omitted
   },
 ];
 
@@ -217,7 +229,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 +256,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 +267,7 @@ const columns: ColumnType<User>[] = [
 ```tsx
 <BoltTable
   columns={columns}
-  data={currentPageData}   // only 20 rows
+  data={currentPageData}
   pagination={{
     current: page,
     pageSize: 20,
@@ -287,10 +296,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 +323,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 +358,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 +370,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 +394,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,6 +421,7 @@ import type {
   PaginationType,
   SortDirection,
   DataRecord,
+  BoltTableIcons,
 } from 'bolt-table';
 ```
 
@@ -498,4 +429,4 @@ import type {
 
 ## License
 
-MIT © [Venkatesh Sirigineedi](https://github.com
+MIT © [Venkatesh Sirigineedi](https://github.com/venkateshsirigineedi)

package/dist/index.d.mts

@@ -278,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" />
@@ -1238,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
@@ -1264,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 />}
@@ -1375,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, icons, }: 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`.

package/dist/index.d.ts

@@ -278,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" />
@@ -1238,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
@@ -1264,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 />}
@@ -1375,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, icons, }: 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`.