bolt-table 0.1.20 → 0.1.22

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +12 -4
  2. package/dist/index.d.ts +12 -4
  3. package/dist/index.js +281 -318
  4. package/dist/index.mjs +281 -318
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -116,10 +116,11 @@ var DraggableHeader = React.memo(
116
116
  onClearFilter,
117
117
  customContextMenuItems,
118
118
  icons,
119
- onColumnDragStart
119
+ onColumnDragStart,
120
+ disabledFilters
120
121
  }) => {
121
122
  const effectivelySortable = isColumnSortable(column);
122
- const effectivelyFilterable = isColumnFilterable(column);
123
+ const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
123
124
  const [contextMenu, setContextMenu] = useState(null);
124
125
  const [showFilterInput, setShowFilterInput] = useState(false);
125
126
  const filterInputRef = useRef(null);
@@ -350,7 +351,7 @@ var DraggableHeader = React.memo(
350
351
  }
351
352
  ),
352
353
  contextMenu && typeof document !== "undefined" && createPortal(
353
- /* @__PURE__ */ jsxs2(
354
+ /* @__PURE__ */ jsx2(
354
355
  "div",
355
356
  {
356
357
  ref: menuRef,
@@ -370,308 +371,229 @@ var DraggableHeader = React.memo(
370
371
  top: `${contextMenu.y}px`
371
372
  },
372
373
  role: "menu",
373
- children: [
374
- effectivelySortable && onSort && /* @__PURE__ */ jsxs2(Fragment, { children: [
375
- /* @__PURE__ */ jsxs2(
376
- "button",
377
- {
378
- "data-bt-ctx-item": "",
379
- style: {
380
- cursor: "pointer",
381
- display: "flex",
382
- width: "100%",
383
- alignItems: "center",
384
- gap: 8,
385
- paddingLeft: 12,
386
- paddingRight: 12,
387
- paddingTop: 6,
388
- paddingBottom: 6,
389
- textAlign: "left",
390
- background: "none",
391
- border: "none",
392
- fontSize: "inherit",
393
- color: "inherit",
394
- fontWeight: sortDirection === "asc" ? 600 : void 0,
395
- ...sortDirection === "asc" ? { color: accentColor } : {}
396
- },
397
- onClick: () => {
398
- onSort(column.key, "asc");
399
- setContextMenu(null);
400
- },
401
- children: [
402
- icons?.sortAsc ?? /* @__PURE__ */ jsx2(ArrowUpAZIcon, { style: { width: 12, height: 12 } }),
403
- "Sort Ascending"
404
- ]
405
- }
406
- ),
407
- /* @__PURE__ */ jsxs2(
408
- "button",
409
- {
410
- "data-bt-ctx-item": "",
411
- style: {
412
- cursor: "pointer",
413
- display: "flex",
414
- width: "100%",
415
- alignItems: "center",
416
- gap: 8,
417
- paddingLeft: 12,
418
- paddingRight: 12,
419
- paddingTop: 6,
420
- paddingBottom: 6,
421
- textAlign: "left",
422
- background: "none",
423
- border: "none",
424
- fontSize: "inherit",
425
- color: "inherit",
426
- fontWeight: sortDirection === "desc" ? 600 : void 0,
427
- ...sortDirection === "desc" ? { color: accentColor } : {}
428
- },
429
- onClick: () => {
430
- onSort(column.key, "desc");
431
- setContextMenu(null);
432
- },
433
- children: [
434
- icons?.sortDesc ?? /* @__PURE__ */ jsx2(ArrowDownAZIcon, { style: { width: 12, height: 12 } }),
435
- "Sort Descending"
436
- ]
437
- }
438
- ),
439
- /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
440
- ] }),
441
- effectivelyFilterable && onFilter && /* @__PURE__ */ jsxs2(Fragment, { children: [
442
- showFilterInput ? /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 4, paddingLeft: 8, paddingRight: 8, paddingTop: 6, paddingBottom: 6 }, children: /* @__PURE__ */ jsx2(
443
- "input",
444
- {
445
- ref: filterInputRef,
446
- type: "text",
447
- autoFocus: true,
448
- defaultValue: filterValue,
449
- placeholder: "Filter...",
450
- style: {
451
- width: "100%",
452
- borderRadius: 4,
453
- border: "1px solid rgba(128,128,128,0.2)",
454
- paddingLeft: 6,
455
- paddingRight: 6,
456
- paddingTop: 2,
457
- paddingBottom: 2,
458
- fontSize: 12,
459
- outline: "none",
460
- background: "inherit",
461
- color: "inherit"
462
- },
463
- onKeyDown: (e) => {
464
- if (e.key === "Enter") {
465
- onFilter(
466
- column.key,
467
- e.target.value
468
- );
469
- setShowFilterInput(false);
374
+ children: (() => {
375
+ const ctxItemBase = {
376
+ cursor: "pointer",
377
+ display: "flex",
378
+ width: "100%",
379
+ alignItems: "center",
380
+ gap: 8,
381
+ paddingLeft: 12,
382
+ paddingRight: 12,
383
+ paddingTop: 6,
384
+ paddingBottom: 6,
385
+ textAlign: "left",
386
+ background: "none",
387
+ border: "none",
388
+ fontSize: "inherit",
389
+ color: "inherit",
390
+ ...styles?.contextMenuItem
391
+ };
392
+ return /* @__PURE__ */ jsxs2(Fragment, { children: [
393
+ effectivelySortable && onSort && /* @__PURE__ */ jsxs2(Fragment, { children: [
394
+ /* @__PURE__ */ jsxs2(
395
+ "button",
396
+ {
397
+ "data-bt-ctx-item": "",
398
+ style: {
399
+ ...ctxItemBase,
400
+ fontWeight: sortDirection === "asc" ? 600 : void 0,
401
+ ...sortDirection === "asc" ? { color: accentColor } : {}
402
+ },
403
+ onClick: () => {
404
+ onSort(column.key, "asc");
470
405
  setContextMenu(null);
406
+ },
407
+ children: [
408
+ icons?.sortAsc ?? /* @__PURE__ */ jsx2(ArrowUpAZIcon, { style: { width: 12, height: 12 } }),
409
+ "Sort Ascending"
410
+ ]
411
+ }
412
+ ),
413
+ /* @__PURE__ */ jsxs2(
414
+ "button",
415
+ {
416
+ "data-bt-ctx-item": "",
417
+ style: {
418
+ ...ctxItemBase,
419
+ fontWeight: sortDirection === "desc" ? 600 : void 0,
420
+ ...sortDirection === "desc" ? { color: accentColor } : {}
421
+ },
422
+ onClick: () => {
423
+ onSort(column.key, "desc");
424
+ setContextMenu(null);
425
+ },
426
+ children: [
427
+ icons?.sortDesc ?? /* @__PURE__ */ jsx2(ArrowDownAZIcon, { style: { width: 12, height: 12 } }),
428
+ "Sort Descending"
429
+ ]
430
+ }
431
+ ),
432
+ /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
433
+ ] }),
434
+ effectivelyFilterable && onFilter && /* @__PURE__ */ jsxs2(Fragment, { children: [
435
+ showFilterInput ? /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 4, paddingLeft: 8, paddingRight: 8, paddingTop: 6, paddingBottom: 6 }, children: /* @__PURE__ */ jsx2(
436
+ "input",
437
+ {
438
+ ref: filterInputRef,
439
+ type: "text",
440
+ autoFocus: true,
441
+ defaultValue: filterValue,
442
+ placeholder: "Filter...",
443
+ style: {
444
+ width: "100%",
445
+ borderRadius: 4,
446
+ border: "1px solid rgba(128,128,128,0.2)",
447
+ paddingLeft: 6,
448
+ paddingRight: 6,
449
+ paddingTop: 2,
450
+ paddingBottom: 2,
451
+ fontSize: 12,
452
+ outline: "none",
453
+ background: "inherit",
454
+ color: "inherit"
455
+ },
456
+ onKeyDown: (e) => {
457
+ if (e.key === "Enter") {
458
+ onFilter(
459
+ column.key,
460
+ e.target.value
461
+ );
462
+ setShowFilterInput(false);
463
+ setContextMenu(null);
464
+ }
465
+ if (e.key === "Escape") {
466
+ setShowFilterInput(false);
467
+ }
471
468
  }
472
- if (e.key === "Escape") {
469
+ }
470
+ ) }) : /* @__PURE__ */ jsxs2(
471
+ "button",
472
+ {
473
+ "data-bt-ctx-item": "",
474
+ style: ctxItemBase,
475
+ onClick: () => {
476
+ setShowFilterInput(true);
477
+ },
478
+ children: [
479
+ icons?.filter ?? /* @__PURE__ */ jsx2(FilterIcon, { style: { width: 12, height: 12 } }),
480
+ filterValue ? `Filtered: "${filterValue}"` : "Filter Column"
481
+ ]
482
+ }
483
+ ),
484
+ filterValue && /* @__PURE__ */ jsxs2(
485
+ "button",
486
+ {
487
+ "data-bt-ctx-item": "",
488
+ style: {
489
+ ...ctxItemBase,
490
+ color: "#ef4444"
491
+ },
492
+ onClick: () => {
493
+ onClearFilter?.(column.key);
473
494
  setShowFilterInput(false);
474
- }
495
+ setContextMenu(null);
496
+ },
497
+ children: [
498
+ icons?.filterClear ?? /* @__PURE__ */ jsx2(FilterXIcon, { style: { width: 12, height: 12 } }),
499
+ "Clear Filter"
500
+ ]
475
501
  }
476
- }
477
- ) }) : /* @__PURE__ */ jsxs2(
478
- "button",
479
- {
480
- "data-bt-ctx-item": "",
481
- style: {
482
- cursor: "pointer",
483
- display: "flex",
484
- width: "100%",
485
- alignItems: "center",
486
- gap: 8,
487
- paddingLeft: 12,
488
- paddingRight: 12,
489
- paddingTop: 6,
490
- paddingBottom: 6,
491
- textAlign: "left",
492
- background: "none",
493
- border: "none",
494
- fontSize: "inherit",
495
- color: "inherit"
496
- },
497
- onClick: () => {
498
- setShowFilterInput(true);
499
- },
500
- children: [
501
- icons?.filter ?? /* @__PURE__ */ jsx2(FilterIcon, { style: { width: 12, height: 12 } }),
502
- filterValue ? `Filtered: "${filterValue}"` : "Filter Column"
503
- ]
504
- }
505
- ),
506
- filterValue && /* @__PURE__ */ jsxs2(
502
+ ),
503
+ /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
504
+ ] }),
505
+ /* @__PURE__ */ jsxs2(
507
506
  "button",
508
507
  {
509
508
  "data-bt-ctx-item": "",
510
- style: {
511
- cursor: "pointer",
512
- display: "flex",
513
- width: "100%",
514
- alignItems: "center",
515
- gap: 8,
516
- paddingLeft: 12,
517
- paddingRight: 12,
518
- paddingTop: 6,
519
- paddingBottom: 6,
520
- textAlign: "left",
521
- background: "none",
522
- border: "none",
523
- fontSize: "inherit",
524
- color: "#ef4444"
525
- },
509
+ style: ctxItemBase,
526
510
  onClick: () => {
527
- onClearFilter?.(column.key);
528
- setShowFilterInput(false);
511
+ onTogglePin?.(
512
+ column.key,
513
+ column.pinned === "left" ? false : "left"
514
+ );
529
515
  setContextMenu(null);
530
516
  },
531
517
  children: [
532
- icons?.filterClear ?? /* @__PURE__ */ jsx2(FilterXIcon, { style: { width: 12, height: 12 } }),
533
- "Clear Filter"
518
+ column.pinned === "left" ? icons?.pinOff ?? /* @__PURE__ */ jsx2(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ jsx2(PinIcon, { style: { width: 12, height: 12 } }),
519
+ column.pinned === "left" ? "Unpin Left" : "Pin Left"
534
520
  ]
535
521
  }
536
522
  ),
537
- /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
538
- ] }),
539
- /* @__PURE__ */ jsxs2(
540
- "button",
541
- {
542
- "data-bt-ctx-item": "",
543
- style: {
544
- cursor: "pointer",
545
- display: "flex",
546
- width: "100%",
547
- alignItems: "center",
548
- gap: 8,
549
- paddingLeft: 12,
550
- paddingRight: 12,
551
- paddingTop: 6,
552
- paddingBottom: 6,
553
- textAlign: "left",
554
- background: "none",
555
- border: "none",
556
- fontSize: "inherit",
557
- color: "inherit"
558
- },
559
- onClick: () => {
560
- onTogglePin?.(
561
- column.key,
562
- column.pinned === "left" ? false : "left"
563
- );
564
- setContextMenu(null);
565
- },
566
- children: [
567
- column.pinned === "left" ? icons?.pinOff ?? /* @__PURE__ */ jsx2(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ jsx2(PinIcon, { style: { width: 12, height: 12 } }),
568
- column.pinned === "left" ? "Unpin Left" : "Pin Left"
569
- ]
570
- }
571
- ),
572
- /* @__PURE__ */ jsxs2(
573
- "button",
574
- {
575
- "data-bt-ctx-item": "",
576
- style: {
577
- cursor: "pointer",
578
- display: "flex",
579
- width: "100%",
580
- alignItems: "center",
581
- gap: 8,
582
- paddingLeft: 12,
583
- paddingRight: 12,
584
- paddingTop: 6,
585
- paddingBottom: 6,
586
- textAlign: "left",
587
- background: "none",
588
- border: "none",
589
- fontSize: "inherit",
590
- color: "inherit"
591
- },
592
- onClick: () => {
593
- onTogglePin?.(
594
- column.key,
595
- column.pinned === "right" ? false : "right"
596
- );
597
- setContextMenu(null);
598
- },
599
- children: [
600
- column.pinned === "right" ? icons?.pinOff ?? /* @__PURE__ */ jsx2(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ jsx2(PinIcon, { style: { width: 12, height: 12 } }),
601
- column.pinned === "right" ? "Unpin Right" : "Pin Right"
602
- ]
603
- }
604
- ),
605
- !isPinned && /* @__PURE__ */ jsxs2(Fragment, { children: [
606
- /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
607
523
  /* @__PURE__ */ jsxs2(
608
524
  "button",
609
525
  {
610
526
  "data-bt-ctx-item": "",
611
- style: {
612
- cursor: "pointer",
613
- display: "flex",
614
- width: "100%",
615
- alignItems: "center",
616
- gap: 8,
617
- paddingLeft: 12,
618
- paddingRight: 12,
619
- paddingTop: 6,
620
- paddingBottom: 6,
621
- textAlign: "left",
622
- background: "none",
623
- border: "none",
624
- fontSize: "inherit",
625
- color: "inherit"
626
- },
527
+ style: ctxItemBase,
627
528
  onClick: () => {
628
- onToggleHide?.(column.key);
529
+ onTogglePin?.(
530
+ column.key,
531
+ column.pinned === "right" ? false : "right"
532
+ );
629
533
  setContextMenu(null);
630
534
  },
631
535
  children: [
632
- icons?.eyeOff ?? /* @__PURE__ */ jsx2(EyeOffIcon, { style: { width: 12, height: 12 } }),
633
- "Hide Column"
536
+ column.pinned === "right" ? icons?.pinOff ?? /* @__PURE__ */ jsx2(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ jsx2(PinIcon, { style: { width: 12, height: 12 } }),
537
+ column.pinned === "right" ? "Unpin Right" : "Pin Right"
634
538
  ]
635
539
  }
636
- )
637
- ] }),
638
- customContextMenuItems && customContextMenuItems.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
639
- /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
640
- customContextMenuItems.map((item) => /* @__PURE__ */ jsxs2(
641
- "button",
642
- {
643
- "data-bt-ctx-item": "",
644
- disabled: item.disabled,
645
- style: {
646
- display: "flex",
647
- width: "100%",
648
- alignItems: "center",
649
- gap: 8,
650
- paddingLeft: 12,
651
- paddingRight: 12,
652
- paddingTop: 6,
653
- paddingBottom: 6,
654
- textAlign: "left",
655
- background: "none",
656
- border: "none",
657
- fontSize: "inherit",
658
- cursor: item.disabled ? "not-allowed" : "pointer",
659
- opacity: item.disabled ? 0.5 : 1,
660
- color: item.danger ? "#ef4444" : "inherit"
661
- },
662
- onClick: () => {
663
- item.onClick(column.key);
664
- setContextMenu(null);
540
+ ),
541
+ !isPinned && /* @__PURE__ */ jsxs2(Fragment, { children: [
542
+ /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
543
+ /* @__PURE__ */ jsxs2(
544
+ "button",
545
+ {
546
+ "data-bt-ctx-item": "",
547
+ style: ctxItemBase,
548
+ onClick: () => {
549
+ onToggleHide?.(column.key);
550
+ setContextMenu(null);
551
+ },
552
+ children: [
553
+ icons?.eyeOff ?? /* @__PURE__ */ jsx2(EyeOffIcon, { style: { width: 12, height: 12 } }),
554
+ "Hide Column"
555
+ ]
556
+ }
557
+ )
558
+ ] }),
559
+ customContextMenuItems && customContextMenuItems.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
560
+ /* @__PURE__ */ jsx2("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
561
+ customContextMenuItems.map((item) => /* @__PURE__ */ jsxs2(
562
+ "button",
563
+ {
564
+ "data-bt-ctx-item": "",
565
+ disabled: item.disabled,
566
+ style: {
567
+ display: "flex",
568
+ width: "100%",
569
+ alignItems: "center",
570
+ gap: 8,
571
+ paddingLeft: 12,
572
+ paddingRight: 12,
573
+ paddingTop: 6,
574
+ paddingBottom: 6,
575
+ textAlign: "left",
576
+ background: "none",
577
+ border: "none",
578
+ fontSize: "inherit",
579
+ cursor: item.disabled ? "not-allowed" : "pointer",
580
+ opacity: item.disabled ? 0.5 : 1,
581
+ color: item.danger ? "#ef4444" : "inherit"
582
+ },
583
+ onClick: () => {
584
+ item.onClick(column.key);
585
+ setContextMenu(null);
586
+ },
587
+ children: [
588
+ item.icon && /* @__PURE__ */ jsx2("span", { style: { display: "flex", width: 12, height: 12, alignItems: "center", justifyContent: "center" }, children: item.icon }),
589
+ item.label
590
+ ]
665
591
  },
666
- children: [
667
- item.icon && /* @__PURE__ */ jsx2("span", { style: { display: "flex", width: 12, height: 12, alignItems: "center", justifyContent: "center" }, children: item.icon }),
668
- item.label
669
- ]
670
- },
671
- item.key
672
- ))
673
- ] })
674
- ]
592
+ item.key
593
+ ))
594
+ ] })
595
+ ] });
596
+ })()
675
597
  }
676
598
  ),
677
599
  document.body
@@ -679,7 +601,7 @@ var DraggableHeader = React.memo(
679
601
  ] });
680
602
  },
681
603
  (prevProps, nextProps) => {
682
- 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;
604
+ 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;
683
605
  }
684
606
  );
685
607
  DraggableHeader.displayName = "DraggableHeader";
@@ -838,6 +760,7 @@ var Cell = React3.memo(
838
760
  rowKey,
839
761
  allData,
840
762
  getRowKey,
763
+ getRawRowKey,
841
764
  accentColor,
842
765
  isLoading
843
766
  }) => {
@@ -880,6 +803,7 @@ var Cell = React3.memo(
880
803
  const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {
881
804
  disabled: false
882
805
  };
806
+ const rawKey = getRawRowKey ? getRawRowKey(record, rowIndex) : rowKey;
883
807
  const content2 = rowSelection.type === "radio" ? /* @__PURE__ */ jsx4(
884
808
  "input",
885
809
  {
@@ -889,7 +813,7 @@ var Cell = React3.memo(
889
813
  onChange: (e) => {
890
814
  e.stopPropagation();
891
815
  rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
892
- rowSelection.onChange?.([rowKey], [record], { type: "single" });
816
+ rowSelection.onChange?.([rawKey], [record], { type: "single" });
893
817
  },
894
818
  style: { cursor: "pointer", accentColor }
895
819
  }
@@ -901,15 +825,12 @@ var Cell = React3.memo(
901
825
  disabled: checkboxProps.disabled,
902
826
  onChange: (e) => {
903
827
  e.stopPropagation();
904
- const currentKeys = (rowSelection.selectedRowKeys ?? []).map(
905
- (k) => String(k)
906
- );
907
- const newSelected = isSelected ? currentKeys.filter((k) => k !== rowKey) : [...currentKeys, rowKey];
908
- const newSelectedRows = (allData ?? []).filter(
909
- (row, idx) => newSelected.includes(
910
- getRowKey ? getRowKey(row, idx) : String(idx)
911
- )
912
- );
828
+ const currentKeys = rowSelection.selectedRowKeys ?? [];
829
+ const newSelected = isSelected ? currentKeys.filter((k) => String(k) !== rowKey) : [...currentKeys, rawKey];
830
+ const newSelectedRows = (allData ?? []).filter((row, idx) => {
831
+ const rk = getRowKey ? getRowKey(row, idx) : String(idx);
832
+ return newSelected.some((k) => String(k) === rk);
833
+ });
913
834
  rowSelection.onSelect?.(
914
835
  record,
915
836
  !isSelected,
@@ -1048,6 +969,7 @@ var TableBody = ({
1048
969
  rowSelection,
1049
970
  normalizedSelectedKeys = [],
1050
971
  getRowKey,
972
+ getRawRowKey,
1051
973
  expandable,
1052
974
  resolvedExpandedKeys,
1053
975
  rowHeight = 40,
@@ -1175,6 +1097,7 @@ var TableBody = ({
1175
1097
  rowKey,
1176
1098
  allData: allDataForSelection,
1177
1099
  getRowKey,
1100
+ getRawRowKey,
1178
1101
  accentColor,
1179
1102
  isLoading: isRowShimmer,
1180
1103
  recordFingerprint
@@ -1356,6 +1279,7 @@ var TableBody = ({
1356
1279
  rowKey: rk,
1357
1280
  allData: allDataForSelection,
1358
1281
  getRowKey,
1282
+ getRawRowKey,
1359
1283
  accentColor,
1360
1284
  isLoading: false,
1361
1285
  recordFingerprint
@@ -1480,6 +1404,7 @@ var TableBody = ({
1480
1404
  rowKey: rk,
1481
1405
  allData: allDataForSelection,
1482
1406
  getRowKey,
1407
+ getRawRowKey,
1483
1408
  accentColor,
1484
1409
  isLoading: false,
1485
1410
  recordFingerprint
@@ -1551,7 +1476,8 @@ function BoltTable({
1551
1476
  layoutLoading,
1552
1477
  emptyRenderer,
1553
1478
  rowClassName,
1554
- rowStyle
1479
+ rowStyle,
1480
+ disabledFilters
1555
1481
  }) {
1556
1482
  const data = useMemo2(() => {
1557
1483
  if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1656,6 +1582,23 @@ function BoltTable({
1656
1582
  },
1657
1583
  [rowKey]
1658
1584
  );
1585
+ const getRawRowKey = useCallback(
1586
+ (record, index) => {
1587
+ if (record == null) return index;
1588
+ try {
1589
+ if (typeof rowKey === "function") return rowKey(record);
1590
+ if (typeof rowKey === "string") {
1591
+ const val = record[rowKey];
1592
+ if (typeof val === "number" || typeof val === "string") return val;
1593
+ return val != null ? String(val) : index;
1594
+ }
1595
+ } catch {
1596
+ return index;
1597
+ }
1598
+ return index;
1599
+ },
1600
+ [rowKey]
1601
+ );
1659
1602
  const normalizedSelectedKeys = useMemo2(
1660
1603
  () => {
1661
1604
  const keys = rowSelection?.selectedRowKeys;
@@ -1982,12 +1925,11 @@ function BoltTable({
1982
1925
  if (col.key === "__select__" || col.key === "__expand__") return col;
1983
1926
  const latest = latestMap.get(col.key);
1984
1927
  if (!latest) return col;
1985
- if (col.render === latest.render && col.shimmerRender === latest.shimmerRender)
1986
- return col;
1987
1928
  return {
1988
- ...col,
1989
- render: latest.render,
1990
- shimmerRender: latest.shimmerRender
1929
+ ...latest,
1930
+ width: col.width,
1931
+ hidden: col.hidden,
1932
+ pinned: col.pinned
1991
1933
  };
1992
1934
  });
1993
1935
  }, [orderedColumns, initialColumns]);
@@ -2033,6 +1975,24 @@ function BoltTable({
2033
1975
  const column = columns.find((col) => col.key === columnKey);
2034
1976
  if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
2035
1977
  };
1978
+ const [internalRowPinning, setInternalRowPinning] = useState2({ top: [], bottom: [] });
1979
+ const resolvedRowPinning = rowPinning === true ? internalRowPinning : rowPinning && typeof rowPinning === "object" ? rowPinning : void 0;
1980
+ const handleRowPin = useCallback((rk, pinned) => {
1981
+ if (onRowPin) {
1982
+ onRowPin(rk, pinned);
1983
+ return;
1984
+ }
1985
+ if (rowPinning === true) {
1986
+ setInternalRowPinning((prev) => {
1987
+ const rkStr = String(rk);
1988
+ const newTop = (prev.top ?? []).filter((k) => String(k) !== rkStr);
1989
+ const newBottom = (prev.bottom ?? []).filter((k) => String(k) !== rkStr);
1990
+ if (pinned === "top") newTop.push(rk);
1991
+ else if (pinned === "bottom") newBottom.push(rk);
1992
+ return { top: newTop, bottom: newBottom };
1993
+ });
1994
+ }
1995
+ }, [onRowPin, rowPinning]);
2036
1996
  const onSortChangeRef = useRef4(onSortChange);
2037
1997
  onSortChangeRef.current = onSortChange;
2038
1998
  const [sortState, setSortState] = useState2({ key: "", direction: null });
@@ -2133,15 +2093,15 @@ function BoltTable({
2133
2093
  return result;
2134
2094
  }, [data, sortState, columnFilters]);
2135
2095
  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = useMemo2(() => {
2136
- if (!rowPinning || !rowPinning.top?.length && !rowPinning.bottom?.length) {
2096
+ if (!resolvedRowPinning || !resolvedRowPinning.top?.length && !resolvedRowPinning.bottom?.length) {
2137
2097
  return {
2138
2098
  pinnedTopRows: [],
2139
2099
  pinnedBottomRows: [],
2140
2100
  unpinnedProcessedData: processedData
2141
2101
  };
2142
2102
  }
2143
- const topKeySet = new Set((rowPinning.top ?? []).map(String));
2144
- const bottomKeySet = new Set((rowPinning.bottom ?? []).map(String));
2103
+ const topKeySet = new Set((resolvedRowPinning.top ?? []).map(String));
2104
+ const bottomKeySet = new Set((resolvedRowPinning.bottom ?? []).map(String));
2145
2105
  const topMap = /* @__PURE__ */ new Map();
2146
2106
  const bottomMap = /* @__PURE__ */ new Map();
2147
2107
  const rest = [];
@@ -2152,23 +2112,23 @@ function BoltTable({
2152
2112
  else if (bottomKeySet.has(key)) bottomMap.set(key, row);
2153
2113
  else rest.push(row);
2154
2114
  });
2155
- const orderedTop = (rowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
2156
- const orderedBottom = (rowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
2115
+ const orderedTop = (resolvedRowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
2116
+ const orderedBottom = (resolvedRowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
2157
2117
  return {
2158
2118
  pinnedTopRows: orderedTop,
2159
2119
  pinnedBottomRows: orderedBottom,
2160
2120
  unpinnedProcessedData: rest
2161
2121
  };
2162
- }, [processedData, rowPinning, getRowKey]);
2122
+ }, [processedData, resolvedRowPinning, getRowKey]);
2163
2123
  const pinnedTopHeight = pinnedTopRows.length * rowHeight;
2164
2124
  const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
2165
2125
  const pinnedTopKeySet = useMemo2(
2166
- () => new Set((rowPinning?.top ?? []).map(String)),
2167
- [rowPinning?.top]
2126
+ () => new Set((resolvedRowPinning?.top ?? []).map(String)),
2127
+ [resolvedRowPinning?.top]
2168
2128
  );
2169
2129
  const pinnedBottomKeySet = useMemo2(
2170
- () => new Set((rowPinning?.bottom ?? []).map(String)),
2171
- [rowPinning?.bottom]
2130
+ () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
2131
+ [resolvedRowPinning?.bottom]
2172
2132
  );
2173
2133
  const [cellContextMenu, setCellContextMenu] = useState2(null);
2174
2134
  const cellMenuRef = useRef4(null);
@@ -2590,8 +2550,8 @@ function BoltTable({
2590
2550
  const col = freshOrderedColumns.find(
2591
2551
  (c) => c.key === ck
2592
2552
  );
2593
- const hasCopy = col?.copy;
2594
- const hasRowPin = !!onRowPin;
2553
+ const hasCopy = !!col?.copy;
2554
+ const hasRowPin = !!rowPinning;
2595
2555
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2596
2556
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2597
2557
  e.preventDefault();
@@ -2619,8 +2579,8 @@ function BoltTable({
2619
2579
  const col = freshOrderedColumns.find(
2620
2580
  (c) => c.key === ck
2621
2581
  );
2622
- const hasCopy = col?.copy;
2623
- const hasRowPin = !!onRowPin;
2582
+ const hasCopy = !!col?.copy;
2583
+ const hasRowPin = !!rowPinning;
2624
2584
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2625
2585
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2626
2586
  setCellContextMenu({
@@ -2680,7 +2640,7 @@ function BoltTable({
2680
2640
  onChange: (e) => {
2681
2641
  if (e.target.checked) {
2682
2642
  const allKeys = data.map(
2683
- (row, idx) => getRowKey(row, idx)
2643
+ (row, idx) => getRawRowKey(row, idx)
2684
2644
  );
2685
2645
  rowSelection.onSelectAll?.(
2686
2646
  true,
@@ -2754,7 +2714,8 @@ function BoltTable({
2754
2714
  filterValue: columnFilters[column.key] ?? "",
2755
2715
  onFilter: handleColumnFilter,
2756
2716
  onClearFilter: handleClearFilter,
2757
- customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
2717
+ customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
2718
+ disabledFilters
2758
2719
  },
2759
2720
  column.key
2760
2721
  );
@@ -2809,6 +2770,7 @@ function BoltTable({
2809
2770
  rowSelection: !showShimmer ? rowSelection : void 0,
2810
2771
  normalizedSelectedKeys,
2811
2772
  getRowKey,
2773
+ getRawRowKey,
2812
2774
  expandable: !showShimmer ? expandable : void 0,
2813
2775
  resolvedExpandedKeys,
2814
2776
  rowHeight,
@@ -3137,8 +3099,8 @@ function BoltTable({
3137
3099
  const isPinnedBottom = pinnedBottomKeySet.has(
3138
3100
  cellContextMenu.rowKey
3139
3101
  );
3140
- const hasCopy = menuCol?.copy;
3141
- const hasRowPin = !!onRowPin;
3102
+ const hasCopy = !!menuCol?.copy;
3103
+ const hasRowPin = !!rowPinning;
3142
3104
  let menuRecord;
3143
3105
  let menuRowIndex = 0;
3144
3106
  const allRows = [
@@ -3167,7 +3129,8 @@ function BoltTable({
3167
3129
  fontSize: 12,
3168
3130
  cursor: "pointer",
3169
3131
  color: "inherit",
3170
- whiteSpace: "nowrap"
3132
+ whiteSpace: "nowrap",
3133
+ ...styles.contextMenuItem
3171
3134
  };
3172
3135
  return createPortal2(
3173
3136
  /* @__PURE__ */ jsxs5(
@@ -3197,7 +3160,7 @@ function BoltTable({
3197
3160
  "data-bt-ctx-item": true,
3198
3161
  style: btnStyle,
3199
3162
  onClick: () => {
3200
- onRowPin(
3163
+ handleRowPin(
3201
3164
  cellContextMenu.rowKey,
3202
3165
  isPinnedTop ? false : "top"
3203
3166
  );
@@ -3225,7 +3188,7 @@ function BoltTable({
3225
3188
  "data-bt-ctx-item": true,
3226
3189
  style: btnStyle,
3227
3190
  onClick: () => {
3228
- onRowPin(
3191
+ handleRowPin(
3229
3192
  cellContextMenu.rowKey,
3230
3193
  isPinnedBottom ? false : "bottom"
3231
3194
  );