Two PowerGrid DataTable in One Page, Doing sorting event another table will disappear

[shiroamada]

How to make two powergrid datatable work together in one page?

It is working well when initial data display, but I did filter or sorting. The 2nd Datatable will be disappear.

Anyway I can two tables working well together without disturb the second table.

[luanfreitasdev]

Hello. Could you show the behavior on video?

[shiroamada]

Sure

<h3 class="text-green-500">NEW ORDERS</h3>
<livewire:ready-to-pick-up />

<div class="my-8"></div>

<h3 class="text-red-500">READY TO PICK UP</h3>
<livewire:pick-up-table />

bug.mp4

[luanfreitasdev]

https://livewire-powergrid.com/#/get-started/use-your-powergrid-table?id=passing-arguments

<h3 class="text-green-500">NEW ORDERS</h3>
<livewire:ready-to-pick-up tableName="table1" /> // for example

<div class="my-8"></div>

<h3 class="text-red-500">READY TO PICK UP</h3>
<livewire:pick-up-table tableName="table2" /> // for example

[shiroamada]

I added, but still not working.

bug.mp4

[shiroamada]

composer.json information

[luanfreitasdev]

There is no error in the console?. Have you tried using wire:key?

[shiroamada]

No error in console.
I notice if i do search in bottom table, then top table will not affected. But if I search at the top table, the bottom table will disappear.

if I add wire:key then it is work at the top table but console have error, but the bottom table will throw Live WireException

                    <div wire:key="foo">
                    <livewire:ready-to-pick-up tableName="ready-to-pick-up" :bex_db="$bex_db" :code="$code" :pick_up_from_location="$pick_up_from_location" />
                    </div>

                    <div class="my-8"></div>


                    <h3 class="text-red-500">READY TO PICK UP</h3>
                    <div wire:key="bar">
                    <livewire:pick-up-table tableName="pick-up" :bex_db="$bex_db" :code="$code" :pick_up_from_location="$pick_up_from_location" />
                    </div>

Console Error: