0
309
ViewsHow to insert a button in a react table?
I'm trying to insert a button in a react table so that the UI will be like so: 
However, since I construct the table using the format of "tableHead" & "tableData" as shown below, seems like it is not permissible for me to add a button in the tableData array.
May I ask how should I add the button in the place as highlighted in the picture? Much appreciated.
<CardBody>
<Table
tableHeaderColor="warning"
tableHead={[
"Name",
"Market Value",
"Total Holding Value",
"Face Value",
"Maturity Date",
"Total Interest Received",
"Action",
]}
tableData={[
[
"PBS17",
"Rp 93,000",
"Rp 9,300,000",
"Rp 1,000,000",
"30/6/2027",
"Rp 525,000",
"Button"
],
]}
/>
</CardBody>
·
Juan Pablo Isaza
2 answers
Answer question0
You can insert button where you are defining columns for table like below:
{
width: 300,
Header: "Button",
Cell: ({ cell }) => (
<button value={cell.row.values.name} onClick={props.handleClick}>
Button
</button>
)
}
·
Juan Pablo Isaza
Report
0
I think u can pass button as component in tableData
<CardBody>
<Table
tableHeaderColor="warning"
tableHead={[
"Name",
"Market Value",
"Total Holding Value",
"Face Value",
"Maturity Date",
"Total Interest Received",
"Action",
]}
tableData={[
[
"PBS17",
"Rp 93,000",
"Rp 9,300,000",
"Rp 1,000,000",
"30/6/2027",
"Rp 525,000",
<button></button>
],
]}
/>
</CardBody>
·
Juan Pablo Isaza
Report
Answer question