Use data that is not defined in columns within table?

[kalaschnik]

Hey y'all,

I have data properties that I want to show in the table, yet not in a column. Instead, I want to show a property on hover a label (using title argument).

For example, I've got the following data object

[
    {
      id: "728ed52f",
      amount: 100,
      currency: "USD",
      status: "pending",
      email: "[email protected]",
    },
    {
      id: "489e1d42",
      amount: 125,
      currency: "EUR",
      status: "processing",
      email: "[email protected]",
    },
  ];

Is there a way to show the currency property as title value for the corresponding value within the Amount column? For example:

Here is a code sandbox:
https://codesandbox.io/p/devbox/vigilant-lumiere-9kvwvw?file=%2Fapp%2Fpage.tsx%3A6%2C1-21%2C5

[jonahallibone]

You could make amount an object, like:

[
    {
      id: "728ed52f",
      amount: {
        value: 100,
        currency: "USD"
      }
      status: "pending",
      email: "[email protected]",
    },
];

Make the accessor a function that looks for amount.value and the in the row display, set the title value of the div to be row.original.amount.currency

Alternatively and with the original shape, in column definitions just don't define a column helper for the amount field and access it the same way as above on the row render.