Master-Detail Table

1'use client'
2 
3import type { ColumnDef } from '@tanstack/react-table'
4 
5export type OrderItem = {
6  product: string
7  qty: number
8  price: number
9}
10 
11export type Order = {
12  id: string
13  customer: string
14  date: string
15  status: string
16  total: number
17  shippingAddress: string
18  items: OrderItem[]
19}
20 
21export const currency = (value: number) =>
22  value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
23 
24export const columns: ColumnDef<Order>[] = [
25  {
26    accessorKey: 'id',
27    header: 'Order',
28  },
29  {
30    accessorKey: 'customer',
31    header: 'Customer',
32  },
33  {
34    accessorKey: 'date',
35    header: 'Date',
36  },
37  {
38    accessorKey: 'status',
39    header: 'Status',
40  },
41  {
42    accessorKey: 'total',
43    header: 'Total',
44    cell: ({ getValue }) => currency(getValue() as number),
45  },
46]