DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

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.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.