need help
Closed this issue · 3 comments
Hello there,
how can add edit and delete button in this package ? I use laravel and vue just
Thanks
If you are using an older version of VueDataTable, you can use the features
actionButtons. This feature is no longer available in newer versions, so if
you are using an older version I suggest you check out the previous versions
of the REAMDE file.
If you are using version 3 or higher of VueDataTable, then you can use custom
Vue components for that. The README has a section about action buttons,
just like you want. Basically, you pass a custom Vue component to render a
given column
Yes I can help you.
Here is an example;
Here is a sample custom component for the column with buttons:
<template>
<div class="action-buttons">
<button class="btn btn-outline-success" @click="handleAction('view')">
<i class="fa fa-eye"></i>
</button>
<button class="btn btn-outline-primary" @click="handleAction('edit')">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-outline-dark" @click="handleAction('delete')">
<i class="fa fa-trash"></i>
</button>
</div>
</template>
<script>
export default {
name: "ActionButtons",
methods: {
handleAction(actionName) {
/* when the user clicks a button, that will trigger a mutation on our Vuex store
The mutation may show a form for editing a resource, or maybe a popup box asking
the user to confirm deleting a resource, or open a new page for the user to view
a resource.
*/
this.$store.commit(actionName, this.data)
}
},
props: {
data: {
type: Object,
required: true,
},
},
};
</script>Here is a sample component that uses the action buttons with VueDataTable
<template>
<div>
<data-table v-bind="bindings"/>
</div>
</template>
<script>
import ActionButtons from "./ActionButtons.vue";
export default {
data() {
return {
bindings: {
columns: [
{ key: "name" },
{ key: "email" },
{ key: "phone" },
{
title: "Actions",
component: ActionButtons
},
],
data: [ /* a list of users goes here */ ]
/* other props...*/
}
}
},
}
</script>If you want to, you can share some of your code to help me understand the problem.