I’ve created a simple application with one report (installation instructions below).

I’m having an issue with JavaScript and Livewire. After selecting a delivery date, the JavaScript for the filters and the CSS for the table stop working. The component also uses wire:navigate and the #[Lazy] attribute.

Link to project on git Link to DataTable

Instalation:

1. Download repository and unpack
2. Execute command cd stack-livewire-datatable
3. Execute command ./vendor/bin/sail up -d
4. Execute command ./vendor/bin/sail artisan migrate && ./vendor/bin/sail artisan db:seed

Seeder will create 20000 unique orders:

 public function run(): void
{
    $array = [];
    for($i = 1; $i <= 20000; $i++){
        $array[] = [
            'order_no' => 100000 + $i,
            'delivery_date' => Carbon::now()->addDays(rand(-10, 10)),
            'delivery_method' => 'FedEx',
            'quantity' => rand(1, 100),
            'created_at' => Carbon::now()->addDays(rand(-10, 10)),
        ];
    }
    $array = array_chunk($array,1000);
    foreach($array as $item){
        Order::query()->insert($item);
    }
}

Report after first run: Click

Report after select Delivery Date and press Show: Click

As you can see, filters disappired. Anyone will be able to help?

EDIT: Script i'm using to run filters is in orders.blade.php file:

<div x-data="initFilters()"></div>
@script
<script>
    Alpine.data('initFilters',() => ({
        init() {
            let tf_config = {
                sort: true,
                alternate_rows: false,
                status: false,
                sort_config: {
                    sort_types:['Number','String','Number','Number','Number','Number','Number','String']
                },
                display_all_text: "< Show All >",
                col_0: 'input',
                col_1: 'input',
                col_2: 'select',
                col_3: 'select',
                col_4: 'select',
                col_5: 'select',
                col_8: 'select',
                col_9: 'select',
                col_10: 'select',
                col_11: 'select',

                external_flt_grid: true,
                external_flt_grid_ids: [null,'order_no','delivery_method'],
                

            };
            setFilterGrid("table",tf_config);

        }}));
</script>
@endscript