onClick event on <a> or <button> is not working inside Metronic Tailwind DataTable column with NextJs
Hi
I am using Metronic v9.1.2 Tailwind with nextjs v15. But onClick is not working inside the <tbody><tr><td> of KTDataTable. Please tell how to make this onClick work ?
Whereas if i disable KTDataTable initialization then onClick work fine.
<td className="text-center">
<a className="btn btn-link" href="#" onClick={(e) => {e.preventDefault();alert("test");}}>
LinkCaption
</a>
<button onClick={() => alert("test!")}>
ButtonCaption
</button>
</td>
Replies (1)
Deleted comment
Hi,
Can you try delegated Event Handlers in Vanilla JS:
useEffect(() => {
const tableBody = document.querySelector("tbody");
if (tableBody) {
tableBody.addEventListener("click", (e) => {
if (e.target.matches(".btn-link")) {
e.preventDefault();
alert("test");
}
});
}
return () => {
if (tableBody) {
tableBody.removeEventListener("click", () => {});
}
};
}, []);Please try the above. For native Next.js CRUD we would suggest you to wait out new product that we will release in the next week. We will provide full cycle CRUD solutions for next.js within Metronic UI style.
Regards,
Sean
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
