Issue with Preline DataTables and Livewire: Table Disappears When Data Is Updated Without wire:ignore

[zikrimuhammad09]

I’m working with Livewire and Preline DataTables in a Laravel project. I have a table that uses Preline DataTables to display data dynamically managed by Livewire. When I add new data (without using wire:ignore), the table data updates successfully, but the DataTable functionality (like sorting and pagination) disappears.

If I add wire:ignore to the table, the DataTable functionality works, but the table data doesn't update when new data is added.

Has anyone encountered a similar issue or found a solution?

Thanks in advance!

@section('page-title', 'Daftar Faktur')
@section('breadcrumb')
    @include('components.breadcrumb', ['breadcrumbs' => $breadcrumbs ?? []])
@endsection
<div>
    <div class="flex flex-col p-4 mt-4 bg-white border shadow-sm rounded-xl md:p-5">
        <div id="hs-datatable-faktur-barang"
            data-hs-datatable='{
                    "pageLength": 10,
                    "pagingOptions": {
                    "pageBtnClasses": "size-9 flex justify-center items-center border border-base-200/2 hover:bg-secondary-parsinta/90 rounded-lg focus:outline-none focus:bg-gray-100 py-2.5 text-sm disabled:opacity-50 disabled:pointer-events-none"
                    },
                    "language": {
                    "zeroRecords": "<div class=\"py-10 px-5 flex flex-col justify-center items-center text-center \"><svg class=\"shrink-0 size-6 text-gray-500 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg><div class=\"max-w-sm mx-auto\"><p class=\"mt-2 text-sm text-gray-600\">Data tidak ditemukan</p></div></div>"
                    }
                }'>
            <div class="flex flex-wrap items-center justify-between gap-3 py-3">
                <div class="relative max-w-xs">
                    <label for="hs-table-input-search" class="sr-only">Cari</label>
                    <input type="text" name="hs-table-search" id="hs-table-input-search"
                        class="block w-full px-3 py-2 text-sm border-gray-200 rounded-lg shadow-sm ps-9 focus:z-10 focus:border-green focus:ring-green disabled:opacity-50 disabled:pointer-events-none"
                        placeholder="Cari..." data-hs-datatable-search="">
                    <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
                        <x-ri-search-line class="text-gray-400 size-4" />
                    </div>
                </div>
                <div class="inline-flex items-center space-x-3">
                    <button type="button"
                        class="inline-flex items-center px-3 py-2 text-sm font-medium text-white transition border border-transparent rounded-lg bg-green-dark gap-x-2 hover:bg-green focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
                        aria-haspopup="dialog" aria-expanded="false" aria-controls="modal-tambah-faktur-barang"
                        data-hs-overlay="#modal-tambah-faktur-barang">
                        <x-ri-add-fill class="size-6" />
                        Tambah Faktur Barang
                    </button>
                </div>
            </div>

            {{-- Modal Tambah Faktur Barang --}}
            <livewire:persediaan.forms.faktur-barang.tambah-faktur-barang />

            <div class="overflow-x-auto">
                <div class="inline-block min-w-full align-middle">
                    <div class="overflow-hidden">
                        <table id="table-faktur" wire:loading.class="transition opacity-50" class="min-w-full border">
                            <thead class="border-gray-200 border-y">
                                <tr class="text-white bg-green-dark2">
                                    <th scope="col" class="py-1 font-normal group text-start focus:outline-none">
                                        <div
                                            class="py-1 px-2.5 inline-flex items-center border border-transparent text-sm font-semibold rounded-md">
                                            No
                                        </div>
                                    </th>
                                    <th scope="col" class="py-1 font-normal group text-start focus:outline-none">
                                        <div
                                            class="py-1 px-2.5 inline-flex items-center border border-transparent text-sm font-semibold rounded-md">
                                            Unit Kerja
                                            <div class="d-flex align-items-center">
                                                <x-ri-arrow-up-s-line
                                                    class="size-3.5 ms-1 -me-0.5  text-gray-400 hs-datatable-ordering-asc:text-white" />
                                                <x-ri-arrow-down-s-line
                                                    class="size-3.5 ms-1 -me-0.5 -mt-[.44rem] text-gray-400 hs-datatable-ordering-desc:text-white" />
                                            </div>
                                        </div>
                                    </th>

                                    <th scope="col" class="py-1 font-normal group text-start focus:outline-none">
                                        <div
                                            class="py-1 px-2.5 inline-flex items-center border border-transparent text-sm font-semibold  rounded-md">
                                            Kode Akun
                                            <div class="d-flex align-items-center">
                                                <x-ri-arrow-up-s-line
                                                    class="size-3.5 ms-1 -me-0.5  text-gray-400 hs-datatable-ordering-asc:text-white" />
                                                <x-ri-arrow-down-s-line
                                                    class="size-3.5 ms-1 -me-0.5 -mt-[.44rem] text-gray-400 hs-datatable-ordering-desc:text-white" />
                                            </div>
                                        </div>
                                    </th>

                                    <th scope="col"
                                        class="flex justify-center py-1 font-normal group focus:outline-none">
                                        <div
                                            class="py-1 px-2.5 inline-flex items-center border border-transparent text-sm font-semibold  rounded-md">
                                            Aksi
                                            <div class="d-flex align-items-center">
                                                <x-ri-arrow-up-s-line
                                                    class="size-3.5 ms-1 -me-0.5  text-gray-400 hs-datatable-ordering-asc:text-white" />
                                                <x-ri-arrow-down-s-line
                                                    class="size-3.5 ms-1 -me-0.5 -mt-[.44rem] text-gray-400 hs-datatable-ordering-desc:text-white" />
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach ($fakturBarang as $faktur)
                                    <tr wire:key='faktur-{{ $faktur['id'] }}' class="hover:bg-gray-50">
                                        {{-- No --}}
                                        <td class="p-3 text-sm font-medium text-gray-800 whitespace-nowrap">
                                            {{ $loop->iteration }}
                                        </td>
                                        <!-- Unit Kerja -->
                                        <td class="p-3 text-sm font-medium text-gray-800 whitespace-nowrap">
                                            UPT TIK
                                        </td>
                                        <!-- Kode Akun -->
                                        <td class="p-3 text-sm text-gray-800 whitespace-nowrap">
                                            {{ $faktur['stockAccountId'] }}
                                        </td>

                                        <!-- Kolom Aksi -->
                                        <td
                                            class="flex justify-center gap-2 p-3 text-sm font-medium text-center whitespace-nowrap">
                                            1
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>

            {{-- Pagination  --}}
            <x-datatable.pagination />
        </div>
    </div>
</div>

pagination blade component:

<div class="hidden px-4 py-1 mt-2" data-hs-datatable-paging="">
    <nav class="flex items-center justify-center space-x-1">
        <button type="button"
            class="inline-flex items-center justify-center text-sm border rounded-lg size-9 border-base-200/2 hover:bg-secondary-parsinta/90 gap-x-2 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
            data-hs-datatable-paging-prev="">
            <span aria-hidden="true">
                <x-heroicon-o-chevron-left class="size-4" />
            </span>
            <span class="sr-only">Previous</span>
        </button>
        <div class="flex items-center space-x-1 [&>.active]:bg-green-dark2 [&>.active]:text-dark"
            data-hs-datatable-paging-pages=""></div>
        <button type="button"
            class="inline-flex items-center justify-center text-sm border rounded-lg size-9 border-base-200/2 hover:bg-secondary-parsinta/90 gap-x-2 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
            data-hs-datatable-paging-next="">
            <span class="sr-only">Next</span>
            <span aria-hidden="true">
                <x-heroicon-o-chevron-right class="size-4" />
            </span>
        </button>
    </nav>
</div>

[zikrimuhammad09]

I've done this, but it doesn't work either

@script
    <script>
        HSTooltip.autoInit();
        $wire.on('closeModal', function() {
            const datatable = document.querySelector('#hs-datatable-faktur-barang');
            const {
                element
            } = HSDataTable.getInstance(datatable, true);

            element.destroy();

            HSDataTable.autoInit();
        });
    </script>
@endscript