How to use multiple values in React-table Cell?

Question

I have this in my code:

{
    Header: "Amount",
    accessor: "reward_amount",
    Cell: ({ value }) => `$${value / 100.0}`,
}

So value is reward_amount, but I also need to look at another value on the row data in order to determine what the cell content should be.

Here's more of the code:

export default function myFunc(props) {
  const [data, setData] = useState(props.stuff);

  useEffect(() => {
    setData(props.stuff);
  }, [props.stuff]);

  const columns = useMemo(
    () => [
      ...
      {
        Header: "Amount",
        accessor: "reward_amount",
        Cell: ({ value }) => `$${value / 100.0}`,
      },
      ...
    ],
    []
  );

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable(
      {
        columns,
        data,
      },
      useRowSelect
    );

  return (...);
}

You mean like Cell: ({ value, anotherValue }) => value + anotherValue? — ray
– ray, Commented Aug 5, 2022 at 14:31
@rayhatfield does that work? It doesn't make sense to me because value is reward_value, ie. it's a different variable name. So I don't think I can access other values on the row like that. — Ryan
– Ryan, Commented Aug 5, 2022 at 14:37
You can pass a function to accessor that gets the whole row as a prop. — WebbH
– WebbH, Commented Aug 5, 2022 at 14:37
@Ryan I'm not familiar with react-table, but at a glance it appears that the Cell function receives the row as an argument, and you're destructuring value from it. If you need additional properties from the row you should be able to destructure those too. Your current implementation is the equivalent of (row) => ${row.value / 100.0}. — ray
– ray, Commented Aug 5, 2022 at 16:20

yohanes · Accepted Answer · 2022-08-23 09:54:03Z

2

The row data can be accessed by using row.original object.

{
    Header: "Amount",
    Cell: ({ row }) => `$${row.original.reward_amount / 100.0}`,
}

answered Aug 23, 2022 at 9:54

yohanes

2,7751 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Александра Лобовикова · Accepted Answer · 2024-02-29 11:35:10Z

0

Thanks everyone for the answers. For me, it works:

{
    header: "ID",
    cell: (props) => (<React.Fragment>
            {props.row.original.serverId}  
            {props.row.original.locationCode}
        </React.Fragment>)
}

And what is important that inside the table you should use:

flexRender(cell.column.columnDef.cell, cell.getContext())

not just cell.getValue()

I hope it helps someone!

answered Feb 29, 2024 at 11:35

Александра Лобовикова

1

1 Comment

pigrammer Over a year ago

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review

Collectives™ on Stack Overflow

How to use multiple values in React-table Cell?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related