Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
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 (2)
Games that require players to create, locate, or identify words using letters, clues, or categories are known as word games.
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
