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 +119 -3
- package/dist/index.d.mts +52 -4
- package/dist/index.d.ts +52 -4
- package/dist/index.js +511 -172
- package/dist/index.mjs +538 -199
- package/package.json +1 -1
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
|
|
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
|
|
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
|
|