[Bug]: Sorting breaks table when using LivewireComponentColumn

[maikezan]

What happened?

Clicking a field column header with sorting enabled, should apply the requested sort with no errors. Instead the sort is applied but then the datatable breaks.
Filtering and columns visibility seems to work fine.

How to reproduce the bug

Build a datatable, use a LivewireComponentColumn as one of the columns.
Click on any orderable field. Data is sorted but the table breaks.
This is more evident if you enable bulk actions. because some checkboxes disappears like the screenshots below

In browser console there is the following js, livewire related error:

Uncaught Component already initialized

Package Version

3.4.16

PHP Version

8.3.x

Laravel Version

11.21.0

Alpine Version

3.14.1

Theme

Tailwind 3.x

Notes

No response

Error Message

Uncaught Component already initialized

[maikezan]

Small but important update, also linking to this other issue: #1644

the issue seems to be resolved by providing a unique key in the attributes of the LivewireComponentColumn. Looking at the source code i thought that the key was already being passed by the main class, instead it needs to be passed through the attributes:

 LivewireComponentColumn::make(__('Something'), 'some_field')
                  ->component('some_component_name')->attributes(function ($columnValue, $row) {
                      return [
                          ......
                          'key' => '<something_unique>'
                      ];
                  })

[lrljoe]

@maikezan - so by default, it should receive a wire key of

$row->{$row->getKeyName()}

However - your approach is absolutely fine.

Can I ask what you're using a Livewire Component Column for? It's certainly an edge case!

[maikezan]

Hi @lrljoe !
Thanks for feedback.
Aboute the wire key, for some reason, it didn't work the way it was expected, causing the mentioned issues when refreshing the table .
Only by explicitely passing the key attribute we were able to make it work.

About why we chose the livewire column:
this particular datatable have data that shows live state of devices and stuff related to them.
Some field needs to be updated frequently as a result of some external event that we broadcast via websocket channels (a device calls an api endpoint for example, and that trigger some event that changes some data , and we need to show it in real time when it happens).
Refreshing the entire table in these kind of scenario may be too much so we ended up trying the livewire component approach.
While we understand the performance issue at larger scale, it may be good enough for now since we don't have many many records to handle.

[lrljoe]

Hi @lrljoe ! Thanks for feedback. Aboute the wire key, for some reason, it didn't work the way it was expected, causing the mentioned issues when refreshing the table . Only by explicitely passing the key attribute we were able to make it work.

About why we chose the livewire column: this particular datatable have data that shows live state of devices and stuff related to them. Some field needs to be updated frequently as a result of some external event that we broadcast via websocket channels (a device calls an api endpoint for example, and that trigger some event that changes some data , and we need to show it in real time when it happens). Refreshing the entire table in these kind of scenario may be too much so we ended up trying the livewire component approach. While we understand the performance issue at larger scale, it may be good enough for now since we don't have many many records to handle.

That seems like a legitimate and typical use case for a Livewire Component Column, so no moans from me!

Now, you COULD do that listening via AlpineJS., keeping things client-side, and smoother, which at scale would be better, but if you're dealing with a production instance, which has <5,000 concurent users on the site, then this really won't make too much of a difference

I will definitely take a look at the Livewire Component Column to look at what's going awry, as it should absolutely "just work".

Sharing a "working" and "non-working" example helps immensely here. (feel free to ping me on the official Discord should you wish).