How to order column by relationship in Laravel Livewire - laravel

Question

I've just followed this tutorial about implementing a data table with Livewire in Laravel.
So far so good. Now I want to order a column that comes from a one-to-one relationship, but I just can't get the sorting work well when selecting this phones relationship column.
In this case, phones is the relationship method and number is the column I display in the table, which I want to allow the sorting, as well.
How do I implement the sorting by column relationship?
Here is part of my code of the livewire blade (original repo of the tutorial):
<select wire:model="orderBy" class="...">
<option value="firstname">Name</option>
<option value="lastname">Lastname</option>
<option value="email">E-mail</option>
<option value="phones">Phone number</option>
</select>
...
<table class="table-auto w-full mb-6">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Lastname</th>
<th class="px-4 py-2">E-mail</th>
<th class="px-4 py-2">Phone number</th>
</tr>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<td class="border px-4 py-2">{{ $user->firstname }}</td>
<td class="border px-4 py-2">{{ $user->lastname }}</td>
<td class="border px-4 py-2">{{ $user->email }}</td>
<td class="border px-4 py-2">{{ $user->phones->number }}</td>
</tr>
#endforeach
</tbody>
</table>
{!! $users->links() !!}
And here is the Livewire controller (original repo of the tutorial):
class UsersTable extends Component
{
use WithPagination;
public $perPage=5;
public $search = '';//Search string
public $orderBy='firstname';
public $orderAsc=true;
public $relationship_columns=['phones'];
public function render()
{
if(!in_array($this->orderBy,$this->relationship_columns)){
$users = User::search($this->search)
->orderBy($this->orderBy,$this->orderAsc ? 'asc' : 'desc')
->simplePaginate($this->perPage);
}else if($this->orderBy=='phones'){
$order = $this->orderAsc ? 'asc': 'desc';
$users = User::search($this->search)
->with(['phones' => function ($q) use($order){
$q->orderBy('number',$order);
}])
->simplePaginate($this->perPage);
}
return view('livewire.users-table',compact('users'));
}
}
Reference.
The sorting of (order by) phones is not working well. It seems it sorts some parts well, but in general, sorting is flawed. It can be sorted neither ascendant nor descendant.
Looks like the sorting type (asc,desc) is not taking effect in
$q->orderBy('number',$order);
Moreover, if I use the whereHas() method:
$order = $this->orderAsc ? 'asc': 'desc';
$users = User::search($this->search)
->whereHas('phones',function ($q) use($order){
$q->orderBy('number',$order);
})
->simplePaginate($this->perPage);
I get the following error:
SQLSTATE[HY000]: General error: 20018 The ORDER BY clause is invalid
in views, inline functions, derived tables, subqueries, and common
table expressions, unless TOP, OFFSET or FOR XML is also specified.
[20018] (severity 15)
What am I missing? Any ideas on how to fix this?
How do I implement the order by functionality on the relationship column in Livewire?

Answer 1

Based on these posts Ordering database queries by relationship columns in Laravel and Laravel Eloquent whereColumn Query Example, I have solved the ordering by relationship this way:
I set any name to the relationship, in the parameter search function, let's say phone.number.
Then, with an if statement I detect if the ordering is that relationship:
if($this->field == 'phone.number'){
$users = $users->orderBy(\App\Models\Phone::select('number')->whereColumn('users.phone_id','phones.id'));
}else{
$users = $users->orderBy($this->field,$this->order);
}
Moreover, in this answer it is explained how to search inside a column relationship.

Answer 2

You can use
$user = User::search($this->search)
->whereHas('phones', function ($q){
$q->orderBy('number', $order);
})
->simplePaginate($this->perPage);
instead of
$users = User::search($this->search)
->with(['phones' => function ($q) use($order){
$q->orderBy('number',$order);
}])
->simplePaginate($this->perPage);