I am looking to create a clickable button as one of the headers in my table. The table receives its columns from a parent component via an array. In this case, I want to include a button as the last column header.
<BaseTable
:columns="table.columns"
</BaseTable>
.
.
.
table: {
columns: [
{
title: "Role",
},
{
title: "No."
},
{
title: "Milestone"
},
{
title: "Status"
},
{
title: "Condition"
},
{
title:
'<button >+ View all</button>',
}
]
}
The table component then receives these columns as a prop and displays them like this:
<tr>
<th>
{{ column.title }}
</th>
</tr>
Ultimately, the final layout should resemble something like this:https://i.sstatic.net/CpElb.png
Could you advise me on how to achieve this?