bolt-table 0.1.24 → 0.1.26
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/dist/index.d.mts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +189 -128
- package/dist/index.mjs +189 -128
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -249,6 +249,8 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
|
|
|
249
249
|
readonly keepPinnedRowsAcrossPages?: boolean;
|
|
250
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
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;
|
|
252
254
|
}
|
|
253
255
|
interface ClassNamesTypes {
|
|
254
256
|
/** Applied to all non-pinned column header cells. */
|
|
@@ -316,7 +318,7 @@ interface StylesTypes {
|
|
|
316
318
|
/** Inline styles for the "X–Y of Z" info text. */
|
|
317
319
|
paginationInfo?: CSSProperties;
|
|
318
320
|
}
|
|
319
|
-
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, }: 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;
|
|
320
322
|
|
|
321
323
|
interface DraggableHeaderProps {
|
|
322
324
|
/** Column definition for this header cell. */
|
|
@@ -367,8 +369,10 @@ interface DraggableHeaderProps {
|
|
|
367
369
|
headerHeight?: number;
|
|
368
370
|
/** Sticky top offset in pixels. Defaults to 0. */
|
|
369
371
|
stickyTop?: number;
|
|
372
|
+
/** When true, removes the left border (for the first visible column). */
|
|
373
|
+
isFirstColumn?: boolean;
|
|
370
374
|
}
|
|
371
|
-
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, }: 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>;
|
|
372
376
|
|
|
373
377
|
interface ResizeOverlayHandle {
|
|
374
378
|
show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -249,6 +249,8 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
|
|
|
249
249
|
readonly keepPinnedRowsAcrossPages?: boolean;
|
|
250
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
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;
|
|
252
254
|
}
|
|
253
255
|
interface ClassNamesTypes {
|
|
254
256
|
/** Applied to all non-pinned column header cells. */
|
|
@@ -316,7 +318,7 @@ interface StylesTypes {
|
|
|
316
318
|
/** Inline styles for the "X–Y of Z" info text. */
|
|
317
319
|
paginationInfo?: CSSProperties;
|
|
318
320
|
}
|
|
319
|
-
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, }: 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;
|
|
320
322
|
|
|
321
323
|
interface DraggableHeaderProps {
|
|
322
324
|
/** Column definition for this header cell. */
|
|
@@ -367,8 +369,10 @@ interface DraggableHeaderProps {
|
|
|
367
369
|
headerHeight?: number;
|
|
368
370
|
/** Sticky top offset in pixels. Defaults to 0. */
|
|
369
371
|
stickyTop?: number;
|
|
372
|
+
/** When true, removes the left border (for the first visible column). */
|
|
373
|
+
isFirstColumn?: boolean;
|
|
370
374
|
}
|
|
371
|
-
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, }: 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>;
|
|
372
376
|
|
|
373
377
|
interface ResizeOverlayHandle {
|
|
374
378
|
show: (viewportX: number, columnName: string, areaRect: DOMRect, headerLeftLocal: number, minSize: number, scrollTop: number, scrollLeft: number, initialLineX: number) => void;
|
package/dist/index.js
CHANGED
|
@@ -158,7 +158,8 @@ var DraggableHeader = import_react.default.memo(
|
|
|
158
158
|
disabledFilters,
|
|
159
159
|
headerGridRow = 1,
|
|
160
160
|
headerHeight = 36,
|
|
161
|
-
stickyTop = 0
|
|
161
|
+
stickyTop = 0,
|
|
162
|
+
isFirstColumn = false
|
|
162
163
|
}) => {
|
|
163
164
|
const effectivelySortable = isColumnSortable(column);
|
|
164
165
|
const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
|
|
@@ -248,7 +249,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
248
249
|
borderTop: "none",
|
|
249
250
|
borderRight: "0.5px solid rgba(128,128,128,0.2)",
|
|
250
251
|
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
251
|
-
borderLeft: "0.5px solid rgba(128,128,128,0.2)",
|
|
252
|
+
borderLeft: isFirstColumn ? "none" : "0.5px solid rgba(128,128,128,0.2)",
|
|
252
253
|
...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
|
|
253
254
|
...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
|
|
254
255
|
...column.style,
|
|
@@ -295,7 +296,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
295
296
|
whiteSpace: "nowrap",
|
|
296
297
|
paddingLeft: 8,
|
|
297
298
|
paddingRight: 8,
|
|
298
|
-
borderLeft: "1px solid rgba(128,128,128,0.2)",
|
|
299
|
+
borderLeft: isFirstColumn ? "none" : "1px solid rgba(128,128,128,0.2)",
|
|
299
300
|
fontWeight: 500,
|
|
300
301
|
cursor: isPinned ? "default" : "grab"
|
|
301
302
|
},
|
|
@@ -330,6 +331,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
330
331
|
isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
331
332
|
"button",
|
|
332
333
|
{
|
|
334
|
+
type: "button",
|
|
333
335
|
style: {
|
|
334
336
|
position: "relative",
|
|
335
337
|
height: "100%",
|
|
@@ -357,6 +359,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
357
359
|
!isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
358
360
|
"button",
|
|
359
361
|
{
|
|
362
|
+
type: "button",
|
|
360
363
|
"data-bt-resize": "",
|
|
361
364
|
style: {
|
|
362
365
|
position: "relative",
|
|
@@ -435,6 +438,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
435
438
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
436
439
|
"button",
|
|
437
440
|
{
|
|
441
|
+
type: "button",
|
|
438
442
|
"data-bt-ctx-item": "",
|
|
439
443
|
style: {
|
|
440
444
|
...ctxItemBase,
|
|
@@ -454,6 +458,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
454
458
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
455
459
|
"button",
|
|
456
460
|
{
|
|
461
|
+
type: "button",
|
|
457
462
|
"data-bt-ctx-item": "",
|
|
458
463
|
style: {
|
|
459
464
|
...ctxItemBase,
|
|
@@ -511,6 +516,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
511
516
|
) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
512
517
|
"button",
|
|
513
518
|
{
|
|
519
|
+
type: "button",
|
|
514
520
|
"data-bt-ctx-item": "",
|
|
515
521
|
style: ctxItemBase,
|
|
516
522
|
onClick: () => {
|
|
@@ -525,6 +531,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
525
531
|
filterValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
526
532
|
"button",
|
|
527
533
|
{
|
|
534
|
+
type: "button",
|
|
528
535
|
"data-bt-ctx-item": "",
|
|
529
536
|
style: {
|
|
530
537
|
...ctxItemBase,
|
|
@@ -546,6 +553,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
546
553
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
547
554
|
"button",
|
|
548
555
|
{
|
|
556
|
+
type: "button",
|
|
549
557
|
"data-bt-ctx-item": "",
|
|
550
558
|
style: ctxItemBase,
|
|
551
559
|
onClick: () => {
|
|
@@ -564,6 +572,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
564
572
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
565
573
|
"button",
|
|
566
574
|
{
|
|
575
|
+
type: "button",
|
|
567
576
|
"data-bt-ctx-item": "",
|
|
568
577
|
style: ctxItemBase,
|
|
569
578
|
onClick: () => {
|
|
@@ -584,6 +593,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
584
593
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
585
594
|
"button",
|
|
586
595
|
{
|
|
596
|
+
type: "button",
|
|
587
597
|
"data-bt-ctx-item": "",
|
|
588
598
|
style: ctxItemBase,
|
|
589
599
|
onClick: () => {
|
|
@@ -602,6 +612,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
602
612
|
customContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
603
613
|
"button",
|
|
604
614
|
{
|
|
615
|
+
type: "button",
|
|
605
616
|
"data-bt-ctx-item": "",
|
|
606
617
|
disabled: item.disabled,
|
|
607
618
|
style: {
|
|
@@ -642,7 +653,7 @@ var DraggableHeader = import_react.default.memo(
|
|
|
642
653
|
] });
|
|
643
654
|
},
|
|
644
655
|
(prevProps, nextProps) => {
|
|
645
|
-
return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop;
|
|
656
|
+
return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop && prevProps.isFirstColumn === nextProps.isFirstColumn;
|
|
646
657
|
}
|
|
647
658
|
);
|
|
648
659
|
DraggableHeader.displayName = "DraggableHeader";
|
|
@@ -914,7 +925,7 @@ var Cell = import_react3.default.memo(
|
|
|
914
925
|
rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
|
|
915
926
|
rowSelection.onChange?.([rawKey], [record], { type: "single" });
|
|
916
927
|
},
|
|
917
|
-
style: { cursor: "pointer", accentColor }
|
|
928
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
918
929
|
}
|
|
919
930
|
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
920
931
|
"input",
|
|
@@ -940,7 +951,7 @@ var Cell = import_react3.default.memo(
|
|
|
940
951
|
type: "multiple"
|
|
941
952
|
});
|
|
942
953
|
},
|
|
943
|
-
style: { cursor: "pointer", accentColor,
|
|
954
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
944
955
|
}
|
|
945
956
|
);
|
|
946
957
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -1622,7 +1633,8 @@ function BoltTable({
|
|
|
1622
1633
|
disabledFilters,
|
|
1623
1634
|
onCopy,
|
|
1624
1635
|
keepPinnedRowsAcrossPages,
|
|
1625
|
-
onEdit
|
|
1636
|
+
onEdit,
|
|
1637
|
+
onRowClick
|
|
1626
1638
|
}) {
|
|
1627
1639
|
const data = (0, import_react4.useMemo)(() => {
|
|
1628
1640
|
if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
|
|
@@ -1821,6 +1833,7 @@ function BoltTable({
|
|
|
1821
1833
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1822
1834
|
"button",
|
|
1823
1835
|
{
|
|
1836
|
+
type: "button",
|
|
1824
1837
|
onClick: (e) => {
|
|
1825
1838
|
e.stopPropagation();
|
|
1826
1839
|
toggleExpandRef.current(key);
|
|
@@ -2619,6 +2632,7 @@ function BoltTable({
|
|
|
2619
2632
|
[data-bt-header][data-drag-over] {
|
|
2620
2633
|
border: 1px dashed ${accentColor} !important;
|
|
2621
2634
|
}
|
|
2635
|
+
${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
|
|
2622
2636
|
` }),
|
|
2623
2637
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2624
2638
|
"div",
|
|
@@ -2825,6 +2839,36 @@ function BoltTable({
|
|
|
2825
2839
|
},
|
|
2826
2840
|
onTouchEnd: cancelCellLongPress,
|
|
2827
2841
|
onTouchCancel: cancelCellLongPress,
|
|
2842
|
+
onClick: onRowClick ? (e) => {
|
|
2843
|
+
const target = e.target;
|
|
2844
|
+
if (target.closest("input, button, a, select, textarea")) return;
|
|
2845
|
+
const cell = target.closest("[data-bt-cell]");
|
|
2846
|
+
if (!cell) return;
|
|
2847
|
+
const rk = cell.dataset.rowKey;
|
|
2848
|
+
if (!rk) return;
|
|
2849
|
+
for (let i = 0; i < displayData.length; i++) {
|
|
2850
|
+
const row = displayData[i];
|
|
2851
|
+
if (row == null) continue;
|
|
2852
|
+
if (getRowKey(row, i) === rk) {
|
|
2853
|
+
onRowClick(row, i, e);
|
|
2854
|
+
return;
|
|
2855
|
+
}
|
|
2856
|
+
}
|
|
2857
|
+
for (let i = 0; i < pinnedTopRows.length; i++) {
|
|
2858
|
+
if (pinnedTopRows[i] == null) continue;
|
|
2859
|
+
if (getRowKey(pinnedTopRows[i], i) === rk) {
|
|
2860
|
+
onRowClick(pinnedTopRows[i], i, e);
|
|
2861
|
+
return;
|
|
2862
|
+
}
|
|
2863
|
+
}
|
|
2864
|
+
for (let i = 0; i < pinnedBottomRows.length; i++) {
|
|
2865
|
+
if (pinnedBottomRows[i] == null) continue;
|
|
2866
|
+
if (getRowKey(pinnedBottomRows[i], i) === rk) {
|
|
2867
|
+
onRowClick(pinnedBottomRows[i], i, e);
|
|
2868
|
+
return;
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
} : void 0,
|
|
2828
2872
|
children: [
|
|
2829
2873
|
hasColumnGroups && headerGroups.map((group) => {
|
|
2830
2874
|
let minIdx = Infinity;
|
|
@@ -2865,133 +2909,140 @@ function BoltTable({
|
|
|
2865
2909
|
`group-${group.key}`
|
|
2866
2910
|
);
|
|
2867
2911
|
}),
|
|
2868
|
-
|
|
2869
|
-
const
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2912
|
+
(() => {
|
|
2913
|
+
const firstDataColIndex = orderedColumns.findIndex(
|
|
2914
|
+
(c) => c.key !== "__select__" && c.key !== "__expand__"
|
|
2915
|
+
);
|
|
2916
|
+
return orderedColumns.map((column, visualIndex) => {
|
|
2917
|
+
const isInGroup = groupedColumnKeySet?.has(column.key) ?? false;
|
|
2918
|
+
const leafGridRow = hasColumnGroups ? isInGroup ? 2 : "1 / 3" : 1;
|
|
2919
|
+
const leafHeight = hasColumnGroups && !isInGroup ? 72 : 36;
|
|
2920
|
+
const leafStickyTop = hasColumnGroups && isInGroup ? 36 : 0;
|
|
2921
|
+
if (column.key === "__select__" && rowSelection) {
|
|
2922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2923
|
+
"div",
|
|
2924
|
+
{
|
|
2925
|
+
"data-bt-header": "",
|
|
2926
|
+
"data-bt-pinned": "",
|
|
2927
|
+
className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
|
|
2928
|
+
style: {
|
|
2929
|
+
display: "flex",
|
|
2930
|
+
height: leafHeight,
|
|
2931
|
+
alignItems: "center",
|
|
2932
|
+
justifyContent: "center",
|
|
2933
|
+
overflow: "hidden",
|
|
2934
|
+
textOverflow: "ellipsis",
|
|
2935
|
+
whiteSpace: "nowrap",
|
|
2936
|
+
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
2937
|
+
position: "sticky",
|
|
2938
|
+
left: columnOffsets.get("__select__") ?? 0,
|
|
2939
|
+
top: 0,
|
|
2940
|
+
zIndex: 13,
|
|
2941
|
+
width: "48px",
|
|
2942
|
+
gridRow: leafGridRow,
|
|
2943
|
+
...styles.header,
|
|
2944
|
+
...styles.pinnedHeader
|
|
2945
|
+
},
|
|
2946
|
+
children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2947
|
+
"input",
|
|
2948
|
+
{
|
|
2949
|
+
type: "checkbox",
|
|
2950
|
+
checked: dataLength > 0 && normalizedSelectedKeys.length === dataLength,
|
|
2951
|
+
ref: (input) => {
|
|
2952
|
+
if (input) {
|
|
2953
|
+
input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < dataLength;
|
|
2954
|
+
}
|
|
2955
|
+
},
|
|
2956
|
+
onChange: (e) => {
|
|
2957
|
+
if (e.target.checked) {
|
|
2958
|
+
const allKeys = data.map(
|
|
2959
|
+
(row, idx) => getRawRowKey(row, idx)
|
|
2960
|
+
);
|
|
2961
|
+
rowSelection.onSelectAll?.(
|
|
2962
|
+
true,
|
|
2963
|
+
data,
|
|
2964
|
+
data
|
|
2965
|
+
);
|
|
2966
|
+
rowSelection.onChange?.(allKeys, data, {
|
|
2967
|
+
type: "all"
|
|
2968
|
+
});
|
|
2969
|
+
} else {
|
|
2970
|
+
rowSelection.onSelectAll?.(false, [], data);
|
|
2971
|
+
rowSelection.onChange?.([], [], {
|
|
2972
|
+
type: "all"
|
|
2973
|
+
});
|
|
2974
|
+
}
|
|
2975
|
+
},
|
|
2976
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
2977
|
+
}
|
|
2978
|
+
)
|
|
2897
2979
|
},
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
}
|
|
2927
|
-
},
|
|
2928
|
-
style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
|
|
2980
|
+
"__select__"
|
|
2981
|
+
);
|
|
2982
|
+
}
|
|
2983
|
+
if (column.key === "__expand__") {
|
|
2984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2985
|
+
"div",
|
|
2986
|
+
{
|
|
2987
|
+
"data-bt-header": "",
|
|
2988
|
+
"data-bt-pinned": "",
|
|
2989
|
+
className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
|
|
2990
|
+
style: {
|
|
2991
|
+
display: "flex",
|
|
2992
|
+
height: leafHeight,
|
|
2993
|
+
alignItems: "center",
|
|
2994
|
+
justifyContent: "center",
|
|
2995
|
+
overflow: "hidden",
|
|
2996
|
+
textOverflow: "ellipsis",
|
|
2997
|
+
whiteSpace: "nowrap",
|
|
2998
|
+
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
2999
|
+
position: "sticky",
|
|
3000
|
+
left: columnOffsets.get("__expand__") ?? 0,
|
|
3001
|
+
top: 0,
|
|
3002
|
+
zIndex: 13,
|
|
3003
|
+
width: "40px",
|
|
3004
|
+
backgroundColor: styles.pinnedBg,
|
|
3005
|
+
gridRow: leafGridRow,
|
|
3006
|
+
...styles.header,
|
|
3007
|
+
...styles.pinnedHeader
|
|
2929
3008
|
}
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
}
|
|
2935
|
-
if (column.key === "__expand__") {
|
|
3009
|
+
},
|
|
3010
|
+
"__expand__"
|
|
3011
|
+
);
|
|
3012
|
+
}
|
|
2936
3013
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2937
|
-
|
|
3014
|
+
DraggableHeader_default,
|
|
2938
3015
|
{
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
3016
|
+
column,
|
|
3017
|
+
accentColor,
|
|
3018
|
+
visualIndex,
|
|
3019
|
+
onResizeStart: handleResizeStart,
|
|
3020
|
+
onColumnDragStart: handleColumnDragStart,
|
|
3021
|
+
styles,
|
|
3022
|
+
classNames,
|
|
3023
|
+
gripIcon,
|
|
3024
|
+
hideGripIcon,
|
|
3025
|
+
icons,
|
|
3026
|
+
stickyOffset: columnOffsets.get(column.key),
|
|
3027
|
+
onTogglePin: handleTogglePin,
|
|
3028
|
+
onToggleHide: handleToggleHide,
|
|
3029
|
+
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
3030
|
+
isFirstColumn: visualIndex === firstDataColIndex,
|
|
3031
|
+
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
3032
|
+
onSort: handleSort,
|
|
3033
|
+
filterValue: columnFilters[column.key] ?? "",
|
|
3034
|
+
onFilter: handleColumnFilter,
|
|
3035
|
+
onClearFilter: handleClearFilter,
|
|
3036
|
+
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
3037
|
+
disabledFilters,
|
|
3038
|
+
headerGridRow: leafGridRow,
|
|
3039
|
+
headerHeight: leafHeight,
|
|
3040
|
+
stickyTop: leafStickyTop
|
|
2960
3041
|
},
|
|
2961
|
-
|
|
3042
|
+
column.key
|
|
2962
3043
|
);
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
DraggableHeader_default,
|
|
2966
|
-
{
|
|
2967
|
-
column,
|
|
2968
|
-
accentColor,
|
|
2969
|
-
visualIndex,
|
|
2970
|
-
onResizeStart: handleResizeStart,
|
|
2971
|
-
onColumnDragStart: handleColumnDragStart,
|
|
2972
|
-
styles,
|
|
2973
|
-
classNames,
|
|
2974
|
-
gripIcon,
|
|
2975
|
-
hideGripIcon,
|
|
2976
|
-
icons,
|
|
2977
|
-
stickyOffset: columnOffsets.get(column.key),
|
|
2978
|
-
onTogglePin: handleTogglePin,
|
|
2979
|
-
onToggleHide: handleToggleHide,
|
|
2980
|
-
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
2981
|
-
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
2982
|
-
onSort: handleSort,
|
|
2983
|
-
filterValue: columnFilters[column.key] ?? "",
|
|
2984
|
-
onFilter: handleColumnFilter,
|
|
2985
|
-
onClearFilter: handleClearFilter,
|
|
2986
|
-
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
2987
|
-
disabledFilters,
|
|
2988
|
-
headerGridRow: leafGridRow,
|
|
2989
|
-
headerHeight: leafHeight,
|
|
2990
|
-
stickyTop: leafStickyTop
|
|
2991
|
-
},
|
|
2992
|
-
column.key
|
|
2993
|
-
);
|
|
2994
|
-
}),
|
|
3044
|
+
});
|
|
3045
|
+
})(),
|
|
2995
3046
|
isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2996
3047
|
"div",
|
|
2997
3048
|
{
|
|
@@ -3139,6 +3190,7 @@ function BoltTable({
|
|
|
3139
3190
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3140
3191
|
"button",
|
|
3141
3192
|
{
|
|
3193
|
+
type: "button",
|
|
3142
3194
|
onClick: () => handlePageChange(1),
|
|
3143
3195
|
disabled: currentPage === 1,
|
|
3144
3196
|
className: classNames.paginationButton ?? "",
|
|
@@ -3164,6 +3216,7 @@ function BoltTable({
|
|
|
3164
3216
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3165
3217
|
"button",
|
|
3166
3218
|
{
|
|
3219
|
+
type: "button",
|
|
3167
3220
|
onClick: () => handlePageChange(currentPage - 1),
|
|
3168
3221
|
disabled: currentPage === 1,
|
|
3169
3222
|
className: classNames.paginationButton ?? "",
|
|
@@ -3207,6 +3260,7 @@ function BoltTable({
|
|
|
3207
3260
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3208
3261
|
"button",
|
|
3209
3262
|
{
|
|
3263
|
+
type: "button",
|
|
3210
3264
|
className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
|
|
3211
3265
|
style: {
|
|
3212
3266
|
display: "inline-flex",
|
|
@@ -3234,6 +3288,7 @@ function BoltTable({
|
|
|
3234
3288
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3235
3289
|
"button",
|
|
3236
3290
|
{
|
|
3291
|
+
type: "button",
|
|
3237
3292
|
onClick: () => handlePageChange(currentPage + 1),
|
|
3238
3293
|
disabled: currentPage === totalPages,
|
|
3239
3294
|
className: classNames.paginationButton ?? "",
|
|
@@ -3259,6 +3314,7 @@ function BoltTable({
|
|
|
3259
3314
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3260
3315
|
"button",
|
|
3261
3316
|
{
|
|
3317
|
+
type: "button",
|
|
3262
3318
|
onClick: () => handlePageChange(totalPages),
|
|
3263
3319
|
disabled: currentPage === totalPages,
|
|
3264
3320
|
className: classNames.paginationButton ?? "",
|
|
@@ -3464,6 +3520,7 @@ function BoltTable({
|
|
|
3464
3520
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3465
3521
|
"button",
|
|
3466
3522
|
{
|
|
3523
|
+
type: "button",
|
|
3467
3524
|
"data-bt-ctx-item": true,
|
|
3468
3525
|
style: btnStyle,
|
|
3469
3526
|
onClick: () => {
|
|
@@ -3492,6 +3549,7 @@ function BoltTable({
|
|
|
3492
3549
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3493
3550
|
"button",
|
|
3494
3551
|
{
|
|
3552
|
+
type: "button",
|
|
3495
3553
|
"data-bt-ctx-item": true,
|
|
3496
3554
|
style: btnStyle,
|
|
3497
3555
|
onClick: () => {
|
|
@@ -3535,6 +3593,7 @@ function BoltTable({
|
|
|
3535
3593
|
hasEdit && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3536
3594
|
"button",
|
|
3537
3595
|
{
|
|
3596
|
+
type: "button",
|
|
3538
3597
|
"data-bt-ctx-item": true,
|
|
3539
3598
|
style: btnStyle,
|
|
3540
3599
|
onClick: () => {
|
|
@@ -3567,6 +3626,7 @@ function BoltTable({
|
|
|
3567
3626
|
hasCopy && menuRecord && menuCol && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3568
3627
|
"button",
|
|
3569
3628
|
{
|
|
3629
|
+
type: "button",
|
|
3570
3630
|
"data-bt-ctx-item": true,
|
|
3571
3631
|
style: btnStyle,
|
|
3572
3632
|
onClick: () => {
|
|
@@ -3599,6 +3659,7 @@ function BoltTable({
|
|
|
3599
3659
|
menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3600
3660
|
"button",
|
|
3601
3661
|
{
|
|
3662
|
+
type: "button",
|
|
3602
3663
|
"data-bt-ctx-item": "",
|
|
3603
3664
|
disabled: item.disabled,
|
|
3604
3665
|
style: {
|
package/dist/index.mjs
CHANGED
|
@@ -124,7 +124,8 @@ var DraggableHeader = React.memo(
|
|
|
124
124
|
disabledFilters,
|
|
125
125
|
headerGridRow = 1,
|
|
126
126
|
headerHeight = 36,
|
|
127
|
-
stickyTop = 0
|
|
127
|
+
stickyTop = 0,
|
|
128
|
+
isFirstColumn = false
|
|
128
129
|
}) => {
|
|
129
130
|
const effectivelySortable = isColumnSortable(column);
|
|
130
131
|
const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
|
|
@@ -214,7 +215,7 @@ var DraggableHeader = React.memo(
|
|
|
214
215
|
borderTop: "none",
|
|
215
216
|
borderRight: "0.5px solid rgba(128,128,128,0.2)",
|
|
216
217
|
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
217
|
-
borderLeft: "0.5px solid rgba(128,128,128,0.2)",
|
|
218
|
+
borderLeft: isFirstColumn ? "none" : "0.5px solid rgba(128,128,128,0.2)",
|
|
218
219
|
...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
|
|
219
220
|
...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
|
|
220
221
|
...column.style,
|
|
@@ -261,7 +262,7 @@ var DraggableHeader = React.memo(
|
|
|
261
262
|
whiteSpace: "nowrap",
|
|
262
263
|
paddingLeft: 8,
|
|
263
264
|
paddingRight: 8,
|
|
264
|
-
borderLeft: "1px solid rgba(128,128,128,0.2)",
|
|
265
|
+
borderLeft: isFirstColumn ? "none" : "1px solid rgba(128,128,128,0.2)",
|
|
265
266
|
fontWeight: 500,
|
|
266
267
|
cursor: isPinned ? "default" : "grab"
|
|
267
268
|
},
|
|
@@ -296,6 +297,7 @@ var DraggableHeader = React.memo(
|
|
|
296
297
|
isPinned && /* @__PURE__ */ jsx2(
|
|
297
298
|
"button",
|
|
298
299
|
{
|
|
300
|
+
type: "button",
|
|
299
301
|
style: {
|
|
300
302
|
position: "relative",
|
|
301
303
|
height: "100%",
|
|
@@ -323,6 +325,7 @@ var DraggableHeader = React.memo(
|
|
|
323
325
|
!isPinned && /* @__PURE__ */ jsx2(
|
|
324
326
|
"button",
|
|
325
327
|
{
|
|
328
|
+
type: "button",
|
|
326
329
|
"data-bt-resize": "",
|
|
327
330
|
style: {
|
|
328
331
|
position: "relative",
|
|
@@ -401,6 +404,7 @@ var DraggableHeader = React.memo(
|
|
|
401
404
|
/* @__PURE__ */ jsxs2(
|
|
402
405
|
"button",
|
|
403
406
|
{
|
|
407
|
+
type: "button",
|
|
404
408
|
"data-bt-ctx-item": "",
|
|
405
409
|
style: {
|
|
406
410
|
...ctxItemBase,
|
|
@@ -420,6 +424,7 @@ var DraggableHeader = React.memo(
|
|
|
420
424
|
/* @__PURE__ */ jsxs2(
|
|
421
425
|
"button",
|
|
422
426
|
{
|
|
427
|
+
type: "button",
|
|
423
428
|
"data-bt-ctx-item": "",
|
|
424
429
|
style: {
|
|
425
430
|
...ctxItemBase,
|
|
@@ -477,6 +482,7 @@ var DraggableHeader = React.memo(
|
|
|
477
482
|
) }) : /* @__PURE__ */ jsxs2(
|
|
478
483
|
"button",
|
|
479
484
|
{
|
|
485
|
+
type: "button",
|
|
480
486
|
"data-bt-ctx-item": "",
|
|
481
487
|
style: ctxItemBase,
|
|
482
488
|
onClick: () => {
|
|
@@ -491,6 +497,7 @@ var DraggableHeader = React.memo(
|
|
|
491
497
|
filterValue && /* @__PURE__ */ jsxs2(
|
|
492
498
|
"button",
|
|
493
499
|
{
|
|
500
|
+
type: "button",
|
|
494
501
|
"data-bt-ctx-item": "",
|
|
495
502
|
style: {
|
|
496
503
|
...ctxItemBase,
|
|
@@ -512,6 +519,7 @@ var DraggableHeader = React.memo(
|
|
|
512
519
|
/* @__PURE__ */ jsxs2(
|
|
513
520
|
"button",
|
|
514
521
|
{
|
|
522
|
+
type: "button",
|
|
515
523
|
"data-bt-ctx-item": "",
|
|
516
524
|
style: ctxItemBase,
|
|
517
525
|
onClick: () => {
|
|
@@ -530,6 +538,7 @@ var DraggableHeader = React.memo(
|
|
|
530
538
|
/* @__PURE__ */ jsxs2(
|
|
531
539
|
"button",
|
|
532
540
|
{
|
|
541
|
+
type: "button",
|
|
533
542
|
"data-bt-ctx-item": "",
|
|
534
543
|
style: ctxItemBase,
|
|
535
544
|
onClick: () => {
|
|
@@ -550,6 +559,7 @@ var DraggableHeader = React.memo(
|
|
|
550
559
|
/* @__PURE__ */ jsxs2(
|
|
551
560
|
"button",
|
|
552
561
|
{
|
|
562
|
+
type: "button",
|
|
553
563
|
"data-bt-ctx-item": "",
|
|
554
564
|
style: ctxItemBase,
|
|
555
565
|
onClick: () => {
|
|
@@ -568,6 +578,7 @@ var DraggableHeader = React.memo(
|
|
|
568
578
|
customContextMenuItems.map((item) => /* @__PURE__ */ jsxs2(
|
|
569
579
|
"button",
|
|
570
580
|
{
|
|
581
|
+
type: "button",
|
|
571
582
|
"data-bt-ctx-item": "",
|
|
572
583
|
disabled: item.disabled,
|
|
573
584
|
style: {
|
|
@@ -608,7 +619,7 @@ var DraggableHeader = React.memo(
|
|
|
608
619
|
] });
|
|
609
620
|
},
|
|
610
621
|
(prevProps, nextProps) => {
|
|
611
|
-
return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop;
|
|
622
|
+
return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue && prevProps.classNames === nextProps.classNames && prevProps.styles === nextProps.styles && prevProps.customContextMenuItems === nextProps.customContextMenuItems && prevProps.disabledFilters === nextProps.disabledFilters && prevProps.headerGridRow === nextProps.headerGridRow && prevProps.headerHeight === nextProps.headerHeight && prevProps.stickyTop === nextProps.stickyTop && prevProps.isFirstColumn === nextProps.isFirstColumn;
|
|
612
623
|
}
|
|
613
624
|
);
|
|
614
625
|
DraggableHeader.displayName = "DraggableHeader";
|
|
@@ -880,7 +891,7 @@ var Cell = React3.memo(
|
|
|
880
891
|
rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
|
|
881
892
|
rowSelection.onChange?.([rawKey], [record], { type: "single" });
|
|
882
893
|
},
|
|
883
|
-
style: { cursor: "pointer", accentColor }
|
|
894
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
884
895
|
}
|
|
885
896
|
) : /* @__PURE__ */ jsx4(
|
|
886
897
|
"input",
|
|
@@ -906,7 +917,7 @@ var Cell = React3.memo(
|
|
|
906
917
|
type: "multiple"
|
|
907
918
|
});
|
|
908
919
|
},
|
|
909
|
-
style: { cursor: "pointer", accentColor,
|
|
920
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
910
921
|
}
|
|
911
922
|
);
|
|
912
923
|
return /* @__PURE__ */ jsx4(
|
|
@@ -1588,7 +1599,8 @@ function BoltTable({
|
|
|
1588
1599
|
disabledFilters,
|
|
1589
1600
|
onCopy,
|
|
1590
1601
|
keepPinnedRowsAcrossPages,
|
|
1591
|
-
onEdit
|
|
1602
|
+
onEdit,
|
|
1603
|
+
onRowClick
|
|
1592
1604
|
}) {
|
|
1593
1605
|
const data = useMemo2(() => {
|
|
1594
1606
|
if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
|
|
@@ -1787,6 +1799,7 @@ function BoltTable({
|
|
|
1787
1799
|
return /* @__PURE__ */ jsx5(
|
|
1788
1800
|
"button",
|
|
1789
1801
|
{
|
|
1802
|
+
type: "button",
|
|
1790
1803
|
onClick: (e) => {
|
|
1791
1804
|
e.stopPropagation();
|
|
1792
1805
|
toggleExpandRef.current(key);
|
|
@@ -2585,6 +2598,7 @@ function BoltTable({
|
|
|
2585
2598
|
[data-bt-header][data-drag-over] {
|
|
2586
2599
|
border: 1px dashed ${accentColor} !important;
|
|
2587
2600
|
}
|
|
2601
|
+
${onRowClick ? "[data-bt-cell] { cursor: pointer; }" : ""}
|
|
2588
2602
|
` }),
|
|
2589
2603
|
/* @__PURE__ */ jsx5(
|
|
2590
2604
|
"div",
|
|
@@ -2791,6 +2805,36 @@ function BoltTable({
|
|
|
2791
2805
|
},
|
|
2792
2806
|
onTouchEnd: cancelCellLongPress,
|
|
2793
2807
|
onTouchCancel: cancelCellLongPress,
|
|
2808
|
+
onClick: onRowClick ? (e) => {
|
|
2809
|
+
const target = e.target;
|
|
2810
|
+
if (target.closest("input, button, a, select, textarea")) return;
|
|
2811
|
+
const cell = target.closest("[data-bt-cell]");
|
|
2812
|
+
if (!cell) return;
|
|
2813
|
+
const rk = cell.dataset.rowKey;
|
|
2814
|
+
if (!rk) return;
|
|
2815
|
+
for (let i = 0; i < displayData.length; i++) {
|
|
2816
|
+
const row = displayData[i];
|
|
2817
|
+
if (row == null) continue;
|
|
2818
|
+
if (getRowKey(row, i) === rk) {
|
|
2819
|
+
onRowClick(row, i, e);
|
|
2820
|
+
return;
|
|
2821
|
+
}
|
|
2822
|
+
}
|
|
2823
|
+
for (let i = 0; i < pinnedTopRows.length; i++) {
|
|
2824
|
+
if (pinnedTopRows[i] == null) continue;
|
|
2825
|
+
if (getRowKey(pinnedTopRows[i], i) === rk) {
|
|
2826
|
+
onRowClick(pinnedTopRows[i], i, e);
|
|
2827
|
+
return;
|
|
2828
|
+
}
|
|
2829
|
+
}
|
|
2830
|
+
for (let i = 0; i < pinnedBottomRows.length; i++) {
|
|
2831
|
+
if (pinnedBottomRows[i] == null) continue;
|
|
2832
|
+
if (getRowKey(pinnedBottomRows[i], i) === rk) {
|
|
2833
|
+
onRowClick(pinnedBottomRows[i], i, e);
|
|
2834
|
+
return;
|
|
2835
|
+
}
|
|
2836
|
+
}
|
|
2837
|
+
} : void 0,
|
|
2794
2838
|
children: [
|
|
2795
2839
|
hasColumnGroups && headerGroups.map((group) => {
|
|
2796
2840
|
let minIdx = Infinity;
|
|
@@ -2831,133 +2875,140 @@ function BoltTable({
|
|
|
2831
2875
|
`group-${group.key}`
|
|
2832
2876
|
);
|
|
2833
2877
|
}),
|
|
2834
|
-
|
|
2835
|
-
const
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2878
|
+
(() => {
|
|
2879
|
+
const firstDataColIndex = orderedColumns.findIndex(
|
|
2880
|
+
(c) => c.key !== "__select__" && c.key !== "__expand__"
|
|
2881
|
+
);
|
|
2882
|
+
return orderedColumns.map((column, visualIndex) => {
|
|
2883
|
+
const isInGroup = groupedColumnKeySet?.has(column.key) ?? false;
|
|
2884
|
+
const leafGridRow = hasColumnGroups ? isInGroup ? 2 : "1 / 3" : 1;
|
|
2885
|
+
const leafHeight = hasColumnGroups && !isInGroup ? 72 : 36;
|
|
2886
|
+
const leafStickyTop = hasColumnGroups && isInGroup ? 36 : 0;
|
|
2887
|
+
if (column.key === "__select__" && rowSelection) {
|
|
2888
|
+
return /* @__PURE__ */ jsx5(
|
|
2889
|
+
"div",
|
|
2890
|
+
{
|
|
2891
|
+
"data-bt-header": "",
|
|
2892
|
+
"data-bt-pinned": "",
|
|
2893
|
+
className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
|
|
2894
|
+
style: {
|
|
2895
|
+
display: "flex",
|
|
2896
|
+
height: leafHeight,
|
|
2897
|
+
alignItems: "center",
|
|
2898
|
+
justifyContent: "center",
|
|
2899
|
+
overflow: "hidden",
|
|
2900
|
+
textOverflow: "ellipsis",
|
|
2901
|
+
whiteSpace: "nowrap",
|
|
2902
|
+
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
2903
|
+
position: "sticky",
|
|
2904
|
+
left: columnOffsets.get("__select__") ?? 0,
|
|
2905
|
+
top: 0,
|
|
2906
|
+
zIndex: 13,
|
|
2907
|
+
width: "48px",
|
|
2908
|
+
gridRow: leafGridRow,
|
|
2909
|
+
...styles.header,
|
|
2910
|
+
...styles.pinnedHeader
|
|
2911
|
+
},
|
|
2912
|
+
children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx5(
|
|
2913
|
+
"input",
|
|
2914
|
+
{
|
|
2915
|
+
type: "checkbox",
|
|
2916
|
+
checked: dataLength > 0 && normalizedSelectedKeys.length === dataLength,
|
|
2917
|
+
ref: (input) => {
|
|
2918
|
+
if (input) {
|
|
2919
|
+
input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < dataLength;
|
|
2920
|
+
}
|
|
2921
|
+
},
|
|
2922
|
+
onChange: (e) => {
|
|
2923
|
+
if (e.target.checked) {
|
|
2924
|
+
const allKeys = data.map(
|
|
2925
|
+
(row, idx) => getRawRowKey(row, idx)
|
|
2926
|
+
);
|
|
2927
|
+
rowSelection.onSelectAll?.(
|
|
2928
|
+
true,
|
|
2929
|
+
data,
|
|
2930
|
+
data
|
|
2931
|
+
);
|
|
2932
|
+
rowSelection.onChange?.(allKeys, data, {
|
|
2933
|
+
type: "all"
|
|
2934
|
+
});
|
|
2935
|
+
} else {
|
|
2936
|
+
rowSelection.onSelectAll?.(false, [], data);
|
|
2937
|
+
rowSelection.onChange?.([], [], {
|
|
2938
|
+
type: "all"
|
|
2939
|
+
});
|
|
2940
|
+
}
|
|
2941
|
+
},
|
|
2942
|
+
style: { cursor: "pointer", accentColor, backgroundColor: "#94A3B8" }
|
|
2943
|
+
}
|
|
2944
|
+
)
|
|
2863
2945
|
},
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
}
|
|
2893
|
-
},
|
|
2894
|
-
style: { cursor: "pointer", accentColor, colorScheme: "light dark" }
|
|
2946
|
+
"__select__"
|
|
2947
|
+
);
|
|
2948
|
+
}
|
|
2949
|
+
if (column.key === "__expand__") {
|
|
2950
|
+
return /* @__PURE__ */ jsx5(
|
|
2951
|
+
"div",
|
|
2952
|
+
{
|
|
2953
|
+
"data-bt-header": "",
|
|
2954
|
+
"data-bt-pinned": "",
|
|
2955
|
+
className: `${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
|
|
2956
|
+
style: {
|
|
2957
|
+
display: "flex",
|
|
2958
|
+
height: leafHeight,
|
|
2959
|
+
alignItems: "center",
|
|
2960
|
+
justifyContent: "center",
|
|
2961
|
+
overflow: "hidden",
|
|
2962
|
+
textOverflow: "ellipsis",
|
|
2963
|
+
whiteSpace: "nowrap",
|
|
2964
|
+
borderBottom: "1px solid rgba(128,128,128,0.2)",
|
|
2965
|
+
position: "sticky",
|
|
2966
|
+
left: columnOffsets.get("__expand__") ?? 0,
|
|
2967
|
+
top: 0,
|
|
2968
|
+
zIndex: 13,
|
|
2969
|
+
width: "40px",
|
|
2970
|
+
backgroundColor: styles.pinnedBg,
|
|
2971
|
+
gridRow: leafGridRow,
|
|
2972
|
+
...styles.header,
|
|
2973
|
+
...styles.pinnedHeader
|
|
2895
2974
|
}
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
}
|
|
2901
|
-
if (column.key === "__expand__") {
|
|
2975
|
+
},
|
|
2976
|
+
"__expand__"
|
|
2977
|
+
);
|
|
2978
|
+
}
|
|
2902
2979
|
return /* @__PURE__ */ jsx5(
|
|
2903
|
-
|
|
2980
|
+
DraggableHeader_default,
|
|
2904
2981
|
{
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2982
|
+
column,
|
|
2983
|
+
accentColor,
|
|
2984
|
+
visualIndex,
|
|
2985
|
+
onResizeStart: handleResizeStart,
|
|
2986
|
+
onColumnDragStart: handleColumnDragStart,
|
|
2987
|
+
styles,
|
|
2988
|
+
classNames,
|
|
2989
|
+
gripIcon,
|
|
2990
|
+
hideGripIcon,
|
|
2991
|
+
icons,
|
|
2992
|
+
stickyOffset: columnOffsets.get(column.key),
|
|
2993
|
+
onTogglePin: handleTogglePin,
|
|
2994
|
+
onToggleHide: handleToggleHide,
|
|
2995
|
+
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
2996
|
+
isFirstColumn: visualIndex === firstDataColIndex,
|
|
2997
|
+
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
2998
|
+
onSort: handleSort,
|
|
2999
|
+
filterValue: columnFilters[column.key] ?? "",
|
|
3000
|
+
onFilter: handleColumnFilter,
|
|
3001
|
+
onClearFilter: handleClearFilter,
|
|
3002
|
+
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
3003
|
+
disabledFilters,
|
|
3004
|
+
headerGridRow: leafGridRow,
|
|
3005
|
+
headerHeight: leafHeight,
|
|
3006
|
+
stickyTop: leafStickyTop
|
|
2926
3007
|
},
|
|
2927
|
-
|
|
3008
|
+
column.key
|
|
2928
3009
|
);
|
|
2929
|
-
}
|
|
2930
|
-
|
|
2931
|
-
DraggableHeader_default,
|
|
2932
|
-
{
|
|
2933
|
-
column,
|
|
2934
|
-
accentColor,
|
|
2935
|
-
visualIndex,
|
|
2936
|
-
onResizeStart: handleResizeStart,
|
|
2937
|
-
onColumnDragStart: handleColumnDragStart,
|
|
2938
|
-
styles,
|
|
2939
|
-
classNames,
|
|
2940
|
-
gripIcon,
|
|
2941
|
-
hideGripIcon,
|
|
2942
|
-
icons,
|
|
2943
|
-
stickyOffset: columnOffsets.get(column.key),
|
|
2944
|
-
onTogglePin: handleTogglePin,
|
|
2945
|
-
onToggleHide: handleToggleHide,
|
|
2946
|
-
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
2947
|
-
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
2948
|
-
onSort: handleSort,
|
|
2949
|
-
filterValue: columnFilters[column.key] ?? "",
|
|
2950
|
-
onFilter: handleColumnFilter,
|
|
2951
|
-
onClearFilter: handleClearFilter,
|
|
2952
|
-
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
2953
|
-
disabledFilters,
|
|
2954
|
-
headerGridRow: leafGridRow,
|
|
2955
|
-
headerHeight: leafHeight,
|
|
2956
|
-
stickyTop: leafStickyTop
|
|
2957
|
-
},
|
|
2958
|
-
column.key
|
|
2959
|
-
);
|
|
2960
|
-
}),
|
|
3010
|
+
});
|
|
3011
|
+
})(),
|
|
2961
3012
|
isEmpty ? /* @__PURE__ */ jsx5(
|
|
2962
3013
|
"div",
|
|
2963
3014
|
{
|
|
@@ -3105,6 +3156,7 @@ function BoltTable({
|
|
|
3105
3156
|
/* @__PURE__ */ jsx5(
|
|
3106
3157
|
"button",
|
|
3107
3158
|
{
|
|
3159
|
+
type: "button",
|
|
3108
3160
|
onClick: () => handlePageChange(1),
|
|
3109
3161
|
disabled: currentPage === 1,
|
|
3110
3162
|
className: classNames.paginationButton ?? "",
|
|
@@ -3130,6 +3182,7 @@ function BoltTable({
|
|
|
3130
3182
|
/* @__PURE__ */ jsx5(
|
|
3131
3183
|
"button",
|
|
3132
3184
|
{
|
|
3185
|
+
type: "button",
|
|
3133
3186
|
onClick: () => handlePageChange(currentPage - 1),
|
|
3134
3187
|
disabled: currentPage === 1,
|
|
3135
3188
|
className: classNames.paginationButton ?? "",
|
|
@@ -3173,6 +3226,7 @@ function BoltTable({
|
|
|
3173
3226
|
return /* @__PURE__ */ jsx5(
|
|
3174
3227
|
"button",
|
|
3175
3228
|
{
|
|
3229
|
+
type: "button",
|
|
3176
3230
|
className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
|
|
3177
3231
|
style: {
|
|
3178
3232
|
display: "inline-flex",
|
|
@@ -3200,6 +3254,7 @@ function BoltTable({
|
|
|
3200
3254
|
/* @__PURE__ */ jsx5(
|
|
3201
3255
|
"button",
|
|
3202
3256
|
{
|
|
3257
|
+
type: "button",
|
|
3203
3258
|
onClick: () => handlePageChange(currentPage + 1),
|
|
3204
3259
|
disabled: currentPage === totalPages,
|
|
3205
3260
|
className: classNames.paginationButton ?? "",
|
|
@@ -3225,6 +3280,7 @@ function BoltTable({
|
|
|
3225
3280
|
/* @__PURE__ */ jsx5(
|
|
3226
3281
|
"button",
|
|
3227
3282
|
{
|
|
3283
|
+
type: "button",
|
|
3228
3284
|
onClick: () => handlePageChange(totalPages),
|
|
3229
3285
|
disabled: currentPage === totalPages,
|
|
3230
3286
|
className: classNames.paginationButton ?? "",
|
|
@@ -3430,6 +3486,7 @@ function BoltTable({
|
|
|
3430
3486
|
/* @__PURE__ */ jsxs5(
|
|
3431
3487
|
"button",
|
|
3432
3488
|
{
|
|
3489
|
+
type: "button",
|
|
3433
3490
|
"data-bt-ctx-item": true,
|
|
3434
3491
|
style: btnStyle,
|
|
3435
3492
|
onClick: () => {
|
|
@@ -3458,6 +3515,7 @@ function BoltTable({
|
|
|
3458
3515
|
/* @__PURE__ */ jsxs5(
|
|
3459
3516
|
"button",
|
|
3460
3517
|
{
|
|
3518
|
+
type: "button",
|
|
3461
3519
|
"data-bt-ctx-item": true,
|
|
3462
3520
|
style: btnStyle,
|
|
3463
3521
|
onClick: () => {
|
|
@@ -3501,6 +3559,7 @@ function BoltTable({
|
|
|
3501
3559
|
hasEdit && /* @__PURE__ */ jsxs5(
|
|
3502
3560
|
"button",
|
|
3503
3561
|
{
|
|
3562
|
+
type: "button",
|
|
3504
3563
|
"data-bt-ctx-item": true,
|
|
3505
3564
|
style: btnStyle,
|
|
3506
3565
|
onClick: () => {
|
|
@@ -3533,6 +3592,7 @@ function BoltTable({
|
|
|
3533
3592
|
hasCopy && menuRecord && menuCol && /* @__PURE__ */ jsxs5(
|
|
3534
3593
|
"button",
|
|
3535
3594
|
{
|
|
3595
|
+
type: "button",
|
|
3536
3596
|
"data-bt-ctx-item": true,
|
|
3537
3597
|
style: btnStyle,
|
|
3538
3598
|
onClick: () => {
|
|
@@ -3565,6 +3625,7 @@ function BoltTable({
|
|
|
3565
3625
|
menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ jsxs5(
|
|
3566
3626
|
"button",
|
|
3567
3627
|
{
|
|
3628
|
+
type: "button",
|
|
3568
3629
|
"data-bt-ctx-item": "",
|
|
3569
3630
|
disabled: item.disabled,
|
|
3570
3631
|
style: {
|
package/package.json
CHANGED