Data Grid Select Column

1"use client";
2 
3import type {
4  CellContext,
5  ColumnDef,
6  HeaderContext,
7} from "@tanstack/react-table";
8import * as React from "react";
9import { Checkbox } from "@/components/ui/checkbox";
10import { cn } from "@/lib/utils";
11 
12type HitboxSize = "default" | "sm" | "lg";
13 
14interface DataGridSelectHitboxProps {
15  htmlFor: string;
16  children: React.ReactNode;
17  size?: HitboxSize;
18  debug?: boolean;
19}
20 
21function DataGridSelectHitbox({
22  htmlFor,
23  children,
24  size,
25  debug,
26}: DataGridSelectHitboxProps) {
27  return (
28    <div
29      className={cn(
30        "group relative -my-1.5 h-[calc(100%+0.75rem)] py-1.5",
31        size === "default" && "-ms-3 -me-2 ps-3 pe-2",
32        size === "sm" && "-ms-3 -me-1.5 ps-3 pe-1.5",
33        size === "lg" && "-mx-3 px-3",
34      )}
35    >
36      {children}
37      <label
38        htmlFor={htmlFor}
39        className={cn(
40          "absolute inset-0 cursor-pointer",
41          debug && "border border-red-500 border-dashed bg-red-500/20",
42        )}
43      />
44    </div>
45  );
46}
47 
48interface DataGridSelectCheckboxProps
49  extends Omit<React.ComponentProps<typeof Checkbox>, "id"> {
50  rowNumber?: number;
51  hitboxSize?: HitboxSize;
52  debug?: boolean;
53}
54 
55function DataGridSelectCheckbox({
56  rowNumber,
57  hitboxSize,
58  debug,
59  checked,
60  className,
61  ...props
62}: DataGridSelectCheckboxProps) {
63  const id = React.useId();
64 
65  if (rowNumber !== undefined) {
66    return (
67      <DataGridSelectHitbox htmlFor={id} size={hitboxSize} debug={debug}>
68        <div
69          aria-hidden="true"
70          className={cn(
71            "pointer-events-none absolute start-3 top-1.5 flex size-4 items-center justify-center text-muted-foreground text-xs tabular-nums transition-opacity group-hover:opacity-0",
72            checked && "opacity-0",
73          )}
74        >
75          {rowNumber}
76        </div>
77        <Checkbox
78          id={id}
79          className={cn(
80            "relative transition-[shadow,border,opacity] hover:border-primary/40",
81            "opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100",
82            className,
83          )}
84          checked={checked}
85          {...props}
86        />
87      </DataGridSelectHitbox>
88    );
89  }
90 
91  return (
92    <DataGridSelectHitbox htmlFor={id} size={hitboxSize} debug={debug}>
93      <Checkbox
94        id={id}
95        className={cn(
96          "relative transition-[shadow,border] hover:border-primary/40",
97          className,
98        )}
99        checked={checked}
100        {...props}
101      />
102// … truncated