Next.js Discord

Discord Forum

How do I access multiple nested data object in shadcdn DataTable

Answered
Jenn posted this in #help-forum
Open in Discord
Avatar
export const columns: ColumnDef<Order>[] = [
  {
    accessorKey: 'order_id',
    header: 'Order ID',
  },
  {
    accessorKey: 'created_at',
    header: 'Ordered Date',
  },
  {
    accessorKey: 'customers.firstName',
    header: "First Name",
  },
  {
    accessorKey: 'customers.lastName',
    header: "Last Name",
  },
  {
    accessorKey: 'customers.address',
    header: "Address",
  },
{
    accessorKey: 'order_items',
    accessorFn: (row) => row.order_items,
    cell: ({ row }) => (
        <div className="capitalize">{row.getValue("water_type.name")}</div>
      ),
    header: "Orders",
  }
]

Types:
export interface Order {
    order_id: string;
    created_at: Date;
    customers: {
      firstName: string;
      lastName: string;
      address: string;
    };
    order_items: {
      quantity: number;
      water_type: {
        name: string;
      };
    }[];
  }

It just shows: [Table] Column with id 'water_type.quantity' does not exist
Answered by Jenn
Nevermind. I used map to show the data
View full answer

3 Replies

Avatar
I tried this
ts  
{
    accessorKey: 'order_items',
    accessorFn: (row) => row.order_items,
    cell: ({ row }) => (
        console.log(row.getValue('order_items'), "row")
      ),
    header: "Orders",
  }
The output:
[
  { quantity: 1, water_type: { name: 'Distilled Water' } },
  { quantity: 1, water_type: { name: 'Alkaline Water' } }
] row
[ { quantity: 1, water_type: { name: 'Distilled Water' } } ] row
[ { quantity: 1, water_type: { name: 'Distilled Water' } } ] row
[ { quantity: 2, water_type: { name: 'Distilled Water' } } ] row
Avatar
Nevermind. I used map to show the data
Answer
Avatar
Asiatic Lion
😂