ktui: [
{
src: ["node_modules/@keenthemes/ktui/dist/ktui.min.js"],
dist: "/vendors/ktui/ktui.min.js",
},
],

document.addEventListener("DOMContentLoaded", () => {
 console.log("DATATABLE FIX (v2): Initializing sticky header fix...");

 const headerElement = document.querySelector("#header");
 const datatableElement = document.querySelector("[data-kt-datatable="true"]");

 if (!datatableElement || !headerElement) {
 console.error("DATATABLE FIX (v2): Could not find datatable or header element.");
 return;
 }
 console.log("DATATABLE FIX (v2): Found datatable and header elements.");

 const sticky = KTSticky.getOrCreateInstance(headerElement);

 if (!sticky) {
 console.error("DATATABLE FIX (v2): Could not get or create KTSticky instance.");
 return;
 }
 console.log("DATATABLE FIX (v2): Sticky instance ready.");

 // --- The Fix ---
 // Check if the datatable has already been initialized.
 // The "datatable-initialized" class is added after the first draw.
 if (datatableElement.classList.contains("datatable-initialized")) {
 console.log("DATATABLE FIX (v2): Datatable was already initialized. Manually calling sticky.update() once to fix initial state.");
 sticky.update();
 }

 // Always attach the event listener for subsequent redraws (pagination, sorting, etc.)
 datatableElement.addEventListener("kt.datatable.drew", function() {
 console.log("DATATABLE FIX (v2): "kt.datatable.drew" event fired. Calling sticky.update().");
 sticky.update();
 });

 console.log("DATATABLE FIX (v2): Event listener for "kt.datatable.drew" is now active for future redraws.");
});

document.addEventListener("DOMContentLoaded", () => {
 console.log("DATATABLE FIX: Initializing sticky header fix...");

 // Using the corrected header selector for Demo 2
 const headerElement = document.querySelector("#header");
 const datatableElement = document.querySelector("[data-kt-datatable="true"]");

 if (!datatableElement) {
 console.error("DATATABLE FIX: Datatable element not found. Please check the selector `[data-kt-datatable="true"]`.");
 return;
 }
 console.log("DATATABLE FIX: Datatable element found:", datatableElement);

 if (!headerElement) {
 console.error("DATATABLE FIX: Header element not found. Please check the selector `#header`.");
 return;
 }
 console.log("DATATABLE FIX: Header element found:", headerElement);

 // Use getOrCreateInstance to safely get the instance or create it if it doesn"t exist yet.
 // This resolves potential timing issues.
 const sticky = KTSticky.getOrCreateInstance(headerElement);

 if (sticky) {
 console.log("DATATABLE FIX: Successfully found or created KTSticky instance:", sticky);

 datatableElement.addEventListener("kt.datatable.drew", function() {
 console.log("DATATABLE FIX: "kt.datatable.drew" event fired. Calling sticky.update().");
 sticky.update();
 });

 console.log("DATATABLE FIX: Event listener for "kt.datatable.drew" is now active.");

 } else {
 console.error("DATATABLE FIX: CRITICAL - Failed to get or create a KTSticky instance. The header element may be missing the `data-kt-sticky=\"true\"` attribute which is required for initialization.");
 }
});

document.addEventListener("DOMContentLoaded", () => {
 // Select the datatable and the sticky header elements
 const datatableElement = document.querySelector("[data-kt-datatable="true"]");
 const headerElement = document.querySelector("#kt_header");

 // Ensure both elements exist before proceeding
 if (!datatableElement || !headerElement) {
 console.warn("Datatable or Header element not found. The sticky header fix will not be applied.");
 return;
 }

 // Get the KTSticky instance for the header
 const sticky = KTSticky.getInstance(headerElement);

 if (sticky) {
 // When the datatable finishes redrawing, update the sticky header"s position
 datatableElement.addEventListener("kt.datatable.drew", function() {
 sticky.update();
 });
 } else {
 console.warn("Could not find KTSticky instance for the header element.");
 }
});