Livewire & Column Sortable

[kevintresuelo]

Hi! I've ran into an issue when @sortablelink() is placed inside a livewire component. When livewire updates its components, the link of the sortable also changes, which is replaced by some sort of fingerprint. Following code produces the error:

livewire table, using Livewire/WithPagination:

<div>
  <table>
    <thead>
      <tr>
        <th>
          @sortablelink('name', 'Name')
        </th>
      </tr>
    </thead>
    <tbody>
      @foreach($users as $user)
        <tr>...</tr>
      @endforeach
    </tbody>
  </table>
  {{ $users->links() }}
</div>

When the page first loads, the URL of the heading points to

http://localhost/users?sort=name&direction=asc

but after switching pages using Livewire's pagination, it now points to

http://localhost/livewire/message/users.users-table?fingerprint%5Bid%5D=v6Zb7qW4xmXvLXU0kghM&fingerprint%5Bname%5D=users.users-table&fingerprint%5Blocale%5D=en&fingerprint%5Bpath%5D=users&fingerprint%5Bmethod%5D=GET&serverMemo%5BhtmlHash%5D=9484b845&serverMemo%5Bdata%5D%5Bsort%5D=name&serverMemo%5Bdata%5D%5Bdirection%5D=desc&serverMemo%5Bdata%5D%5Bpage%5D=2&serverMemo%5Bchecksum%5D=1b6b1aeb0105128d0ff7a96a3f5071f5f72baaec04d7b18a49d7333f5ee415ef&updates%5B0%5D%5Btype%5D=callMethod&updates%5B0%5D%5Bpayload%5D%5Bmethod%5D=nextPage&sort=name&direction=asc

[Kyslik]

I am not familiar with livewire; perhaps it uses some JS to manipulate DOM? I don't think I can help here.

[DanielSpindler]

hey @kevintresuelo ive ran into the same issue, do you by any chance remember how you fixxed it?

[Healyhatman]

Best bet is probably to specify the href attribute

[DanielSpindler]

i just made it so that clicking the Sort redirects to the first page of the Table. Solved one of the Problems. (Who would want to sort midways anyway) thanks for the Suggestion @Healyhatman

[Shaka-60hp]

i just made it so that clicking the Sort redirects to the first page of the Table. Solved one of the Problems. (Who would want to sort midways anyway) thanks for the Suggestion @Healyhatman

How? could you post the solution as an example? ... Thanks

[Uryon987]

Got same issue, if anyone found a solution please give us a feedback :)