How to pass data as parameter in react-table? - reactjs

Question

How to pass data values as a parameter in React Table version 7.
I was trying to pass status and id in butFunction inside of react table so that i can create a function which create a button opposite of the status .
here is code what i had tried to do so.
Demo Link of the same code
const data = [
{ firstName: "Jane", lastName: "Doe", status: "OPEN" , id: "1" },
{ firstName: "John", lastName: "Smith", status: "CLOSE" , id: "2" },
{ firstName: "John", lastName: "Walker", status: "OPEN" , id: "3" }
];
const columns = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
accessor: "lastName"
},
{
Header: "Status",
accessor: "status"
}
];
const Table = ({ columns, data }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data
});
const butFunction = (level , id) => {
console.log(level)
console.log(id)
if (level === "OPEN") {
return <button > CLOSE </button>;
} else {
return <button > OPEN </button>;
}
};
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
<th>Action</th>
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
<td>{butFunction(data.status, data.id)}</td>
</tr>
);
})}
</tbody>
</table>
);
};
export default function App() {
return (
<div className="App">
<Table columns={columns} data={data} />
</div>
);
}

Answer 1

You need to access row.values to access the data for each row. Inside the map function, row.values will be an object that contains the data for the current row.
Edit:
As per your comment, row.values object doesn't contains id property of your data objects. To access the id, use row.original.id
<td>{ butFunction(row.values.status, row.original.id) }</td>