bolt-table 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -29,7 +29,9 @@ A high-performance, zero-dependency\* React table component. Only the rows visib
29
29
  - **Cell context menu** — right-click (or long-press on mobile) any cell to pin rows or copy values
30
30
  - **Right-click context menu** — sort, filter, pin, hide, plus custom items
31
31
  - **Mobile-friendly context menus** — long-press (touch-and-hold) triggers context menus on touch devices
32
+ - **Nested / grouped columns** — group related columns under a shared header spanning multiple columns
32
33
  - **Theme-agnostic** — works in light and dark mode out of the box, no CSS variables needed
34
+ - **Editable cells** — right-click any cell on an `editable` column to inline-edit via the context menu
33
35
  - **Custom icons** — override any built-in icon via the `icons` prop
34
36
 
35
37
  ---
@@ -96,7 +98,7 @@ import { BoltTable } from 'bolt-table';
96
98
 
97
99
  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.
98
100
 
99
- 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.
101
+ You can customize everything via the `styles` and `classNames` props, including headers, cells, rows, pinned regions, and pagination. If your project uses Tailwind, you can pass Tailwind classes through `classNames` and they'll be applied on top of the inline defaults.
100
102
 
101
103
  ### Custom icons
102
104
 
@@ -114,7 +116,7 @@ import type { BoltTableIcons } from 'bolt-table';
114
116
  />
115
117
  ```
116
118
 
117
- Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterClear`, `pin`, `pinOff`, `eyeOff`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsLeft`, `chevronsRight`, `copy`.
119
+ Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterClear`, `pin`, `pinOff`, `eyeOff`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsLeft`, `chevronsRight`, `copy`, `edit`.
118
120
 
119
121
  ---
120
122
 
@@ -156,6 +158,12 @@ Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterCle
156
158
  | `autoHeight` | `boolean` | `true` | Auto-size table height to content (capped at 10 rows) |
157
159
  | `layoutLoading` | `boolean` | `false` | Show full skeleton layout (headers + rows) |
158
160
  | `emptyRenderer` | `ReactNode` | — | Custom empty state content |
161
+ | `rowClassName` | `(record, index) => string` | — | Returns a CSS class name for conditional row styling |
162
+ | `rowStyle` | `(record, index) => CSSProperties` | — | Returns inline styles for conditional row styling |
163
+ | `disabledFilters` | `boolean` | `false` | Removes the filter option from all header context menus |
164
+ | `onCopy` | `(text, columnKey, record, rowIndex) => void` | — | Called after a cell value is copied to the clipboard |
165
+ | `keepPinnedRowsAcrossPages` | `boolean` | `false` | Pinned rows remain visible after navigating to a different page |
166
+ | `onEdit` | `(value, record, dataIndex, rowIndex) => void` | — | Called when a user finishes editing an editable cell |
159
167
 
160
168
  ---
161
169
 
@@ -164,7 +172,7 @@ Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterCle
164
172
  | Field | Type | Default | Description |
165
173
  |-------|------|---------|-------------|
166
174
  | `key` | `string` | — | Unique column identifier (required) |
167
- | `dataIndex` | `string` | — | Row object property to display (required) |
175
+ | `dataIndex` | `string` | — | Row object property to display (required for leaf columns, omit for groups) |
168
176
  | `title` | `string \| ReactNode` | — | Header label (required) |
169
177
  | `width` | `number` | `150` | Column width in pixels |
170
178
  | `render` | `(value, record, index) => ReactNode` | — | Custom cell renderer |
@@ -178,6 +186,8 @@ Available icon keys: `gripVertical`, `sortAsc`, `sortDesc`, `filter`, `filterCle
178
186
  | `className` | `string` | — | Class applied to all cells in this column |
179
187
  | `style` | `CSSProperties` | — | Styles applied to all cells in this column |
180
188
  | `copy` | `boolean \| (value, record, index) => string` | — | Enable "Copy" in cell context menu; function customizes what's copied |
189
+ | `editable` | `boolean` | `false` | When `true` and no custom `render` is set, cells become inline-editable on double-click |
190
+ | `children` | `ColumnType<T>[]` | — | Nested child columns. Makes this column a header group — only leaf columns render data |
181
191
 
182
192
  ---
183
193
 
@@ -439,6 +449,49 @@ The cell context menu only appears when there is at least one action available (
439
449
 
440
450
  ---
441
451
 
452
+ ### Editable cells
453
+
454
+ Mark columns as `editable: true` and provide an `onEdit` callback to allow inline editing. Right-click (or long-press on mobile) an editable cell to see the **Edit** option (with a pencil icon) in the context menu. Selecting it turns the cell into an input field. Press **Enter** or click away to commit, **Escape** to cancel.
455
+
456
+ ```tsx
457
+ const [data, setData] = useState<User[]>(initialData);
458
+
459
+ const columns: ColumnType<User>[] = [
460
+ { key: 'name', dataIndex: 'name', title: 'Name', editable: true, width: 200 },
461
+ { key: 'age', dataIndex: 'age', title: 'Age', editable: true, width: 80 },
462
+ {
463
+ key: 'status',
464
+ dataIndex: 'status',
465
+ title: 'Status',
466
+ render: (value) => <span className="badge">{String(value)}</span>,
467
+ editable: true, // ignored — custom render takes precedence
468
+ },
469
+ ];
470
+
471
+ <BoltTable
472
+ columns={columns}
473
+ data={data}
474
+ rowKey="id"
475
+ onEdit={(value, record, dataIndex, rowIndex) => {
476
+ setData(prev =>
477
+ prev.map((row, i) =>
478
+ i === rowIndex ? { ...row, [dataIndex]: value } : row
479
+ )
480
+ );
481
+ }}
482
+ />
483
+ ```
484
+
485
+ The edit icon can be customized via the `icons` prop:
486
+
487
+ ```tsx
488
+ <BoltTable icons={{ edit: <MyPencilIcon size={14} /> }} />
489
+ ```
490
+
491
+ > **Note:** `editable` is skipped for columns that define a custom `render` function — since the cell content is fully controlled by the renderer, inline editing wouldn't know how to display or commit changes. If you need editable custom-rendered cells, handle the editing UX inside your `render` function.
492
+
493
+ ---
494
+
442
495
  ### Styling overrides
443
496
 
444
497
  ```tsx
@@ -463,6 +516,69 @@ The cell context menu only appears when there is at least one action available (
463
516
 
464
517
  ---
465
518
 
519
+ ### Nested / grouped columns
520
+
521
+ Group related columns under a shared header. Parent columns act as header groups — only leaf columns (without `children`) render data cells. Leaf columns within groups support resizing and reordering just like standalone columns.
522
+
523
+ ```tsx
524
+ const columns: ColumnType<User>[] = [
525
+ { key: 'id', dataIndex: 'id', title: 'ID', width: 80 },
526
+ {
527
+ key: 'nameGroup',
528
+ title: 'Name',
529
+ children: [
530
+ { key: 'firstName', dataIndex: 'firstName', title: 'First Name', width: 150 },
531
+ { key: 'lastName', dataIndex: 'lastName', title: 'Last Name', width: 150 },
532
+ ],
533
+ },
534
+ {
535
+ key: 'contactGroup',
536
+ title: 'Contact Info',
537
+ children: [
538
+ { key: 'email', dataIndex: 'email', title: 'Email', width: 250 },
539
+ { key: 'phone', dataIndex: 'phone', title: 'Phone', width: 150 },
540
+ ],
541
+ },
542
+ { key: 'age', dataIndex: 'age', title: 'Age', width: 80 },
543
+ ];
544
+
545
+ <BoltTable columns={columns} data={data} rowKey="id" />
546
+ ```
547
+
548
+ The header renders two rows: group headers span their children columns in the top row, and leaf column headers appear in the bottom row. Standalone columns (not in any group) span both header rows.
549
+
550
+ ---
551
+
552
+ ### Pagination styles
553
+
554
+ Customize every part of the pagination footer via `styles` and `classNames`:
555
+
556
+ ```tsx
557
+ <BoltTable
558
+ columns={columns}
559
+ data={data}
560
+ pagination={{ pageSize: 20 }}
561
+ classNames={{
562
+ pagination: 'bg-gray-50 border-t border-gray-200',
563
+ paginationButton: 'rounded hover:bg-gray-200',
564
+ paginationActiveButton: 'font-bold text-blue-600',
565
+ paginationSelect: 'rounded border-gray-300',
566
+ paginationInfo: 'text-gray-500 text-xs',
567
+ }}
568
+ styles={{
569
+ pagination: { height: 40 },
570
+ paginationButton: { borderRadius: 4 },
571
+ paginationActiveButton: { fontWeight: 700 },
572
+ paginationSelect: { borderRadius: 4 },
573
+ paginationInfo: { fontSize: 11 },
574
+ }}
575
+ />
576
+ ```
577
+
578
+ Available pagination style/class keys: `pagination` (wrapper), `paginationButton` (nav buttons), `paginationActiveButton` (active page), `paginationSelect` (page-size dropdown), `paginationInfo` (range text).
579
+
580
+ ---
581
+
466
582
  ### Fixed height (fill parent)
467
583
 
468
584
  By default, BoltTable auto-sizes to its content. To fill a fixed-height container instead:
package/dist/index.d.mts CHANGED
@@ -18,6 +18,7 @@ interface BoltTableIcons {
18
18
  chevronsLeft?: React$1.ReactNode;
19
19
  chevronsRight?: React$1.ReactNode;
20
20
  copy?: React$1.ReactNode;
21
+ edit?: React$1.ReactNode;
21
22
  }
22
23
 
23
24
  /** `'asc'` | `'desc'` | `null` — the direction of a column sort. */
@@ -26,8 +27,8 @@ type SortDirection = 'asc' | 'desc' | null;
26
27
  interface ColumnType<T = unknown> {
27
28
  /** The text or React node shown in the column header. */
28
29
  title: string | ReactNode;
29
- /** The key in the row data object whose value this column displays. */
30
- dataIndex: string;
30
+ /** The key in the row data object whose value this column displays. Required for leaf columns; omit for group columns with `children`. */
31
+ dataIndex?: string;
31
32
  /** Fixed pixel width of this column. Defaults to `150px`; last column stretches to fill. */
32
33
  width?: number;
33
34
  /** Unique identifier for this column, used for ordering, pinning, hiding, and sorting. */
@@ -71,6 +72,10 @@ interface ColumnType<T = unknown> {
71
72
  columnHeaderContextMenuItems?: ColumnContextMenuItem[];
72
73
  /** Custom context menu items appended to every cell's right-click menu in this column. */
73
74
  columnCellContextMenuItems?: CellContextMenuItem<T>[];
75
+ /** When `true`, cells without a custom `render` become inline-editable on double-click. Requires the table-level `onEdit` callback. */
76
+ editable?: boolean;
77
+ /** Nested child columns. When provided, this column acts as a header group and does not render data cells. Only leaf columns (without `children`) render cells. */
78
+ children?: ColumnType<T>[];
74
79
  }
75
80
  /** A single item in the cell right-click context menu (column-level). */
76
81
  interface CellContextMenuItem<T = unknown> {
@@ -242,6 +247,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
242
247
  readonly onCopy?: (text: string, columnKey: string, record: T, rowIndex: number) => void;
243
248
  /** When true, pinned rows remain visible even after navigating to a different page. */
244
249
  readonly keepPinnedRowsAcrossPages?: boolean;
250
+ /** Called when a user finishes editing an editable cell. Receives the new value, the row record, the column's `dataIndex`, and the row index. */
251
+ readonly onEdit?: (value: unknown, record: T, dataIndex: string, rowIndex: number) => void;
252
+ /** Called when a row is clicked. When provided, all row cells show a pointer cursor on hover. */
253
+ readonly onRowClick?: (record: T, index: number, event: React$1.MouseEvent) => void;
245
254
  }
246
255
  interface ClassNamesTypes {
247
256
  /** Applied to all non-pinned column header cells. */
@@ -260,6 +269,16 @@ interface ClassNamesTypes {
260
269
  expandedRow?: string;
261
270
  /** Applied to each pinned row's wrapper div. */
262
271
  pinnedRow?: string;
272
+ /** Applied to the pagination footer wrapper. */
273
+ pagination?: string;
274
+ /** Applied to all pagination navigation buttons (first, prev, next, last). */
275
+ paginationButton?: string;
276
+ /** Applied additionally to the active page number button. */
277
+ paginationActiveButton?: string;
278
+ /** Applied to the page-size select dropdown. */
279
+ paginationSelect?: string;
280
+ /** Applied to the "X–Y of Z" info text. */
281
+ paginationInfo?: string;
263
282
  }
264
283
  interface StylesTypes {
265
284
  /** Inline styles for all non-pinned column header cells. */
@@ -288,8 +307,18 @@ interface StylesTypes {
288
307
  pinnedBg?: string;
289
308
  /** Inline styles applied to built-in context menu items (sort, filter, pin, copy, etc.). */
290
309
  contextMenuItem?: CSSProperties;
310
+ /** Inline styles for the pagination footer wrapper. */
311
+ pagination?: CSSProperties;
312
+ /** Inline styles for all pagination navigation buttons (first, prev, next, last). */
313
+ paginationButton?: CSSProperties;
314
+ /** Inline styles for the active page number button. */
315
+ paginationActiveButton?: CSSProperties;
316
+ /** Inline styles for the page-size select dropdown. */
317
+ paginationSelect?: CSSProperties;
318
+ /** Inline styles for the "X–Y of Z" info text. */
319
+ paginationInfo?: CSSProperties;
291
320
  }
292
- declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
321
+ declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
293
322
 
294
323
  interface DraggableHeaderProps {
295
324
  /** Column definition for this header cell. */
@@ -334,8 +363,16 @@ interface DraggableHeaderProps {
334
363
  icons?: BoltTableIcons;
335
364
  /** When true, hides the filter option from the context menu. */
336
365
  disabledFilters?: boolean;
366
+ /** CSS grid row placement for this header cell. Defaults to 1. */
367
+ headerGridRow?: number | string;
368
+ /** Height of this header cell in pixels. Defaults to 36. */
369
+ headerHeight?: number;
370
+ /** Sticky top offset in pixels. Defaults to 0. */
371
+ stickyTop?: number;
372
+ /** When true, removes the left border (for the first visible column). */
373
+ isFirstColumn?: boolean;
337
374
  }
338
- 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, disabledFilters, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
375
+ 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, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
339
376
 
340
377
  interface ResizeOverlayHandle {
341
378
  show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
@@ -401,6 +438,17 @@ interface TableBodyProps {
401
438
  rowClassName?: (record: DataRecord, index: number) => string;
402
439
  /** Returns inline CSS styles for a given row based on its record and index */
403
440
  rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
441
+ /** CSS grid row index for the body area. Defaults to 2. Set to 3 when column groups add an extra header row. */
442
+ bodyGridRow?: number;
443
+ /** Called when a user finishes editing an editable cell. */
444
+ onEdit?: (value: unknown, record: DataRecord, dataIndex: string, rowIndex: number) => void;
445
+ /** Identifies the cell currently in edit mode (set from the context menu). */
446
+ editingCell?: {
447
+ rowKey: string;
448
+ columnKey: string;
449
+ } | null;
450
+ /** Called when the editing input commits or cancels — clears `editingCell`. */
451
+ onEditComplete?: () => void;
404
452
  }
405
453
  declare const TableBody: React$1.FC<TableBodyProps>;
406
454
 
package/dist/index.d.ts CHANGED
@@ -18,6 +18,7 @@ interface BoltTableIcons {
18
18
  chevronsLeft?: React$1.ReactNode;
19
19
  chevronsRight?: React$1.ReactNode;
20
20
  copy?: React$1.ReactNode;
21
+ edit?: React$1.ReactNode;
21
22
  }
22
23
 
23
24
  /** `'asc'` | `'desc'` | `null` — the direction of a column sort. */
@@ -26,8 +27,8 @@ type SortDirection = 'asc' | 'desc' | null;
26
27
  interface ColumnType<T = unknown> {
27
28
  /** The text or React node shown in the column header. */
28
29
  title: string | ReactNode;
29
- /** The key in the row data object whose value this column displays. */
30
- dataIndex: string;
30
+ /** The key in the row data object whose value this column displays. Required for leaf columns; omit for group columns with `children`. */
31
+ dataIndex?: string;
31
32
  /** Fixed pixel width of this column. Defaults to `150px`; last column stretches to fill. */
32
33
  width?: number;
33
34
  /** Unique identifier for this column, used for ordering, pinning, hiding, and sorting. */
@@ -71,6 +72,10 @@ interface ColumnType<T = unknown> {
71
72
  columnHeaderContextMenuItems?: ColumnContextMenuItem[];
72
73
  /** Custom context menu items appended to every cell's right-click menu in this column. */
73
74
  columnCellContextMenuItems?: CellContextMenuItem<T>[];
75
+ /** When `true`, cells without a custom `render` become inline-editable on double-click. Requires the table-level `onEdit` callback. */
76
+ editable?: boolean;
77
+ /** Nested child columns. When provided, this column acts as a header group and does not render data cells. Only leaf columns (without `children`) render cells. */
78
+ children?: ColumnType<T>[];
74
79
  }
75
80
  /** A single item in the cell right-click context menu (column-level). */
76
81
  interface CellContextMenuItem<T = unknown> {
@@ -242,6 +247,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
242
247
  readonly onCopy?: (text: string, columnKey: string, record: T, rowIndex: number) => void;
243
248
  /** When true, pinned rows remain visible even after navigating to a different page. */
244
249
  readonly keepPinnedRowsAcrossPages?: boolean;
250
+ /** Called when a user finishes editing an editable cell. Receives the new value, the row record, the column's `dataIndex`, and the row index. */
251
+ readonly onEdit?: (value: unknown, record: T, dataIndex: string, rowIndex: number) => void;
252
+ /** Called when a row is clicked. When provided, all row cells show a pointer cursor on hover. */
253
+ readonly onRowClick?: (record: T, index: number, event: React$1.MouseEvent) => void;
245
254
  }
246
255
  interface ClassNamesTypes {
247
256
  /** Applied to all non-pinned column header cells. */
@@ -260,6 +269,16 @@ interface ClassNamesTypes {
260
269
  expandedRow?: string;
261
270
  /** Applied to each pinned row's wrapper div. */
262
271
  pinnedRow?: string;
272
+ /** Applied to the pagination footer wrapper. */
273
+ pagination?: string;
274
+ /** Applied to all pagination navigation buttons (first, prev, next, last). */
275
+ paginationButton?: string;
276
+ /** Applied additionally to the active page number button. */
277
+ paginationActiveButton?: string;
278
+ /** Applied to the page-size select dropdown. */
279
+ paginationSelect?: string;
280
+ /** Applied to the "X–Y of Z" info text. */
281
+ paginationInfo?: string;
263
282
  }
264
283
  interface StylesTypes {
265
284
  /** Inline styles for all non-pinned column header cells. */
@@ -288,8 +307,18 @@ interface StylesTypes {
288
307
  pinnedBg?: string;
289
308
  /** Inline styles applied to built-in context menu items (sort, filter, pin, copy, etc.). */
290
309
  contextMenuItem?: CSSProperties;
310
+ /** Inline styles for the pagination footer wrapper. */
311
+ pagination?: CSSProperties;
312
+ /** Inline styles for all pagination navigation buttons (first, prev, next, last). */
313
+ paginationButton?: CSSProperties;
314
+ /** Inline styles for the active page number button. */
315
+ paginationActiveButton?: CSSProperties;
316
+ /** Inline styles for the page-size select dropdown. */
317
+ paginationSelect?: CSSProperties;
318
+ /** Inline styles for the "X–Y of Z" info text. */
319
+ paginationInfo?: CSSProperties;
291
320
  }
292
- declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
321
+ declare function BoltTable<T extends DataRecord = DataRecord>({ columns: rawInitialColumns, data: rawData, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, disabledFilters, onCopy, keepPinnedRowsAcrossPages, onEdit, onRowClick, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
293
322
 
294
323
  interface DraggableHeaderProps {
295
324
  /** Column definition for this header cell. */
@@ -334,8 +363,16 @@ interface DraggableHeaderProps {
334
363
  icons?: BoltTableIcons;
335
364
  /** When true, hides the filter option from the context menu. */
336
365
  disabledFilters?: boolean;
366
+ /** CSS grid row placement for this header cell. Defaults to 1. */
367
+ headerGridRow?: number | string;
368
+ /** Height of this header cell in pixels. Defaults to 36. */
369
+ headerHeight?: number;
370
+ /** Sticky top offset in pixels. Defaults to 0. */
371
+ stickyTop?: number;
372
+ /** When true, removes the left border (for the first visible column). */
373
+ isFirstColumn?: boolean;
337
374
  }
338
- 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, disabledFilters, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
375
+ 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, disabledFilters, headerGridRow, headerHeight, stickyTop, isFirstColumn, }: DraggableHeaderProps) => react_jsx_runtime.JSX.Element>;
339
376
 
340
377
  interface ResizeOverlayHandle {
341
378
  show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
@@ -401,6 +438,17 @@ interface TableBodyProps {
401
438
  rowClassName?: (record: DataRecord, index: number) => string;
402
439
  /** Returns inline CSS styles for a given row based on its record and index */
403
440
  rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
441
+ /** CSS grid row index for the body area. Defaults to 2. Set to 3 when column groups add an extra header row. */
442
+ bodyGridRow?: number;
443
+ /** Called when a user finishes editing an editable cell. */
444
+ onEdit?: (value: unknown, record: DataRecord, dataIndex: string, rowIndex: number) => void;
445
+ /** Identifies the cell currently in edit mode (set from the context menu). */
446
+ editingCell?: {
447
+ rowKey: string;
448
+ columnKey: string;
449
+ } | null;
450
+ /** Called when the editing input commits or cancels — clears `editingCell`. */
451
+ onEditComplete?: () => void;
404
452
  }
405
453
  declare const TableBody: React$1.FC<TableBodyProps>;
406
454