KTDatatable doesnt dispose
I have a datatable in a modal, every time I open I have to update url with new data, how can I do that? The dispose() method does nothing.
https://ktui.io/docs/datatable#methods
Replies (7)
Hi
Are you using the data-kt-menu-item-overflow="true" attribute on your KTMenu items?
Have you tried setting the data-kt-menu-item-placement attribute to different values like "bottom-start" or "bottom-end"?
Try to add the overflow attribute to your KTMenu items inside the modal.
<div class="kt-menu-item"
data-kt-menu-item-overflow="true"
data-kt-menu-item-placement="bottom-end"
data-kt-menu-item-offset="0, 10px"
data-kt-menu-item-toggle="dropdown"
data-kt-menu-item-trigger="click">Try this also, update your modal HTML to include the overflow attribute on both menu items:
<!-- In modal header -->
<div class="kt-menu-item"
data-kt-menu-item-offset="0, 10px"
data-kt-menu-item-placement="bottom-end"
data-kt-menu-item-placement-rtl="bottom-start"
data-kt-menu-item-toggle="dropdown"
data-kt-menu-item-trigger="click"
data-kt-menu-item-overflow="true">
<!-- In table body -->
<div class="kt-menu-item"
data-kt-menu-item-offset="0, 10px"
data-kt-menu-item-placement="bottom-end"
data-kt-menu-item-toggle="dropdown"
data-kt-menu-item-trigger="click"
data-kt-menu-item-overflow="true">Thanks
Hi
This happens because modal creates a new "stacking context" with its own z-index. Any child element, including the KTSelect dropdown, is then contained within that context and cannot appear above the drawer's overlay.
To fix this, you need to tell KTSelect to render its dropdown element outside of the drawer. The component provides a specific configuration option for this: dropdownContainer.
By setting dropdownContainer: 'body', the dropdown will be appended directly to the document's <body>.
Here is the correct way to initialize your KTSelect instance:
// Assuming you have a select element
const selectElement = document.querySelector("#mySelectInDrawer");
// Initialize KTSelect with the dropdownContainer option
const select = new KTSelect(selectElement, {
dropdownContainer: "body"
});Its not a KTSelect component, it is a KTMenu component.
Also by using the attach property with body or the modal the popper dropdown is displayed below the modal. Its not a zindex problem but a positioning problem.
Hi
Currently, the KTDataTable component does not support changing the apiEndpoint (data source URL) after it has been initialized. The reload() method will only fetch data from the URL that was set during initialization—it does not update the URL itself.
We will fix the dispose() method. As workaround, you might want to try with the codes:
// 1. Remove the old instance (if it exists)
const oldTable = document.querySelector("#my_datatable");
if (oldTable && oldTable.instance) {
oldTable.instance.dispose(); // This currently does nothing, but is good practice
oldTable.remove(); // Remove the table element from the DOM
}
// 2. Add a new table element (HTML or via JS)
const modalBody = document.querySelector("#modal-body");
modalBody.innerHTML = `
<table data-kt-datatable-table="true">
<!-- table headers and structure here -->
</table>
`;
// 3. Initialize KTDataTable with the new URL
const newTable = document.querySelector("#my_datatable");
const datatable = new KTDataTable(newTable, {
apiEndpoint: "
// ...other config options
});I ended up creating a normal table, not the best solution.
I am experiencing another problem though, if I add a dropdown menu, the dropdown shows up under the modal. In the example pages I saw that it should work: https://keenthemes.com/metronic/tailwind/demo1/account/home/settings-modal.
I tried copying the html of that page, but the problem persists.
<div class="kt-modal kt-modal-center" data-kt-modal="true" data-kt-modal-backdrop-static="true" >
<div class="kt-modal-content w-full max-w-[1000px]">
<div class="kt-modal-header">
<h3 class="kt-modal-title">Title
<div class="kt-menu" data-kt-menu="true">
<div class="kt-menu-item" data-kt-menu-item-offset="0, 10px" data-kt-menu-item-placement="bottom-end"
data-kt-menu-item-placement-rtl="bottom-start" data-kt-menu-item-toggle="dropdown"
data-kt-menu-item-trigger="click">
<button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
<i class="ki-filled ki-dots-vertical text-lg">
</i>
</button>
<div class="kt-menu-dropdown kt-menu-default w-full max-w-[200px]" data-kt-menu-dismiss="true" >
<div class="kt-menu-item">
<a class="kt-menu-link" href="/metronic/tailwind/demo1/account/home/settings-enterprise">
<span class="kt-menu-icon">
<i class="ki-filled ki-setting-3">
</i>
</span>
<span class="kt-menu-title">
Settings
</span>
</a>
</div>
<div class="kt-menu-item">
<a class="kt-menu-link" href="/metronic/tailwind/demo1/account/members/import-members">
<span class="kt-menu-icon">
<i class="ki-filled ki-some-files">
</i>
</span>
<span class="kt-menu-title">
Import
</span>
</a>
</div>
<div class="kt-menu-item">
<a class="kt-menu-link" href="/metronic/tailwind/demo1/account/activity">
<span class="kt-menu-icon">
<i class="ki-filled ki-cloud-change">
</i>
</span>
<span class="kt-menu-title">
Activity
</span>
</a>
</div>
<div class="kt-menu-item">
<a class="kt-menu-link" data-kt-modal-toggle="#report_user_modal" href="#">
<span class="kt-menu-icon">
<i class="ki-filled ki-dislike">
</i>
</span>
<span class="kt-menu-title">
Report
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="kt-modal-body flex flex-col gap-5">
<div >
<table class="kt-table kt-table-border table-layout-fixed rounded-lg">
<thead>
<tr>
<th class=""></th>
</tr>
</thead>
<tbody>
<tr>
<td class="flex justify-center items-center">
<div class="kt-menu" data-kt-menu="true">
<div
class="kt-menu-item" data-kt-menu-item-offset="0, 10px"
data-kt-menu-item-placement="bottom-end"
data-kt-menu-item-toggle="dropdown"
data-kt-menu-item-trigger="click">
<button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
<i class="ki-filled ki-dots-vertical"></i>
</button>
<div class="kt-menu-dropdown kt-menu-default w-full max-w-[175px]" data-kt-menu-dismiss="true" >
<div class="kt-menu-item">
<button type="button" class="kt-menu-link">
<span class="kt-menu-icon pointer-events-none">
<i class="ki-filled ki-edit"></i>
</span>
<span class="kt-menu-title pointer-events-none">
---
</span>
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>If you need to load new data each time you open the modal, try using the update() or reload() methods after opening it. Alternatively, before opening the modal, you can destroy the existing datatable instance using destroy(), then re-initialize it with the new URL. The dispose() method might only remove DOM references, but not fully reset the datatable state. Check out the destroy method in the KTUI docs for a fresh start: https://ktui.io/docs/datatable#methods
