Data Table Resize Handle

1'use client'
2 
3import { useState, type CSSProperties } from 'react'
4 
5import { usePublisher } from '@virtuoso.dev/data-table'
6import { clearColumnWidthOverride$, resizeColumn$ } from '@virtuoso.dev/data-table/column-resize'
7 
8import type { HeaderSlotCustomComponent } from '@virtuoso.dev/data-table'
9 
10const MIN_WIDTH = 50
11const HANDLE_HIT_AREA = 10
12const HANDLE_STYLE: CSSProperties = {
13  position: 'relative',
14  display: 'flex',
15  width: HANDLE_HIT_AREA,
16  minWidth: HANDLE_HIT_AREA,
17  alignSelf: 'stretch',
18  justifyContent: 'center',
19  cursor: 'col-resize',
20  touchAction: 'none',
21  userSelect: 'none',
22  zIndex: 1,
23}
24const HANDLE_LINE_STYLE: CSSProperties = {
25  position: 'absolute',
26  right: 0,
27  top: '50%',
28  borderRadius: 9999,
29  transform: 'translateY(-50%)',
30}
31 
32export const ResizeHandle: HeaderSlotCustomComponent = ({ columnKey, headerRef }) => {
33  const resizeColumn = usePublisher(resizeColumn$)
34  const clearColumnWidthOverride = usePublisher(clearColumnWidthOverride$)
35  const [isResizing, setIsResizing] = useState(false)
36 
37  return (
38    <div
39      data-table-element-role="resize-handle"
40      data-resizing={isResizing ? 'true' : undefined}
41      className="group flex cursor-col-resize touch-none items-stretch"
42      style={HANDLE_STYLE}
43      onDoubleClick={(event) => {
44        event.preventDefault()
45        clearColumnWidthOverride({ key: columnKey })
46      }}
47      onPointerDown={(event) => {
48        event.preventDefault()
49        const handle = event.currentTarget
50        const ownerDocument = handle.ownerDocument
51        const startWidth = headerRef.current?.getBoundingClientRect().width
52        if (startWidth === undefined) {
53          return
54        }
55 
56        const startX = event.clientX
57        const pointerId = event.pointerId
58        handle.setPointerCapture(pointerId)
59        setIsResizing(true)
60 
61        const handlePointerMove = (moveEvent: PointerEvent) => {
62          resizeColumn({
63            key: columnKey,
64            width: Math.max(MIN_WIDTH, startWidth + moveEvent.clientX - startX),
65          })
66        }
67 
68        const handlePointerEnd = () => {
69          if (handle.hasPointerCapture(pointerId)) {
70            handle.releasePointerCapture(pointerId)
71          }
72          setIsResizing(false)
73          ownerDocument.removeEventListener('pointermove', handlePointerMove)
74          ownerDocument.removeEventListener('pointerup', handlePointerEnd)
75          ownerDocument.removeEventListener('pointercancel', handlePointerEnd)
76        }
77 
78// … truncated