Data Table Draggable Group Header

1'use client'
2 
3import { useCellValue, usePublisher } from '@virtuoso.dev/data-table'
4import {
5  beginColumnDrag$,
6  columnDragState$,
7  endColumnDrag$,
8  reorderColumnGroup$,
9  setColumnDropTarget$,
10} from '@virtuoso.dev/data-table/column-reorder'
11 
12import { cn } from '@/lib/utils'
13 
14interface DraggableGroupHeaderProps {
15  label: string
16  columnKeys: string[]
17  stickyGroup?: 'left' | 'right'
18}
19 
20function DraggableGroupHeader({ label, columnKeys, stickyGroup }: DraggableGroupHeaderProps) {
21  const dragState = useCellValue(columnDragState$)
22  const beginColumnDrag = usePublisher(beginColumnDrag$)
23  const endColumnDrag = usePublisher(endColumnDrag$)
24  const setColumnDropTarget = usePublisher(setColumnDropTarget$)
25  const reorderColumnGroup = usePublisher(reorderColumnGroup$)
26 
27  const isGroupDrag = (dragState.sourceKeys?.length ?? 0) > 1
28  const isSelfDrag = isGroupDrag && dragState.sourceKeys?.[0] === columnKeys[0]
29  const groupAnchorKey = dragState.dropTarget?.key
30  const dropPosition =
31    groupAnchorKey && (groupAnchorKey === columnKeys[0] || groupAnchorKey === columnKeys.at(-1)) ? dragState.dropTarget!.position : null
32 
33  return (
34    <div
35      className={cn(
36        'relative flex items-center border-b border-border bg-muted px-2 py-1 text-xs font-semibold whitespace-nowrap',
37        stickyGroup && 'bg-muted/80'
38      )}
39      onDragOver={(ev) => {
40        if (!isGroupDrag) {
41          return
42        }
43        if (isSelfDrag) {
44          return
45        }
46        if (dragState.sourceSticky !== stickyGroup) {
47          return
48        }
49        ev.preventDefault()
50        ev.dataTransfer.dropEffect = 'move'
51        const rect = ev.currentTarget.getBoundingClientRect()
52        const position = ev.clientX < rect.left + rect.width / 2 ? 'before' : 'after'
53        const anchorKey = position === 'before' ? columnKeys[0]! : columnKeys.at(-1)!
54        if (dragState.dropTarget?.key === anchorKey && dragState.dropTarget.position === position) {
55          return
56        }
57        setColumnDropTarget({ key: anchorKey, position })
58      }}
59      onDragLeave={(ev) => {
60        const next = ev.relatedTarget as Node | null
61        if (next && ev.currentTarget.contains(next)) {
62          return
63        }
64        setColumnDropTarget(null)
65      }}
66      onDrop={(ev) => {
67        ev.preventDefault()
68        if (!isGroupDrag || isSelfDrag || !dragState.sourceKeys) {
69          setColumnDropTarget(null)
70          return
71        }
72// … truncated