Recently, I stumbled upon a fantastic tool for managing tables and it has been a game-changer for me. However, there is one issue - the tool requires initialization as indicated below, which means it only runs once when the page loads.
mounted: () => {
$(document).ready(function () {
$("table").DataTable();
}
}
I attempted to place the code in both the mounted and created sections. Due to what I suspect is the rendering order, I had to stick with the ready method for it to work properly.
This presents two challenges for me. First, I use the same component as a matrix view in various components (it's dynamically configured based on the store). Second, upon navigating away from the page and returning, the table does not reinitialize.
What is the best approach to ensure that the code within the ready method runs each time the component comes into view?
I have searched online but haven't found much information on this specific issue. The most relevant resource I came across was the lifecycle of the component, although it didn't provide a breakthrough solution. I also discovered that the data table instance needs to be destroyed, but that seems futile if I can't trigger the process.