Tree Table — Selection

1'use client'
2 
3import type { ColumnDef } from '@tanstack/react-table'
4import { ChevronRight } from 'lucide-react'
5 
6import { Checkbox } from '#/components/ui/checkbox.tsx'
7 
8export type OrgNode = {
9  id: string
10  name: string
11  role: string
12  status: string
13  children?: OrgNode[]
14}
15 
16export const columns: ColumnDef<OrgNode>[] = [
17  {
18    id: 'select',
19    header: ({ table }) => (
20      <Checkbox
21        checked={
22          table.getIsAllRowsSelected()
23            ? true
24            : table.getIsSomeRowsSelected()
25              ? 'indeterminate'
26              : false
27        }
28        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
29        aria-label="Select all rows"
30      />
31    ),
32    cell: ({ row }) => (
33      <Checkbox
34        checked={
35          row.getIsSelected()
36            ? true
37            : row.getIsSomeSelected()
38              ? 'indeterminate'
39              : false
40        }
41        onCheckedChange={(value) => row.toggleSelected(!!value)}
42        aria-label="Select row"
43      />
44    ),
45    enableSorting: false,
46  },
47  {
48    accessorKey: 'name',
49    header: 'Name',
50    cell: ({ row }) => (
51      <div
52        className="flex items-center gap-1.5"
53        style={{ paddingLeft: `${row.depth * 1.25}rem` }}
54      >
55        {row.getCanExpand() ? (
56          <button
57            type="button"
58            onClick={row.getToggleExpandedHandler()}
59            className="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground"
60            aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
61          >
62            <ChevronRight
63              className={`h-3.5 w-3.5 transition-transform ${
64                row.getIsExpanded() ? 'rotate-90' : ''
65              }`}
66            />
67          </button>
68        ) : (
69          <span className="w-4 shrink-0" />
70        )}
71        {row.original.name}
72      </div>
73    ),
74  },
75  {
76    accessorKey: 'role',
77    header: 'Role',
78    sortingFn: 'alphanumeric',
79  },
80  {
81    accessorKey: 'status',
82    header: 'Status',
83    sortingFn: 'basic',
84  },
85]