title: How to add buttons in each row of data table?
body: <p>I am using theme DataTable. I want to add edit or delete button in each row with clickable event to get customer id for future operations. I didn't get any solution of adding buttons. I want buttons in actions column. I tried to make custom object of customers with buttons in html but it shows html in actions column not making buttons.</p>
  <p><a href="https://i.stack.imgur.com/nwfoT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nwfoT.png" alt="This is my DataTable" /></a></p>
  <p>Html:</p>
  <pre><code>                &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-body&quot;&gt;
                          &lt;h4 class=&quot;card-title&quot;&gt;All Customers&lt;/h4&gt;
                          &lt;p class=&quot;card-title-desc&quot;&gt;&lt;/p&gt;
                          &lt;div class=&quot;row mb-md-2&quot;&gt;
                              &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                                  &lt;div id=&quot;tickets-table_length&quot; class=&quot;dataTables_length&quot;&gt;
                                      &lt;label class=&quot;d-inline-flex align-items-center&quot;&gt;
                                          Show
                                          &lt;b-form-select v-model=&quot;perPage&quot; size=&quot;sm&quot; :options=&quot;pageOptions&quot;&gt;&lt;/b-form-select&gt;entries
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- Search --&gt;
                              &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                                  &lt;div id=&quot;tickets-table_filter&quot; class=&quot;dataTables_filter text-md-right&quot;&gt;
                                      &lt;label class=&quot;d-inline-flex align-items-center&quot;&gt;
                                          Search:
                                          &lt;b-form-input
                                                  v-model=&quot;filter&quot;
                                                  type=&quot;search&quot;
                                                  placeholder=&quot;Search...&quot;
                                                  class=&quot;form-control form-control-sm ml-2&quot;
                                          &gt;&lt;/b-form-input&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- End search --&gt;
                          &lt;/div&gt;
                          &lt;!-- Table --&gt;
                          &lt;div class=&quot;table-responsive mb-0&quot;&gt;
                              &lt;b-table
                                      :items=&quot;customers&quot;
                                      :fields=&quot;fields&quot;
                                      responsive=&quot;sm&quot;
                                      :per-page=&quot;perPage&quot;
                                      :current-page=&quot;currentPage&quot;
                                      :sort-by.sync=&quot;sortBy&quot;
                                      :sort-desc.sync=&quot;sortDesc&quot;
                                      :filter=&quot;filter&quot;
                                      :filter-included-fields=&quot;filterOn&quot;
                                      @filtered=&quot;onFiltered&quot;
                              &gt;&lt;/b-table&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;row&quot;&gt;
                              &lt;div class=&quot;col&quot;&gt;
                                  &lt;div class=&quot;dataTables_paginate paging_simple_numbers float-right&quot;&gt;
                                      &lt;ul class=&quot;pagination pagination-rounded mb-0&quot;&gt;
                                          &lt;!-- pagination --&gt;
                                          &lt;b-pagination v-model=&quot;currentPage&quot; :total-rows=&quot;rows&quot; :per-page=&quot;perPage&quot;&gt;&lt;/b-pagination&gt;
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  ```
  </code></pre>
  <p>Script:</p>
  <pre><code> data() {
              return {
                  customers: [],
                  totalRows: 1,
                  currentPage: 1,
                  perPage: 10,
                  pageOptions: [10, 25, 50, 100],
                  filter: null,
                  filterOn: [],
                  sortBy: &quot;master_number&quot;,
                  sortDesc: true,
                  fields: [
                      { key: &quot;master_number&quot;, sortable: true },
                      { key: &quot;name&quot;, sortable: true },
                      { key: &quot;co_applicant&quot;, sortable: true },
                      { key: &quot;country&quot;, sortable: true },
                      { key: &quot;phone&quot;, sortable: true },
                      { key: &quot;email&quot;, sortable: true },
                      { key: &quot;actions&quot;, sortable: true },
                  ]
              };
          },
  computed: {
              rows() {
                  return this.customers.length;
              }
          },
  methods: {
              onFiltered(filteredItems) {
                  this.totalRows = filteredItems.length;
                  this.currentPage = 1;
              },
              getAllCustomers(){
                  axios.get(this.$path + 'all_customers').then((response) =&gt; {
                      this.customers = response.data.data
                  }).catch((error)=&gt;{
                      console.log('error', error);
                  });
              }
          },
   mounted() {
              this.getAllCustomers();
              this.totalRows = this.customers.length;
          }
  </code></pre>
  <p>This is what i tried till now.</p>
  <pre><code>     
       getAllCustomers(){
                  axios.get(this.$path + 'all_customers').then((response) =&gt; {
                      var i;
                      var cusArr = [];
                      for(i = 0; i &lt; response.data.data.length; i++){
                          var customerArr = {
                              'master_number': response.data.data[i].master_number,
                              'name': response.data.data[i].name,
                              'co_applicant': response.data.data[i].co_applicant,
                              'country': response.data.data[i].country,
                              'phone': response.data.data[i].phone,
                              'email': response.data.data[i].email,
                              'actions': `&lt;button&gt;Edit&lt;/button&gt;`,
                          }
                          cusArr.push(customerArr);
                      }
  
                      this.customers = cusArr
                  }).catch((error)=&gt;{
                      console.log('error', error);
                  });
              },
  
  </code></pre>