Get column value from a function in React table

Question

I have a react table which displays id, time and status. I have to add a new column Summary which will use the current id of the row and calculate the name.

I am not sure how to get the particular id of the row.

const columns = [
  {
    title: 'Id',
    data: 'id',
    searchable: true
  },
  {
    title: 'Time',
    data: 'time',
    searchable: true
  },
  {
    title: 'Status',
    data: 'status',
    searchable: true
  },
  {
    title: 'Summary',
    cell: row => {this.getNameFromId(row.id)},
    //cell: row => <div>{this.getNameFromId(row.id)}</div>,
    //render: this.getConfigsFromInstances(data),
    searchable: true
  }
];

data is a complex object which is giving me all the id's present if I am passing it in getNameFromId. Please help to fix this.

Answer 1

To get the row id within a Cell of a column, you can find it at row.original.id.

columns.push({
  Header: 'Summary',
  accessor: 'summary',
  Cell: (row) => (<div>{this.getNameFromId(row.original.id)}</div>)
});