const columnDefs = useMemo(() => {
if (columnData) {
// Shops vary depending on the query that was performed but are the same across all rows
// So we take a sample from the first row, to genererate a set of shop columns across all rows
const { product, ...shops } = columnData[0]
return [
{
accessorKey: "productId",
header: null,
footer: null,
// First column of each row is always a product
cell: (c) => <ReferenceProductCell productId={c.getValue()} />,
},
...Object.entries(shops).map(([key, value]) => ({
accessorKey: key,
header: <ShopHeader country={value.country} id={value.shop} />,
footer: null,
cell: ({ getValue, row }) => {
// Get current cell
const cellValue = getValue()
console.log("Cell Value Row", row)
return (
<ShopCell
shopProducts={cellValue.matches}
referenceProduct={THIS_SHOULD_BE_THE_PRODUCT_FROM_FIRST_COL_OF_THIS_ROW}
shopKey={key}
/>
)
},
})),
]
}
const columnDefs = useMemo(() => {
if (columnData) {
// Shops vary depending on the query that was performed but are the same across all rows
// So we take a sample from the first row, to genererate a set of shop columns across all rows
const { product, ...shops } = columnData[0]
return [
{
accessorKey: "productId",
header: null,
footer: null,
// First column of each row is always a product
cell: (c) => <ReferenceProductCell productId={c.getValue()} />,
},
...Object.entries(shops).map(([key, value]) => ({
accessorKey: key,
header: <ShopHeader country={value.country} id={value.shop} />,
footer: null,
cell: ({ getValue, row }) => {
// Get current cell
const cellValue = getValue()
console.log("Cell Value Row", row)
return (
<ShopCell
shopProducts={cellValue.matches}
referenceProduct={THIS_SHOULD_BE_THE_PRODUCT_FROM_FIRST_COL_OF_THIS_ROW}
shopKey={key}
/>
)
},
})),
]
}