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.js CHANGED
@@ -150,10 +150,11 @@ var DraggableHeader = import_react.default.memo(
150
150
  onClearFilter,
151
151
  customContextMenuItems,
152
152
  icons,
153
- onColumnDragStart
153
+ onColumnDragStart,
154
+ disabledFilters
154
155
  }) => {
155
156
  const effectivelySortable = isColumnSortable(column);
156
- const effectivelyFilterable = isColumnFilterable(column);
157
+ const effectivelyFilterable = !disabledFilters && isColumnFilterable(column);
157
158
  const [contextMenu, setContextMenu] = (0, import_react.useState)(null);
158
159
  const [showFilterInput, setShowFilterInput] = (0, import_react.useState)(false);
159
160
  const filterInputRef = (0, import_react.useRef)(null);
@@ -384,7 +385,7 @@ var DraggableHeader = import_react.default.memo(
384
385
  }
385
386
  ),
386
387
  contextMenu && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
387
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
388
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
388
389
  "div",
389
390
  {
390
391
  ref: menuRef,
@@ -404,308 +405,229 @@ var DraggableHeader = import_react.default.memo(
404
405
  top: `${contextMenu.y}px`
405
406
  },
406
407
  role: "menu",
407
- children: [
408
- effectivelySortable && onSort && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
409
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
410
- "button",
411
- {
412
- "data-bt-ctx-item": "",
413
- style: {
414
- cursor: "pointer",
415
- display: "flex",
416
- width: "100%",
417
- alignItems: "center",
418
- gap: 8,
419
- paddingLeft: 12,
420
- paddingRight: 12,
421
- paddingTop: 6,
422
- paddingBottom: 6,
423
- textAlign: "left",
424
- background: "none",
425
- border: "none",
426
- fontSize: "inherit",
427
- color: "inherit",
428
- fontWeight: sortDirection === "asc" ? 600 : void 0,
429
- ...sortDirection === "asc" ? { color: accentColor } : {}
430
- },
431
- onClick: () => {
432
- onSort(column.key, "asc");
433
- setContextMenu(null);
434
- },
435
- children: [
436
- icons?.sortAsc ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowUpAZIcon, { style: { width: 12, height: 12 } }),
437
- "Sort Ascending"
438
- ]
439
- }
440
- ),
441
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
442
- "button",
443
- {
444
- "data-bt-ctx-item": "",
445
- style: {
446
- cursor: "pointer",
447
- display: "flex",
448
- width: "100%",
449
- alignItems: "center",
450
- gap: 8,
451
- paddingLeft: 12,
452
- paddingRight: 12,
453
- paddingTop: 6,
454
- paddingBottom: 6,
455
- textAlign: "left",
456
- background: "none",
457
- border: "none",
458
- fontSize: "inherit",
459
- color: "inherit",
460
- fontWeight: sortDirection === "desc" ? 600 : void 0,
461
- ...sortDirection === "desc" ? { color: accentColor } : {}
462
- },
463
- onClick: () => {
464
- onSort(column.key, "desc");
465
- setContextMenu(null);
466
- },
467
- children: [
468
- icons?.sortDesc ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowDownAZIcon, { style: { width: 12, height: 12 } }),
469
- "Sort Descending"
470
- ]
471
- }
472
- ),
473
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
474
- ] }),
475
- effectivelyFilterable && onFilter && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
476
- showFilterInput ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 4, paddingLeft: 8, paddingRight: 8, paddingTop: 6, paddingBottom: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
477
- "input",
478
- {
479
- ref: filterInputRef,
480
- type: "text",
481
- autoFocus: true,
482
- defaultValue: filterValue,
483
- placeholder: "Filter...",
484
- style: {
485
- width: "100%",
486
- borderRadius: 4,
487
- border: "1px solid rgba(128,128,128,0.2)",
488
- paddingLeft: 6,
489
- paddingRight: 6,
490
- paddingTop: 2,
491
- paddingBottom: 2,
492
- fontSize: 12,
493
- outline: "none",
494
- background: "inherit",
495
- color: "inherit"
496
- },
497
- onKeyDown: (e) => {
498
- if (e.key === "Enter") {
499
- onFilter(
500
- column.key,
501
- e.target.value
502
- );
503
- setShowFilterInput(false);
408
+ children: (() => {
409
+ const ctxItemBase = {
410
+ cursor: "pointer",
411
+ display: "flex",
412
+ width: "100%",
413
+ alignItems: "center",
414
+ gap: 8,
415
+ paddingLeft: 12,
416
+ paddingRight: 12,
417
+ paddingTop: 6,
418
+ paddingBottom: 6,
419
+ textAlign: "left",
420
+ background: "none",
421
+ border: "none",
422
+ fontSize: "inherit",
423
+ color: "inherit",
424
+ ...styles?.contextMenuItem
425
+ };
426
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
427
+ effectivelySortable && onSort && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
428
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
429
+ "button",
430
+ {
431
+ "data-bt-ctx-item": "",
432
+ style: {
433
+ ...ctxItemBase,
434
+ fontWeight: sortDirection === "asc" ? 600 : void 0,
435
+ ...sortDirection === "asc" ? { color: accentColor } : {}
436
+ },
437
+ onClick: () => {
438
+ onSort(column.key, "asc");
504
439
  setContextMenu(null);
440
+ },
441
+ children: [
442
+ icons?.sortAsc ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowUpAZIcon, { style: { width: 12, height: 12 } }),
443
+ "Sort Ascending"
444
+ ]
445
+ }
446
+ ),
447
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
448
+ "button",
449
+ {
450
+ "data-bt-ctx-item": "",
451
+ style: {
452
+ ...ctxItemBase,
453
+ fontWeight: sortDirection === "desc" ? 600 : void 0,
454
+ ...sortDirection === "desc" ? { color: accentColor } : {}
455
+ },
456
+ onClick: () => {
457
+ onSort(column.key, "desc");
458
+ setContextMenu(null);
459
+ },
460
+ children: [
461
+ icons?.sortDesc ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowDownAZIcon, { style: { width: 12, height: 12 } }),
462
+ "Sort Descending"
463
+ ]
464
+ }
465
+ ),
466
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
467
+ ] }),
468
+ effectivelyFilterable && onFilter && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
469
+ showFilterInput ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 4, paddingLeft: 8, paddingRight: 8, paddingTop: 6, paddingBottom: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
470
+ "input",
471
+ {
472
+ ref: filterInputRef,
473
+ type: "text",
474
+ autoFocus: true,
475
+ defaultValue: filterValue,
476
+ placeholder: "Filter...",
477
+ style: {
478
+ width: "100%",
479
+ borderRadius: 4,
480
+ border: "1px solid rgba(128,128,128,0.2)",
481
+ paddingLeft: 6,
482
+ paddingRight: 6,
483
+ paddingTop: 2,
484
+ paddingBottom: 2,
485
+ fontSize: 12,
486
+ outline: "none",
487
+ background: "inherit",
488
+ color: "inherit"
489
+ },
490
+ onKeyDown: (e) => {
491
+ if (e.key === "Enter") {
492
+ onFilter(
493
+ column.key,
494
+ e.target.value
495
+ );
496
+ setShowFilterInput(false);
497
+ setContextMenu(null);
498
+ }
499
+ if (e.key === "Escape") {
500
+ setShowFilterInput(false);
501
+ }
505
502
  }
506
- if (e.key === "Escape") {
503
+ }
504
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
505
+ "button",
506
+ {
507
+ "data-bt-ctx-item": "",
508
+ style: ctxItemBase,
509
+ onClick: () => {
510
+ setShowFilterInput(true);
511
+ },
512
+ children: [
513
+ icons?.filter ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterIcon, { style: { width: 12, height: 12 } }),
514
+ filterValue ? `Filtered: "${filterValue}"` : "Filter Column"
515
+ ]
516
+ }
517
+ ),
518
+ filterValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
519
+ "button",
520
+ {
521
+ "data-bt-ctx-item": "",
522
+ style: {
523
+ ...ctxItemBase,
524
+ color: "#ef4444"
525
+ },
526
+ onClick: () => {
527
+ onClearFilter?.(column.key);
507
528
  setShowFilterInput(false);
508
- }
529
+ setContextMenu(null);
530
+ },
531
+ children: [
532
+ icons?.filterClear ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterXIcon, { style: { width: 12, height: 12 } }),
533
+ "Clear Filter"
534
+ ]
509
535
  }
510
- }
511
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
512
- "button",
513
- {
514
- "data-bt-ctx-item": "",
515
- style: {
516
- cursor: "pointer",
517
- display: "flex",
518
- width: "100%",
519
- alignItems: "center",
520
- gap: 8,
521
- paddingLeft: 12,
522
- paddingRight: 12,
523
- paddingTop: 6,
524
- paddingBottom: 6,
525
- textAlign: "left",
526
- background: "none",
527
- border: "none",
528
- fontSize: "inherit",
529
- color: "inherit"
530
- },
531
- onClick: () => {
532
- setShowFilterInput(true);
533
- },
534
- children: [
535
- icons?.filter ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterIcon, { style: { width: 12, height: 12 } }),
536
- filterValue ? `Filtered: "${filterValue}"` : "Filter Column"
537
- ]
538
- }
539
- ),
540
- filterValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
536
+ ),
537
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
538
+ ] }),
539
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
541
540
  "button",
542
541
  {
543
542
  "data-bt-ctx-item": "",
544
- style: {
545
- cursor: "pointer",
546
- display: "flex",
547
- width: "100%",
548
- alignItems: "center",
549
- gap: 8,
550
- paddingLeft: 12,
551
- paddingRight: 12,
552
- paddingTop: 6,
553
- paddingBottom: 6,
554
- textAlign: "left",
555
- background: "none",
556
- border: "none",
557
- fontSize: "inherit",
558
- color: "#ef4444"
559
- },
543
+ style: ctxItemBase,
560
544
  onClick: () => {
561
- onClearFilter?.(column.key);
562
- setShowFilterInput(false);
545
+ onTogglePin?.(
546
+ column.key,
547
+ column.pinned === "left" ? false : "left"
548
+ );
563
549
  setContextMenu(null);
564
550
  },
565
551
  children: [
566
- icons?.filterClear ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterXIcon, { style: { width: 12, height: 12 } }),
567
- "Clear Filter"
552
+ column.pinned === "left" ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinIcon, { style: { width: 12, height: 12 } }),
553
+ column.pinned === "left" ? "Unpin Left" : "Pin Left"
568
554
  ]
569
555
  }
570
556
  ),
571
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } })
572
- ] }),
573
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
574
- "button",
575
- {
576
- "data-bt-ctx-item": "",
577
- style: {
578
- cursor: "pointer",
579
- display: "flex",
580
- width: "100%",
581
- alignItems: "center",
582
- gap: 8,
583
- paddingLeft: 12,
584
- paddingRight: 12,
585
- paddingTop: 6,
586
- paddingBottom: 6,
587
- textAlign: "left",
588
- background: "none",
589
- border: "none",
590
- fontSize: "inherit",
591
- color: "inherit"
592
- },
593
- onClick: () => {
594
- onTogglePin?.(
595
- column.key,
596
- column.pinned === "left" ? false : "left"
597
- );
598
- setContextMenu(null);
599
- },
600
- children: [
601
- column.pinned === "left" ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinIcon, { style: { width: 12, height: 12 } }),
602
- column.pinned === "left" ? "Unpin Left" : "Pin Left"
603
- ]
604
- }
605
- ),
606
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
607
- "button",
608
- {
609
- "data-bt-ctx-item": "",
610
- style: {
611
- cursor: "pointer",
612
- display: "flex",
613
- width: "100%",
614
- alignItems: "center",
615
- gap: 8,
616
- paddingLeft: 12,
617
- paddingRight: 12,
618
- paddingTop: 6,
619
- paddingBottom: 6,
620
- textAlign: "left",
621
- background: "none",
622
- border: "none",
623
- fontSize: "inherit",
624
- color: "inherit"
625
- },
626
- onClick: () => {
627
- onTogglePin?.(
628
- column.key,
629
- column.pinned === "right" ? false : "right"
630
- );
631
- setContextMenu(null);
632
- },
633
- children: [
634
- column.pinned === "right" ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinIcon, { style: { width: 12, height: 12 } }),
635
- column.pinned === "right" ? "Unpin Right" : "Pin Right"
636
- ]
637
- }
638
- ),
639
- !isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
640
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
641
557
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
642
558
  "button",
643
559
  {
644
560
  "data-bt-ctx-item": "",
645
- style: {
646
- cursor: "pointer",
647
- display: "flex",
648
- width: "100%",
649
- alignItems: "center",
650
- gap: 8,
651
- paddingLeft: 12,
652
- paddingRight: 12,
653
- paddingTop: 6,
654
- paddingBottom: 6,
655
- textAlign: "left",
656
- background: "none",
657
- border: "none",
658
- fontSize: "inherit",
659
- color: "inherit"
660
- },
561
+ style: ctxItemBase,
661
562
  onClick: () => {
662
- onToggleHide?.(column.key);
563
+ onTogglePin?.(
564
+ column.key,
565
+ column.pinned === "right" ? false : "right"
566
+ );
663
567
  setContextMenu(null);
664
568
  },
665
569
  children: [
666
- icons?.eyeOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EyeOffIcon, { style: { width: 12, height: 12 } }),
667
- "Hide Column"
570
+ column.pinned === "right" ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinOffIcon, { style: { width: 12, height: 12 } }) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PinIcon, { style: { width: 12, height: 12 } }),
571
+ column.pinned === "right" ? "Unpin Right" : "Pin Right"
668
572
  ]
669
573
  }
670
- )
671
- ] }),
672
- customContextMenuItems && customContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
673
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
674
- customContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
675
- "button",
676
- {
677
- "data-bt-ctx-item": "",
678
- disabled: item.disabled,
679
- style: {
680
- display: "flex",
681
- width: "100%",
682
- alignItems: "center",
683
- gap: 8,
684
- paddingLeft: 12,
685
- paddingRight: 12,
686
- paddingTop: 6,
687
- paddingBottom: 6,
688
- textAlign: "left",
689
- background: "none",
690
- border: "none",
691
- fontSize: "inherit",
692
- cursor: item.disabled ? "not-allowed" : "pointer",
693
- opacity: item.disabled ? 0.5 : 1,
694
- color: item.danger ? "#ef4444" : "inherit"
695
- },
696
- onClick: () => {
697
- item.onClick(column.key);
698
- setContextMenu(null);
574
+ ),
575
+ !isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
576
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
577
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
578
+ "button",
579
+ {
580
+ "data-bt-ctx-item": "",
581
+ style: ctxItemBase,
582
+ onClick: () => {
583
+ onToggleHide?.(column.key);
584
+ setContextMenu(null);
585
+ },
586
+ children: [
587
+ icons?.eyeOff ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EyeOffIcon, { style: { width: 12, height: 12 } }),
588
+ "Hide Column"
589
+ ]
590
+ }
591
+ )
592
+ ] }),
593
+ customContextMenuItems && customContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
594
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 4, marginBottom: 4, borderTop: "1px solid rgba(128,128,128,0.2)" } }),
595
+ customContextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
596
+ "button",
597
+ {
598
+ "data-bt-ctx-item": "",
599
+ disabled: item.disabled,
600
+ style: {
601
+ display: "flex",
602
+ width: "100%",
603
+ alignItems: "center",
604
+ gap: 8,
605
+ paddingLeft: 12,
606
+ paddingRight: 12,
607
+ paddingTop: 6,
608
+ paddingBottom: 6,
609
+ textAlign: "left",
610
+ background: "none",
611
+ border: "none",
612
+ fontSize: "inherit",
613
+ cursor: item.disabled ? "not-allowed" : "pointer",
614
+ opacity: item.disabled ? 0.5 : 1,
615
+ color: item.danger ? "#ef4444" : "inherit"
616
+ },
617
+ onClick: () => {
618
+ item.onClick(column.key);
619
+ setContextMenu(null);
620
+ },
621
+ children: [
622
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "flex", width: 12, height: 12, alignItems: "center", justifyContent: "center" }, children: item.icon }),
623
+ item.label
624
+ ]
699
625
  },
700
- children: [
701
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "flex", width: 12, height: 12, alignItems: "center", justifyContent: "center" }, children: item.icon }),
702
- item.label
703
- ]
704
- },
705
- item.key
706
- ))
707
- ] })
708
- ]
626
+ item.key
627
+ ))
628
+ ] })
629
+ ] });
630
+ })()
709
631
  }
710
632
  ),
711
633
  document.body
@@ -713,7 +635,7 @@ var DraggableHeader = import_react.default.memo(
713
635
  ] });
714
636
  },
715
637
  (prevProps, nextProps) => {
716
- 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;
638
+ 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;
717
639
  }
718
640
  );
719
641
  DraggableHeader.displayName = "DraggableHeader";
@@ -872,6 +794,7 @@ var Cell = import_react3.default.memo(
872
794
  rowKey,
873
795
  allData,
874
796
  getRowKey,
797
+ getRawRowKey,
875
798
  accentColor,
876
799
  isLoading
877
800
  }) => {
@@ -914,6 +837,7 @@ var Cell = import_react3.default.memo(
914
837
  const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {
915
838
  disabled: false
916
839
  };
840
+ const rawKey = getRawRowKey ? getRawRowKey(record, rowIndex) : rowKey;
917
841
  const content2 = rowSelection.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
918
842
  "input",
919
843
  {
@@ -923,7 +847,7 @@ var Cell = import_react3.default.memo(
923
847
  onChange: (e) => {
924
848
  e.stopPropagation();
925
849
  rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
926
- rowSelection.onChange?.([rowKey], [record], { type: "single" });
850
+ rowSelection.onChange?.([rawKey], [record], { type: "single" });
927
851
  },
928
852
  style: { cursor: "pointer", accentColor }
929
853
  }
@@ -935,15 +859,12 @@ var Cell = import_react3.default.memo(
935
859
  disabled: checkboxProps.disabled,
936
860
  onChange: (e) => {
937
861
  e.stopPropagation();
938
- const currentKeys = (rowSelection.selectedRowKeys ?? []).map(
939
- (k) => String(k)
940
- );
941
- const newSelected = isSelected ? currentKeys.filter((k) => k !== rowKey) : [...currentKeys, rowKey];
942
- const newSelectedRows = (allData ?? []).filter(
943
- (row, idx) => newSelected.includes(
944
- getRowKey ? getRowKey(row, idx) : String(idx)
945
- )
946
- );
862
+ const currentKeys = rowSelection.selectedRowKeys ?? [];
863
+ const newSelected = isSelected ? currentKeys.filter((k) => String(k) !== rowKey) : [...currentKeys, rawKey];
864
+ const newSelectedRows = (allData ?? []).filter((row, idx) => {
865
+ const rk = getRowKey ? getRowKey(row, idx) : String(idx);
866
+ return newSelected.some((k) => String(k) === rk);
867
+ });
947
868
  rowSelection.onSelect?.(
948
869
  record,
949
870
  !isSelected,
@@ -1082,6 +1003,7 @@ var TableBody = ({
1082
1003
  rowSelection,
1083
1004
  normalizedSelectedKeys = [],
1084
1005
  getRowKey,
1006
+ getRawRowKey,
1085
1007
  expandable,
1086
1008
  resolvedExpandedKeys,
1087
1009
  rowHeight = 40,
@@ -1209,6 +1131,7 @@ var TableBody = ({
1209
1131
  rowKey,
1210
1132
  allData: allDataForSelection,
1211
1133
  getRowKey,
1134
+ getRawRowKey,
1212
1135
  accentColor,
1213
1136
  isLoading: isRowShimmer,
1214
1137
  recordFingerprint
@@ -1390,6 +1313,7 @@ var TableBody = ({
1390
1313
  rowKey: rk,
1391
1314
  allData: allDataForSelection,
1392
1315
  getRowKey,
1316
+ getRawRowKey,
1393
1317
  accentColor,
1394
1318
  isLoading: false,
1395
1319
  recordFingerprint
@@ -1514,6 +1438,7 @@ var TableBody = ({
1514
1438
  rowKey: rk,
1515
1439
  allData: allDataForSelection,
1516
1440
  getRowKey,
1441
+ getRawRowKey,
1517
1442
  accentColor,
1518
1443
  isLoading: false,
1519
1444
  recordFingerprint
@@ -1585,7 +1510,8 @@ function BoltTable({
1585
1510
  layoutLoading,
1586
1511
  emptyRenderer,
1587
1512
  rowClassName,
1588
- rowStyle
1513
+ rowStyle,
1514
+ disabledFilters
1589
1515
  }) {
1590
1516
  const data = (0, import_react4.useMemo)(() => {
1591
1517
  if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -1690,6 +1616,23 @@ function BoltTable({
1690
1616
  },
1691
1617
  [rowKey]
1692
1618
  );
1619
+ const getRawRowKey = (0, import_react4.useCallback)(
1620
+ (record, index) => {
1621
+ if (record == null) return index;
1622
+ try {
1623
+ if (typeof rowKey === "function") return rowKey(record);
1624
+ if (typeof rowKey === "string") {
1625
+ const val = record[rowKey];
1626
+ if (typeof val === "number" || typeof val === "string") return val;
1627
+ return val != null ? String(val) : index;
1628
+ }
1629
+ } catch {
1630
+ return index;
1631
+ }
1632
+ return index;
1633
+ },
1634
+ [rowKey]
1635
+ );
1693
1636
  const normalizedSelectedKeys = (0, import_react4.useMemo)(
1694
1637
  () => {
1695
1638
  const keys = rowSelection?.selectedRowKeys;
@@ -2016,12 +1959,11 @@ function BoltTable({
2016
1959
  if (col.key === "__select__" || col.key === "__expand__") return col;
2017
1960
  const latest = latestMap.get(col.key);
2018
1961
  if (!latest) return col;
2019
- if (col.render === latest.render && col.shimmerRender === latest.shimmerRender)
2020
- return col;
2021
1962
  return {
2022
- ...col,
2023
- render: latest.render,
2024
- shimmerRender: latest.shimmerRender
1963
+ ...latest,
1964
+ width: col.width,
1965
+ hidden: col.hidden,
1966
+ pinned: col.pinned
2025
1967
  };
2026
1968
  });
2027
1969
  }, [orderedColumns, initialColumns]);
@@ -2067,6 +2009,24 @@ function BoltTable({
2067
2009
  const column = columns.find((col) => col.key === columnKey);
2068
2010
  if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
2069
2011
  };
2012
+ const [internalRowPinning, setInternalRowPinning] = (0, import_react4.useState)({ top: [], bottom: [] });
2013
+ const resolvedRowPinning = rowPinning === true ? internalRowPinning : rowPinning && typeof rowPinning === "object" ? rowPinning : void 0;
2014
+ const handleRowPin = (0, import_react4.useCallback)((rk, pinned) => {
2015
+ if (onRowPin) {
2016
+ onRowPin(rk, pinned);
2017
+ return;
2018
+ }
2019
+ if (rowPinning === true) {
2020
+ setInternalRowPinning((prev) => {
2021
+ const rkStr = String(rk);
2022
+ const newTop = (prev.top ?? []).filter((k) => String(k) !== rkStr);
2023
+ const newBottom = (prev.bottom ?? []).filter((k) => String(k) !== rkStr);
2024
+ if (pinned === "top") newTop.push(rk);
2025
+ else if (pinned === "bottom") newBottom.push(rk);
2026
+ return { top: newTop, bottom: newBottom };
2027
+ });
2028
+ }
2029
+ }, [onRowPin, rowPinning]);
2070
2030
  const onSortChangeRef = (0, import_react4.useRef)(onSortChange);
2071
2031
  onSortChangeRef.current = onSortChange;
2072
2032
  const [sortState, setSortState] = (0, import_react4.useState)({ key: "", direction: null });
@@ -2167,15 +2127,15 @@ function BoltTable({
2167
2127
  return result;
2168
2128
  }, [data, sortState, columnFilters]);
2169
2129
  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = (0, import_react4.useMemo)(() => {
2170
- if (!rowPinning || !rowPinning.top?.length && !rowPinning.bottom?.length) {
2130
+ if (!resolvedRowPinning || !resolvedRowPinning.top?.length && !resolvedRowPinning.bottom?.length) {
2171
2131
  return {
2172
2132
  pinnedTopRows: [],
2173
2133
  pinnedBottomRows: [],
2174
2134
  unpinnedProcessedData: processedData
2175
2135
  };
2176
2136
  }
2177
- const topKeySet = new Set((rowPinning.top ?? []).map(String));
2178
- const bottomKeySet = new Set((rowPinning.bottom ?? []).map(String));
2137
+ const topKeySet = new Set((resolvedRowPinning.top ?? []).map(String));
2138
+ const bottomKeySet = new Set((resolvedRowPinning.bottom ?? []).map(String));
2179
2139
  const topMap = /* @__PURE__ */ new Map();
2180
2140
  const bottomMap = /* @__PURE__ */ new Map();
2181
2141
  const rest = [];
@@ -2186,23 +2146,23 @@ function BoltTable({
2186
2146
  else if (bottomKeySet.has(key)) bottomMap.set(key, row);
2187
2147
  else rest.push(row);
2188
2148
  });
2189
- const orderedTop = (rowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
2190
- const orderedBottom = (rowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
2149
+ const orderedTop = (resolvedRowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
2150
+ const orderedBottom = (resolvedRowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
2191
2151
  return {
2192
2152
  pinnedTopRows: orderedTop,
2193
2153
  pinnedBottomRows: orderedBottom,
2194
2154
  unpinnedProcessedData: rest
2195
2155
  };
2196
- }, [processedData, rowPinning, getRowKey]);
2156
+ }, [processedData, resolvedRowPinning, getRowKey]);
2197
2157
  const pinnedTopHeight = pinnedTopRows.length * rowHeight;
2198
2158
  const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
2199
2159
  const pinnedTopKeySet = (0, import_react4.useMemo)(
2200
- () => new Set((rowPinning?.top ?? []).map(String)),
2201
- [rowPinning?.top]
2160
+ () => new Set((resolvedRowPinning?.top ?? []).map(String)),
2161
+ [resolvedRowPinning?.top]
2202
2162
  );
2203
2163
  const pinnedBottomKeySet = (0, import_react4.useMemo)(
2204
- () => new Set((rowPinning?.bottom ?? []).map(String)),
2205
- [rowPinning?.bottom]
2164
+ () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
2165
+ [resolvedRowPinning?.bottom]
2206
2166
  );
2207
2167
  const [cellContextMenu, setCellContextMenu] = (0, import_react4.useState)(null);
2208
2168
  const cellMenuRef = (0, import_react4.useRef)(null);
@@ -2624,8 +2584,8 @@ function BoltTable({
2624
2584
  const col = freshOrderedColumns.find(
2625
2585
  (c) => c.key === ck
2626
2586
  );
2627
- const hasCopy = col?.copy;
2628
- const hasRowPin = !!onRowPin;
2587
+ const hasCopy = !!col?.copy;
2588
+ const hasRowPin = !!rowPinning;
2629
2589
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2630
2590
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2631
2591
  e.preventDefault();
@@ -2653,8 +2613,8 @@ function BoltTable({
2653
2613
  const col = freshOrderedColumns.find(
2654
2614
  (c) => c.key === ck
2655
2615
  );
2656
- const hasCopy = col?.copy;
2657
- const hasRowPin = !!onRowPin;
2616
+ const hasCopy = !!col?.copy;
2617
+ const hasRowPin = !!rowPinning;
2658
2618
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2659
2619
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2660
2620
  setCellContextMenu({
@@ -2714,7 +2674,7 @@ function BoltTable({
2714
2674
  onChange: (e) => {
2715
2675
  if (e.target.checked) {
2716
2676
  const allKeys = data.map(
2717
- (row, idx) => getRowKey(row, idx)
2677
+ (row, idx) => getRawRowKey(row, idx)
2718
2678
  );
2719
2679
  rowSelection.onSelectAll?.(
2720
2680
  true,
@@ -2788,7 +2748,8 @@ function BoltTable({
2788
2748
  filterValue: columnFilters[column.key] ?? "",
2789
2749
  onFilter: handleColumnFilter,
2790
2750
  onClearFilter: handleClearFilter,
2791
- customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
2751
+ customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
2752
+ disabledFilters
2792
2753
  },
2793
2754
  column.key
2794
2755
  );
@@ -2843,6 +2804,7 @@ function BoltTable({
2843
2804
  rowSelection: !showShimmer ? rowSelection : void 0,
2844
2805
  normalizedSelectedKeys,
2845
2806
  getRowKey,
2807
+ getRawRowKey,
2846
2808
  expandable: !showShimmer ? expandable : void 0,
2847
2809
  resolvedExpandedKeys,
2848
2810
  rowHeight,
@@ -3171,8 +3133,8 @@ function BoltTable({
3171
3133
  const isPinnedBottom = pinnedBottomKeySet.has(
3172
3134
  cellContextMenu.rowKey
3173
3135
  );
3174
- const hasCopy = menuCol?.copy;
3175
- const hasRowPin = !!onRowPin;
3136
+ const hasCopy = !!menuCol?.copy;
3137
+ const hasRowPin = !!rowPinning;
3176
3138
  let menuRecord;
3177
3139
  let menuRowIndex = 0;
3178
3140
  const allRows = [
@@ -3201,7 +3163,8 @@ function BoltTable({
3201
3163
  fontSize: 12,
3202
3164
  cursor: "pointer",
3203
3165
  color: "inherit",
3204
- whiteSpace: "nowrap"
3166
+ whiteSpace: "nowrap",
3167
+ ...styles.contextMenuItem
3205
3168
  };
3206
3169
  return (0, import_react_dom2.createPortal)(
3207
3170
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -3231,7 +3194,7 @@ function BoltTable({
3231
3194
  "data-bt-ctx-item": true,
3232
3195
  style: btnStyle,
3233
3196
  onClick: () => {
3234
- onRowPin(
3197
+ handleRowPin(
3235
3198
  cellContextMenu.rowKey,
3236
3199
  isPinnedTop ? false : "top"
3237
3200
  );
@@ -3259,7 +3222,7 @@ function BoltTable({
3259
3222
  "data-bt-ctx-item": true,
3260
3223
  style: btnStyle,
3261
3224
  onClick: () => {
3262
- onRowPin(
3225
+ handleRowPin(
3263
3226
  cellContextMenu.rowKey,
3264
3227
  isPinnedBottom ? false : "bottom"
3265
3228
  );