Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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>
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
Please or to participate in this conversation.