bolt-table 0.1.24 → 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/dist/index.d.mts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +186 -126
- package/dist/index.mjs +186 -126
- 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";
|
|
@@ -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,139 @@ 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, colorScheme: "light dark" }
|
|
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
|
+
gridRow: leafGridRow,
|
|
3005
|
+
...styles.header,
|
|
3006
|
+
...styles.pinnedHeader
|
|
2929
3007
|
}
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
}
|
|
2935
|
-
if (column.key === "__expand__") {
|
|
3008
|
+
},
|
|
3009
|
+
"__expand__"
|
|
3010
|
+
);
|
|
3011
|
+
}
|
|
2936
3012
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2937
|
-
|
|
3013
|
+
DraggableHeader_default,
|
|
2938
3014
|
{
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
3015
|
+
column,
|
|
3016
|
+
accentColor,
|
|
3017
|
+
visualIndex,
|
|
3018
|
+
onResizeStart: handleResizeStart,
|
|
3019
|
+
onColumnDragStart: handleColumnDragStart,
|
|
3020
|
+
styles,
|
|
3021
|
+
classNames,
|
|
3022
|
+
gripIcon,
|
|
3023
|
+
hideGripIcon,
|
|
3024
|
+
icons,
|
|
3025
|
+
stickyOffset: columnOffsets.get(column.key),
|
|
3026
|
+
onTogglePin: handleTogglePin,
|
|
3027
|
+
onToggleHide: handleToggleHide,
|
|
3028
|
+
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
3029
|
+
isFirstColumn: visualIndex === firstDataColIndex,
|
|
3030
|
+
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
3031
|
+
onSort: handleSort,
|
|
3032
|
+
filterValue: columnFilters[column.key] ?? "",
|
|
3033
|
+
onFilter: handleColumnFilter,
|
|
3034
|
+
onClearFilter: handleClearFilter,
|
|
3035
|
+
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
3036
|
+
disabledFilters,
|
|
3037
|
+
headerGridRow: leafGridRow,
|
|
3038
|
+
headerHeight: leafHeight,
|
|
3039
|
+
stickyTop: leafStickyTop
|
|
2960
3040
|
},
|
|
2961
|
-
|
|
3041
|
+
column.key
|
|
2962
3042
|
);
|
|
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
|
-
}),
|
|
3043
|
+
});
|
|
3044
|
+
})(),
|
|
2995
3045
|
isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2996
3046
|
"div",
|
|
2997
3047
|
{
|
|
@@ -3139,6 +3189,7 @@ function BoltTable({
|
|
|
3139
3189
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3140
3190
|
"button",
|
|
3141
3191
|
{
|
|
3192
|
+
type: "button",
|
|
3142
3193
|
onClick: () => handlePageChange(1),
|
|
3143
3194
|
disabled: currentPage === 1,
|
|
3144
3195
|
className: classNames.paginationButton ?? "",
|
|
@@ -3164,6 +3215,7 @@ function BoltTable({
|
|
|
3164
3215
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3165
3216
|
"button",
|
|
3166
3217
|
{
|
|
3218
|
+
type: "button",
|
|
3167
3219
|
onClick: () => handlePageChange(currentPage - 1),
|
|
3168
3220
|
disabled: currentPage === 1,
|
|
3169
3221
|
className: classNames.paginationButton ?? "",
|
|
@@ -3207,6 +3259,7 @@ function BoltTable({
|
|
|
3207
3259
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3208
3260
|
"button",
|
|
3209
3261
|
{
|
|
3262
|
+
type: "button",
|
|
3210
3263
|
className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
|
|
3211
3264
|
style: {
|
|
3212
3265
|
display: "inline-flex",
|
|
@@ -3234,6 +3287,7 @@ function BoltTable({
|
|
|
3234
3287
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3235
3288
|
"button",
|
|
3236
3289
|
{
|
|
3290
|
+
type: "button",
|
|
3237
3291
|
onClick: () => handlePageChange(currentPage + 1),
|
|
3238
3292
|
disabled: currentPage === totalPages,
|
|
3239
3293
|
className: classNames.paginationButton ?? "",
|
|
@@ -3259,6 +3313,7 @@ function BoltTable({
|
|
|
3259
3313
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3260
3314
|
"button",
|
|
3261
3315
|
{
|
|
3316
|
+
type: "button",
|
|
3262
3317
|
onClick: () => handlePageChange(totalPages),
|
|
3263
3318
|
disabled: currentPage === totalPages,
|
|
3264
3319
|
className: classNames.paginationButton ?? "",
|
|
@@ -3464,6 +3519,7 @@ function BoltTable({
|
|
|
3464
3519
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3465
3520
|
"button",
|
|
3466
3521
|
{
|
|
3522
|
+
type: "button",
|
|
3467
3523
|
"data-bt-ctx-item": true,
|
|
3468
3524
|
style: btnStyle,
|
|
3469
3525
|
onClick: () => {
|
|
@@ -3492,6 +3548,7 @@ function BoltTable({
|
|
|
3492
3548
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3493
3549
|
"button",
|
|
3494
3550
|
{
|
|
3551
|
+
type: "button",
|
|
3495
3552
|
"data-bt-ctx-item": true,
|
|
3496
3553
|
style: btnStyle,
|
|
3497
3554
|
onClick: () => {
|
|
@@ -3535,6 +3592,7 @@ function BoltTable({
|
|
|
3535
3592
|
hasEdit && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3536
3593
|
"button",
|
|
3537
3594
|
{
|
|
3595
|
+
type: "button",
|
|
3538
3596
|
"data-bt-ctx-item": true,
|
|
3539
3597
|
style: btnStyle,
|
|
3540
3598
|
onClick: () => {
|
|
@@ -3567,6 +3625,7 @@ function BoltTable({
|
|
|
3567
3625
|
hasCopy && menuRecord && menuCol && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3568
3626
|
"button",
|
|
3569
3627
|
{
|
|
3628
|
+
type: "button",
|
|
3570
3629
|
"data-bt-ctx-item": true,
|
|
3571
3630
|
style: btnStyle,
|
|
3572
3631
|
onClick: () => {
|
|
@@ -3599,6 +3658,7 @@ function BoltTable({
|
|
|
3599
3658
|
menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
3600
3659
|
"button",
|
|
3601
3660
|
{
|
|
3661
|
+
type: "button",
|
|
3602
3662
|
"data-bt-ctx-item": "",
|
|
3603
3663
|
disabled: item.disabled,
|
|
3604
3664
|
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";
|
|
@@ -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,139 @@ 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, colorScheme: "light dark" }
|
|
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
|
+
gridRow: leafGridRow,
|
|
2971
|
+
...styles.header,
|
|
2972
|
+
...styles.pinnedHeader
|
|
2895
2973
|
}
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
}
|
|
2901
|
-
if (column.key === "__expand__") {
|
|
2974
|
+
},
|
|
2975
|
+
"__expand__"
|
|
2976
|
+
);
|
|
2977
|
+
}
|
|
2902
2978
|
return /* @__PURE__ */ jsx5(
|
|
2903
|
-
|
|
2979
|
+
DraggableHeader_default,
|
|
2904
2980
|
{
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2981
|
+
column,
|
|
2982
|
+
accentColor,
|
|
2983
|
+
visualIndex,
|
|
2984
|
+
onResizeStart: handleResizeStart,
|
|
2985
|
+
onColumnDragStart: handleColumnDragStart,
|
|
2986
|
+
styles,
|
|
2987
|
+
classNames,
|
|
2988
|
+
gripIcon,
|
|
2989
|
+
hideGripIcon,
|
|
2990
|
+
icons,
|
|
2991
|
+
stickyOffset: columnOffsets.get(column.key),
|
|
2992
|
+
onTogglePin: handleTogglePin,
|
|
2993
|
+
onToggleHide: handleToggleHide,
|
|
2994
|
+
isLastColumn: visualIndex === orderedColumns.length - 1,
|
|
2995
|
+
isFirstColumn: visualIndex === firstDataColIndex,
|
|
2996
|
+
sortDirection: sortState.key === column.key ? sortState.direction : null,
|
|
2997
|
+
onSort: handleSort,
|
|
2998
|
+
filterValue: columnFilters[column.key] ?? "",
|
|
2999
|
+
onFilter: handleColumnFilter,
|
|
3000
|
+
onClearFilter: handleClearFilter,
|
|
3001
|
+
customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
|
|
3002
|
+
disabledFilters,
|
|
3003
|
+
headerGridRow: leafGridRow,
|
|
3004
|
+
headerHeight: leafHeight,
|
|
3005
|
+
stickyTop: leafStickyTop
|
|
2926
3006
|
},
|
|
2927
|
-
|
|
3007
|
+
column.key
|
|
2928
3008
|
);
|
|
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
|
-
}),
|
|
3009
|
+
});
|
|
3010
|
+
})(),
|
|
2961
3011
|
isEmpty ? /* @__PURE__ */ jsx5(
|
|
2962
3012
|
"div",
|
|
2963
3013
|
{
|
|
@@ -3105,6 +3155,7 @@ function BoltTable({
|
|
|
3105
3155
|
/* @__PURE__ */ jsx5(
|
|
3106
3156
|
"button",
|
|
3107
3157
|
{
|
|
3158
|
+
type: "button",
|
|
3108
3159
|
onClick: () => handlePageChange(1),
|
|
3109
3160
|
disabled: currentPage === 1,
|
|
3110
3161
|
className: classNames.paginationButton ?? "",
|
|
@@ -3130,6 +3181,7 @@ function BoltTable({
|
|
|
3130
3181
|
/* @__PURE__ */ jsx5(
|
|
3131
3182
|
"button",
|
|
3132
3183
|
{
|
|
3184
|
+
type: "button",
|
|
3133
3185
|
onClick: () => handlePageChange(currentPage - 1),
|
|
3134
3186
|
disabled: currentPage === 1,
|
|
3135
3187
|
className: classNames.paginationButton ?? "",
|
|
@@ -3173,6 +3225,7 @@ function BoltTable({
|
|
|
3173
3225
|
return /* @__PURE__ */ jsx5(
|
|
3174
3226
|
"button",
|
|
3175
3227
|
{
|
|
3228
|
+
type: "button",
|
|
3176
3229
|
className: `${classNames.paginationButton ?? ""} ${isActivePage ? classNames.paginationActiveButton ?? "" : ""}`.trim() || void 0,
|
|
3177
3230
|
style: {
|
|
3178
3231
|
display: "inline-flex",
|
|
@@ -3200,6 +3253,7 @@ function BoltTable({
|
|
|
3200
3253
|
/* @__PURE__ */ jsx5(
|
|
3201
3254
|
"button",
|
|
3202
3255
|
{
|
|
3256
|
+
type: "button",
|
|
3203
3257
|
onClick: () => handlePageChange(currentPage + 1),
|
|
3204
3258
|
disabled: currentPage === totalPages,
|
|
3205
3259
|
className: classNames.paginationButton ?? "",
|
|
@@ -3225,6 +3279,7 @@ function BoltTable({
|
|
|
3225
3279
|
/* @__PURE__ */ jsx5(
|
|
3226
3280
|
"button",
|
|
3227
3281
|
{
|
|
3282
|
+
type: "button",
|
|
3228
3283
|
onClick: () => handlePageChange(totalPages),
|
|
3229
3284
|
disabled: currentPage === totalPages,
|
|
3230
3285
|
className: classNames.paginationButton ?? "",
|
|
@@ -3430,6 +3485,7 @@ function BoltTable({
|
|
|
3430
3485
|
/* @__PURE__ */ jsxs5(
|
|
3431
3486
|
"button",
|
|
3432
3487
|
{
|
|
3488
|
+
type: "button",
|
|
3433
3489
|
"data-bt-ctx-item": true,
|
|
3434
3490
|
style: btnStyle,
|
|
3435
3491
|
onClick: () => {
|
|
@@ -3458,6 +3514,7 @@ function BoltTable({
|
|
|
3458
3514
|
/* @__PURE__ */ jsxs5(
|
|
3459
3515
|
"button",
|
|
3460
3516
|
{
|
|
3517
|
+
type: "button",
|
|
3461
3518
|
"data-bt-ctx-item": true,
|
|
3462
3519
|
style: btnStyle,
|
|
3463
3520
|
onClick: () => {
|
|
@@ -3501,6 +3558,7 @@ function BoltTable({
|
|
|
3501
3558
|
hasEdit && /* @__PURE__ */ jsxs5(
|
|
3502
3559
|
"button",
|
|
3503
3560
|
{
|
|
3561
|
+
type: "button",
|
|
3504
3562
|
"data-bt-ctx-item": true,
|
|
3505
3563
|
style: btnStyle,
|
|
3506
3564
|
onClick: () => {
|
|
@@ -3533,6 +3591,7 @@ function BoltTable({
|
|
|
3533
3591
|
hasCopy && menuRecord && menuCol && /* @__PURE__ */ jsxs5(
|
|
3534
3592
|
"button",
|
|
3535
3593
|
{
|
|
3594
|
+
type: "button",
|
|
3536
3595
|
"data-bt-ctx-item": true,
|
|
3537
3596
|
style: btnStyle,
|
|
3538
3597
|
onClick: () => {
|
|
@@ -3565,6 +3624,7 @@ function BoltTable({
|
|
|
3565
3624
|
menuCol.columnCellContextMenuItems.map((item) => /* @__PURE__ */ jsxs5(
|
|
3566
3625
|
"button",
|
|
3567
3626
|
{
|
|
3627
|
+
type: "button",
|
|
3568
3628
|
"data-bt-ctx-item": "",
|
|
3569
3629
|
disabled: item.disabled,
|
|
3570
3630
|
style: {
|
package/package.json
CHANGED