Tree Table

1'use client'
2 
3import type { ColumnDef } from '@tanstack/react-table'
4import { ChevronRight } from 'lucide-react'
5 
6export type OrgNode = {
7  id: string
8  name: string
9  role: string
10  status: string
11  children?: OrgNode[]
12}
13 
14export const columns: ColumnDef<OrgNode>[] = [
15  {
16    accessorKey: 'name',
17    header: 'Name',
18    cell: ({ row }) => (
19      <div
20        className="flex items-center gap-1.5"
21        style={{ paddingLeft: `${row.depth * 1.25}rem` }}
22      >
23        {row.getCanExpand() ? (
24          <button
25            type="button"
26            onClick={row.getToggleExpandedHandler()}
27            className="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground"
28            aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
29          >
30            <ChevronRight
31              className={`h-3.5 w-3.5 transition-transform ${
32                row.getIsExpanded() ? 'rotate-90' : ''
33              }`}
34            />
35          </button>
36        ) : (
37          <span className="w-4 shrink-0" />
38        )}
39        {row.original.name}
40      </div>
41    ),
42  },
43  {
44    accessorKey: 'role',
45    header: 'Role',
46    sortingFn: 'alphanumeric',
47  },
48  {
49    accessorKey: 'status',
50    header: 'Status',
51    sortingFn: 'basic',
52  },
53]