Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Vue Datatable Action Menu
I have integrated the Vue demo customer listing page in my development and when I integrate the Action menu (data-kt-menu) it doesn't work for me in the datatable but I put the same code outside the table it works can you please help me to fix this issue.
Code:
<template v-slot:cell-actions="{ row: data }">
<a
href="#"
class="btn btn-sm btn-light btn-active-light-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>Actions
<span class="svg-icon svg-icon-5 m-0">
<inline-svg src="media/icons/duotune/arrows/arr072.svg" />
</span>
</a>
<!--begin::Menu-->
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true"
>
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link
to="/apps/customers/customer-details"
class="menu-link px-3"
>View</router-link
>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a class="menu-link px-3"
>Delete</a
>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>Screenshot: https://rxteam376-my.sharepoint.com/:i:/g/personal/priyank_patel_rxteam376_onmicrosoft_com/EZHanYSvs3xKre8IFzKJ_xcBXNkR7h8KZQ3sATlexC8tbw?e=xudJJ7
Replies (3)
Hi,
We already know about this issue, and we will include the fix in an upcoming release.
The MenuComponent is initialized when the component is mounted, in table rows might be rendered asynchronously, so you should call the menu reinitialization function manually when the rows in a table have been rendered.
MenuComponent.reinitialization();
Hi Lauris, i am using KTDatatable in VueJS and i have same problem. data-kt-menu button doesn't work when used in datatable row.
My code:
<Datatable v-if="list_cobrancas.length>0"
:table-header="tableHeader"
:table-data="list_cobrancas"
:rows-per-page="filter.page_size"
:currentPage="filter.page_number"
:total="totalItens"
@onCurrentChange="currentPageChange"
v-on:current-change="currentPageChange"
v-on:items-per-page-change="itensPerPageChange"
:enable-items-per-page-dropdown="true"
:key="refresh"
>
<template v-slot:cell-valor="{ row: cobranca }">
<div >
{{ toCurrency(cobranca.valor) }}
</div>
</template>
<template v-slot:cell-cliente="{ row: cobranca }">
{{ cobranca.cliente }}
</template>
<template v-slot:cell-situacao="{ row: cobranca }">
<div class="badge badge-success">{{ cobranca.situacao }}</div>
</template>
<template v-slot:cell-forma_pagamento="{ row: cobranca }">
<div class="badge badge-light">{{ cobranca.forma_pagamento }}</div>
</template>
<template v-slot:cell-actions="{ row: cobranca }">
<a href="#%22%20class=%22btn%20btn-light%20btn-active-light-primary%20btn-sm%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank">Actions {{cobranca.id}}
<!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor" />
</svg>
</span>
<!--end::Svg Icon--></a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="../../demo1/dist/apps/subscriptions/add.html%22%20class=%22menu-link%20px-3" target="_blank">View</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="../../demo1/dist/apps/subscriptions/add.html%22%20class=%22menu-link%20px-3" target="_blank">Edit</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20data-kt-subscriptions-table-filter=%22delete_row%22%20class=%22menu-link%20px-3" target="_blank">Delete</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>
</Datatable>const listar = () => {
ApiService.post(`/../bff-web/cobranca/list`, {
filter: filter.value
}).then(({data}) => {
list_cobrancas.value = [...data.data[0]];
MenuComponent.reinitialization();
refresh.value +=1;
totalItens.value = data.data[1];
});
}<pre lang="html"></pre>
Hello, in order to help some with a practical example of where they should put MenuComponent.reinitialization()
onMounted(() => {
setCurrentPageBreadcrumbs("Usuarios", ["User"]);
onRefresh();
});
const onItemsPerPageChange = async (value: number) => {
itemsPerPage.value = value;
onRefresh();
};
const pageChange = async (value: number) => {
currentPage.value = value;
onRefresh();
};
const onRefresh = async () => {
loading.value = true;
await store.dispatch(Actions.LIST_USER_PERSON, {
limit: itemsPerPage.value,
page: currentPage.value,
});
loading.value = false;
MenuComponent.reinitialization();
};
