T
TanStack•3y ago
correct-apricot

How to access table[firstColumn][currentRow] within ColumnDefinitions?

Consider the following code below for context. From the props provided to cell which of these should we use row.original, getValue or getAllCells to access the product located in the first column of each row, to retrieved it's ID? 
  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}
              />
            )
          },
        })),
      ]
    }
2 Replies
ratty-blush
ratty-blush•3y ago
row.original.productId should work Or whatever the column accessor is for the data you want
correct-apricot
correct-apricotOP•3y ago
Thanks attila! I think that was the approach I ended up taking, I am glad it is not the incorrect way

Did you find this page helpful?