Grouped Table

1'use client'
2 
3import type { ColumnDef } from '@tanstack/react-table'
4import { ChevronRight } from 'lucide-react'
5 
6export type Order = {
7  id: string
8  customer: string
9  category: string
10  amount: number
11  status: string
12}
13 
14const currency = (value: number) =>
15  value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
16 
17export const columns: ColumnDef<Order>[] = [
18  {
19    accessorKey: 'category',
20    header: 'Category',
21    cell: ({ row, cell, getValue }) => {
22      if (cell.getIsGrouped()) {
23        return (
24          <button
25            type="button"
26            onClick={row.getToggleExpandedHandler()}
27            className="flex items-center gap-1.5 font-medium"
28          >
29            <ChevronRight
30              className={`h-3.5 w-3.5 transition-transform ${
31                row.getIsExpanded() ? 'rotate-90' : ''
32              }`}
33            />
34            {getValue() as string}
35            <span className="font-normal text-muted-foreground">
36              ({row.subRows.length})
37            </span>
38          </button>
39        )
40      }
41      if (cell.getIsPlaceholder()) return null
42      return <span className="pl-5">{getValue() as string}</span>
43    },
44  },
45  {
46    accessorKey: 'customer',
47    header: 'Customer',
48    cell: ({ cell, getValue }) =>
49      cell.getIsAggregated() ? null : (getValue() as string),
50  },
51  {
52    accessorKey: 'status',
53    header: 'Status',
54    cell: ({ cell, getValue }) =>
55      cell.getIsAggregated() ? null : (getValue() as string),
56  },
57  {
58    accessorKey: 'amount',
59    header: 'Amount',
60    aggregationFn: 'sum',
61    cell: ({ cell, getValue }) => (
62      <span className={cell.getIsAggregated() ? 'font-medium' : undefined}>
63        {currency(getValue() as number)}
64      </span>
65    ),
66  },
67]