How can I add action button to my Datatables Vue 3

How can I add action button to my Datatables Vue 3

jemzjemz Posts: 131Questions: 40Answers: 1
edited April 2023 in Free community support

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>

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

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

    Colin

  • jemzjemz Posts: 131Questions: 40Answers: 1

    @colin

    Thank you I will try this link

  • jemzjemz Posts: 131Questions: 40Answers: 1

    @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>
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • jemzjemz Posts: 131Questions: 40Answers: 1

    Hi @Allan

    Thank you I will try this I will be back. :)

  • jemzjemz Posts: 131Questions: 40Answers: 1

    Hi @Allan

    Thank you I will try this I will be back. :)

  • jemzjemz Posts: 131Questions: 40Answers: 1

    Hi @allan

    Thank you it works :)

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Awesome - thanks for letting me know.

    Allan

Sign In or Register to comment.