DataTables Conflicts with Alpine.js Causing Rows to Be Hidden

[deepakkumar1984]

I'm encountering an issue when integrating DataTables with Alpine.js. When rendering table rows dynamically using Alpine.js (x-for), the rows initially appear but are then hidden after DataTables initialization. This works fine when the rows are part of html.
Could be alphine DOM manipulation causing the rows to hide?

Steps to Reproduce:

• Use Alpine.js to render rows dynamically in a table using x-for.
• Initialize DataTables on the table after Alpine.js has rendered the DOM.
• Trigger a search or dynamically update the table rows.
• Observe that:
• Rows are hidden immediately after appearing.
• Using rows().invalidate().draw() in drawCallback causes browser freezing or memory leaks.

Environment:
Alpine.js Version: 3.x.x
DataTables Version: 1.13.6
Browser: Chrome 118 / Firefox 118 (latest)

Additional Information:
I attempted to use this.$nextTick() in Alpine.js to ensure DataTables initializes only after the DOM is fully rendered. I also tried using rows().invalidate().draw() to refresh the table, but this caused the browser to freeze.

Example:

https://gist.github.com/deepakkumar1984/2690915ce91356c7aca6d0886b82273a

[SimoTod]

jQuery datatable is not really compatible with Alpine because of the way it works. That plugin removes elements from the dom and re insert different html and it breaks alpine metadata.

Also don't assign the datatable instance (or any other third party complex object) to a reactive property (that's likely the reason why the browser is freezing).