What seems to be the problem:
I have a table that shows a bunch of records, but I am using the Simple Data Tables plugin on it (https://github.com/fiduswriter/Simple-DataTables).
This works great:
<div
x-data="{ dataTable: null }"
x-init="
dataTable = new simpleDatatables.DataTable($refs.dataTable, {
searchable: true,
fixedHeight: false,
});
@this.on('notify-uploaded', () => {
// triggered from component
// if the code below is present, the new row never appears but if it is,
// the new row will appear but disappear as soon as any table headers are clicked
dataTable.destroy();
dataTable = new simpleDatatables.DataTable($refs.dataTable, {
searchable: true,
fixedHeight: false,
});
})
"
>
<table x-ref="dataTable">
...
</table>
</div>
but after the livewire component is updated, the new row appears in the table, but as soon as I use any of the filters at the top of the table, the new row disappears.
Using wire:ignore just means that the new row never appears at all.
I am trying to use dataTable.destroy() and then re-do the original initialise but this doesn’t seem to work.
The table without the js plugin applied works fine.
Does anyone have any advice on how to approach this?
Cheers,
Martin
Steps to Reproduce:
Display Eloquent results in a html table, apply Simple DataTables plugin, perform an action that updates the table.
Are you using the latest version of Livewire:
Yes
Do you have any screenshots or code examples:
Table on page load:
Same after upload but if I remove the part where I try to destroy and re-initialise I get the new row appearing but if I click any of the table headers, it appears as in the first screenshot.