How do I access multiple nested data object in shadcdn DataTable
Answered
Jenn posted this in #help-forum
JennOP
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 exist3 Replies
JennOP
I tried this
ts
{
accessorKey: 'order_items',
accessorFn: (row) => row.order_items,
cell: ({ row }) => (
console.log(row.getValue('order_items'), "row")
),
header: "Orders",
}[
{ 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' } } ] rowJennOP
Nevermind. I used map to show the data
Answer
Asiatic Lion
😂