How can I add action button to my Datatables Vue 3

jemz

Hi, can I ask please I want to add action buttons to my datatables vue3 how can I implement it?

  <DataTable :data="data"  class="table table-hover table-striped" width="100%">
                            <thead>
                            <tr>
                                <th>A</th>
                                <th>B</th>
                            </tr>
                            </thead>
      </DataTable>

<script setup lang="ts">



import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs4';


const  data  = defineProps(['customers']);

</script>

colin

This thread should help, it's asking the same thing.

Colin

jemz

@colin

Thank you I will try this link

jemz

@colin

I mean action buttons like edit , view, delete,

ex:

<table>
    <tr>
    <th>FirstName</th>
     <th>LastName</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>John</td>
     <td>Wick</td>
    <td><button>Edit</button> <button>View</button><button>Delete</button></td>
  </tr>

</table>

allan

You could use a renderer to create those buttons. Another option is to use columns.defaultContent like I do here.

Allan

jemz

Hi @Allan

Thank you I will try this I will be back.

jemz

Hi @Allan

Thank you I will try this I will be back.

jemz

Hi @allan

Thank you it works

allan

Awesome - thanks for letting me know.

Allan

GeVi85

@allan thanks for the example thats exactly what i need, but not qith JS i need it with Vue3