passing a button as a table column title in Vuejs

Question

I want to make one of my table's column headers a clickable button. receives columns from parent like via an array like this. As you can see I want to pass a button as the last title.

<BaseTable
        :columns="table.columns"
</BaseTable>
.
.
.
    table: {
       columns: [
          {
            title: "Role",
          },
          {
            title: "No."
          },
          {
            title: "Milestone"
          },
          {
            title: "Status"
          },
          {
            title: "Condition"
          },
          {
            title:
              '<button >+ View all</button>',
          }
        ]
    }

And then table component receives it as a prop an displays it like this:

         <tr>
            <th>
                {{ column.title }}
            </th>
          </tr>

So the end product should look something like this:

How can I do this?

Answer 1

what about doing something like this?

    <th>
      <button v-if="column.isBtn">{{column.title}}</button>
      <template v-else>{{column.title}}</template>
    </th>

now in your columns array make the last object look like this:

{
  title: "View all",
  isBtn: true
}

so what I did is only add button to the table header column and only show it when I pass isBtn with value true in the column object

Hope this code can help you.