bolt-table 0.1.21 → 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 +10 -4
  2. package/dist/index.d.ts +10 -4
  3. package/dist/index.js +249 -307
  4. package/dist/index.mjs +249 -307
  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");
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");
470
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";
@@ -1554,7 +1476,8 @@ function BoltTable({
1554
1476
  layoutLoading,
1555
1477
  emptyRenderer,
1556
1478
  rowClassName,
1557
- rowStyle
1479
+ rowStyle,
1480
+ disabledFilters
1558
1481
  }) {
1559
1482
  const data = useMemo2(() => {
1560
1483
  if (!Array.isArray(rawData)) return STABLE_EMPTY_DATA;
@@ -2002,12 +1925,11 @@ function BoltTable({
2002
1925
  if (col.key === "__select__" || col.key === "__expand__") return col;
2003
1926
  const latest = latestMap.get(col.key);
2004
1927
  if (!latest) return col;
2005
- if (col.render === latest.render && col.shimmerRender === latest.shimmerRender)
2006
- return col;
2007
1928
  return {
2008
- ...col,
2009
- render: latest.render,
2010
- shimmerRender: latest.shimmerRender
1929
+ ...latest,
1930
+ width: col.width,
1931
+ hidden: col.hidden,
1932
+ pinned: col.pinned
2011
1933
  };
2012
1934
  });
2013
1935
  }, [orderedColumns, initialColumns]);
@@ -2053,6 +1975,24 @@ function BoltTable({
2053
1975
  const column = columns.find((col) => col.key === columnKey);
2054
1976
  if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
2055
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]);
2056
1996
  const onSortChangeRef = useRef4(onSortChange);
2057
1997
  onSortChangeRef.current = onSortChange;
2058
1998
  const [sortState, setSortState] = useState2({ key: "", direction: null });
@@ -2153,15 +2093,15 @@ function BoltTable({
2153
2093
  return result;
2154
2094
  }, [data, sortState, columnFilters]);
2155
2095
  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = useMemo2(() => {
2156
- if (!rowPinning || !rowPinning.top?.length && !rowPinning.bottom?.length) {
2096
+ if (!resolvedRowPinning || !resolvedRowPinning.top?.length && !resolvedRowPinning.bottom?.length) {
2157
2097
  return {
2158
2098
  pinnedTopRows: [],
2159
2099
  pinnedBottomRows: [],
2160
2100
  unpinnedProcessedData: processedData
2161
2101
  };
2162
2102
  }
2163
- const topKeySet = new Set((rowPinning.top ?? []).map(String));
2164
- 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));
2165
2105
  const topMap = /* @__PURE__ */ new Map();
2166
2106
  const bottomMap = /* @__PURE__ */ new Map();
2167
2107
  const rest = [];
@@ -2172,23 +2112,23 @@ function BoltTable({
2172
2112
  else if (bottomKeySet.has(key)) bottomMap.set(key, row);
2173
2113
  else rest.push(row);
2174
2114
  });
2175
- const orderedTop = (rowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
2176
- 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);
2177
2117
  return {
2178
2118
  pinnedTopRows: orderedTop,
2179
2119
  pinnedBottomRows: orderedBottom,
2180
2120
  unpinnedProcessedData: rest
2181
2121
  };
2182
- }, [processedData, rowPinning, getRowKey]);
2122
+ }, [processedData, resolvedRowPinning, getRowKey]);
2183
2123
  const pinnedTopHeight = pinnedTopRows.length * rowHeight;
2184
2124
  const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
2185
2125
  const pinnedTopKeySet = useMemo2(
2186
- () => new Set((rowPinning?.top ?? []).map(String)),
2187
- [rowPinning?.top]
2126
+ () => new Set((resolvedRowPinning?.top ?? []).map(String)),
2127
+ [resolvedRowPinning?.top]
2188
2128
  );
2189
2129
  const pinnedBottomKeySet = useMemo2(
2190
- () => new Set((rowPinning?.bottom ?? []).map(String)),
2191
- [rowPinning?.bottom]
2130
+ () => new Set((resolvedRowPinning?.bottom ?? []).map(String)),
2131
+ [resolvedRowPinning?.bottom]
2192
2132
  );
2193
2133
  const [cellContextMenu, setCellContextMenu] = useState2(null);
2194
2134
  const cellMenuRef = useRef4(null);
@@ -2610,8 +2550,8 @@ function BoltTable({
2610
2550
  const col = freshOrderedColumns.find(
2611
2551
  (c) => c.key === ck
2612
2552
  );
2613
- const hasCopy = col?.copy;
2614
- const hasRowPin = !!onRowPin;
2553
+ const hasCopy = !!col?.copy;
2554
+ const hasRowPin = !!rowPinning;
2615
2555
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2616
2556
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2617
2557
  e.preventDefault();
@@ -2639,8 +2579,8 @@ function BoltTable({
2639
2579
  const col = freshOrderedColumns.find(
2640
2580
  (c) => c.key === ck
2641
2581
  );
2642
- const hasCopy = col?.copy;
2643
- const hasRowPin = !!onRowPin;
2582
+ const hasCopy = !!col?.copy;
2583
+ const hasRowPin = !!rowPinning;
2644
2584
  const hasCellItems = col?.columnCellContextMenuItems && col.columnCellContextMenuItems.length > 0;
2645
2585
  if (!hasCopy && !hasRowPin && !hasCellItems) return;
2646
2586
  setCellContextMenu({
@@ -2774,7 +2714,8 @@ function BoltTable({
2774
2714
  filterValue: columnFilters[column.key] ?? "",
2775
2715
  onFilter: handleColumnFilter,
2776
2716
  onClearFilter: handleClearFilter,
2777
- customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems
2717
+ customContextMenuItems: column.columnHeaderContextMenuItems ? [...columnContextMenuItems ?? [], ...column.columnHeaderContextMenuItems] : columnContextMenuItems,
2718
+ disabledFilters
2778
2719
  },
2779
2720
  column.key
2780
2721
  );
@@ -3158,8 +3099,8 @@ function BoltTable({
3158
3099
  const isPinnedBottom = pinnedBottomKeySet.has(
3159
3100
  cellContextMenu.rowKey
3160
3101
  );
3161
- const hasCopy = menuCol?.copy;
3162
- const hasRowPin = !!onRowPin;
3102
+ const hasCopy = !!menuCol?.copy;
3103
+ const hasRowPin = !!rowPinning;
3163
3104
  let menuRecord;
3164
3105
  let menuRowIndex = 0;
3165
3106
  const allRows = [
@@ -3188,7 +3129,8 @@ function BoltTable({
3188
3129
  fontSize: 12,
3189
3130
  cursor: "pointer",
3190
3131
  color: "inherit",
3191
- whiteSpace: "nowrap"
3132
+ whiteSpace: "nowrap",
3133
+ ...styles.contextMenuItem
3192
3134
  };
3193
3135
  return createPortal2(
3194
3136
  /* @__PURE__ */ jsxs5(
@@ -3218,7 +3160,7 @@ function BoltTable({
3218
3160
  "data-bt-ctx-item": true,
3219
3161
  style: btnStyle,
3220
3162
  onClick: () => {
3221
- onRowPin(
3163
+ handleRowPin(
3222
3164
  cellContextMenu.rowKey,
3223
3165
  isPinnedTop ? false : "top"
3224
3166
  );
@@ -3246,7 +3188,7 @@ function BoltTable({
3246
3188
  "data-bt-ctx-item": true,
3247
3189
  style: btnStyle,
3248
3190
  onClick: () => {
3249
- onRowPin(
3191
+ handleRowPin(
3250
3192
  cellContextMenu.rowKey,
3251
3193
  isPinnedBottom ? false : "bottom"
3252
3194
  );