Data Table Sort Header Button

1'use client'
2 
3import { dispatchModelAction$, modelActionState$, useCellValue, usePublisher } from '@virtuoso.dev/data-table'
4import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react'
5 
6import { cn } from '@/lib/utils'
7 
8import type { HeaderSlotRenderParams } from '@virtuoso.dev/data-table'
9 
10export type SortDirection = 'asc' | 'desc'
11export type SortPayload = {
12  field: string
13  direction: SortDirection
14}
15 
16export interface SortHeaderButtonProps extends Partial<HeaderSlotRenderParams> {
17  action?: string
18  className?: string
19  field?: string
20  getDirection?: (payload: unknown, field: string) => SortDirection | undefined
21  getPayload?: (context: { direction: SortDirection | undefined; field: string; previousDirection: SortDirection | undefined }) => unknown
22}
23 
24function sortDirectionFromPayload(payload: unknown, field: string): SortDirection | undefined {
25  if (typeof payload !== 'object' || payload === null) {
26    return undefined
27  }
28 
29  const sort = payload as Partial<SortPayload>
30  return sort.field === field && (sort.direction === 'asc' || sort.direction === 'desc') ? sort.direction : undefined
31}
32 
33export function SortHeaderButton({
34  action = 'sort',
35  className,
36  column,
37  field,
38  getDirection = sortDirectionFromPayload,
39  getPayload,
40}: SortHeaderButtonProps) {
41  const dispatch = usePublisher(dispatchModelAction$)
42  const actionState = useCellValue(modelActionState$)
43  const sortField = field ?? column?.field
44 
45  if (!sortField) {
46    return null
47  }
48 
49  const direction = getDirection(actionState[action]?.payload, sortField)
50  const nextDirection: SortDirection | undefined = direction === 'asc' ? 'desc' : direction === 'desc' ? undefined : 'asc'
51  const label =
52    nextDirection === 'asc'
53      ? `Sort ${sortField} ascending`
54      : nextDirection === 'desc'
55        ? `Sort ${sortField} descending`
56        : `Clear ${sortField} sorting`
57  const Icon = direction === 'asc' ? ArrowUp : direction === 'desc' ? ArrowDown : ArrowUpDown
58 
59  return (
60    <button
61      aria-label={label}
62      aria-pressed={direction !== undefined}
63      className={cn(
64        'ml-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
65        direction !== undefined && 'bg-muted text-foreground',
66        className
67      )}
68// … truncated