CODEWITHSUNDEEP
reactjsreact-table
Ryan
Ryan

Reputation: 6057

How to use multiple values in React-table Cell?

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 (...);
}

Upvotes: 1

Views: 5746

Answers (2)

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

Reputation: 1

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!

Upvotes: 0

yohanes
yohanes

Reputation: 2685

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

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

Upvotes: 2

Related Questions