Working with server-side data
Really nice theme here, but.. with all due respect, was this tested at all with server-side data during development? It seems many of us across frameworks are having problems with the kt-datatable and data-kt-menu dropdown not playing well with "real" data.
I've seen several posts going back months where you've mentioned you're going to include some examples of using this with server-side data, is this likely to materialize anytime soon?
I'm hacking datatable to work like so:
...
<Datatable
:table-data="tableData"
:table-header="tableHeader"
:enable-items-per-page-dropdown="true"
:key="refresh" # <--- notice this, this was necessary to get datatable to display data.
>
......
<template v-slot:cell-actions="{ row: stuff }">
<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
class="menu-link px-3"
:to="{
name: "apps-stuff-details",
params: {
id: stuff.id,
},
}"
>View</router-link
>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="tfcCreate(stuff.id, stuff.customer_name)"
class="menu-link px-3"
>
Apply
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="tfcDelete(stuff.id, stuff.customer_name)"
class="menu-link px-3"
>
Delete
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>
</Datatable>
...onMounted(async () = {
MenuComponent.reinitialization(): // <-- to fix the kt-data-menu dropdown. doesn"t work
setCurrentPageBreadcrumbs("Example", ["Apps"]);
getSomeData()
// MenuComponent.reinitialization(): // <-- doesn"t work here either
timerId = setInterval(getSomeData, 60000)
setTimeout(() => {
clearInterval(timerId);
}, 1000 * 60 * 10);
}const getSomeData = async () => {
ApiService.setHeader();
await ApiService.query("/api/somedata", {})
.then(({data}) => {
tableData.value = data.somedata;
})
.then(() => {
initSomeData.value = [...tableData.value];
})
refresh.value += 1; // <--- as above. necessary to get the datatable to display data
}Datatable works with this fix, but the 'actions' dropdown using data-kt-menu does not. ReInit of the MenuComponent seems to make it occasionally work, but only briefly or until you refresh the page.
Thanks
Replies (1)
Hi,
Yes, we already working on a server-side example, it will be available in upcoming releases.
Could you please try to move MenuComponent reinitialization into your .then() section?
Table rows are rendered when the data is received so you have to reinitialize our MenuComponent after the table content rendering.
Firstly receive data and assign it to tableData.value and only then reinitialize MenuComponent.
