Laravel Livewire Sorting by columns in tables - Datatable
In this chapter, we are going to work on column ordering individually and ascending/descending for each column that we have in the list.
The scheme that we are going to follow, in order to be able to easily order all the columns of a list, is defining the columns that we are going to show in the list at the level of a property in the Livewire component; with this, we can easily indicate the click events based on the structure proposed in this book:
app/Http/Livewire/Dashboard/Post/Index.php
class Index extends Component
{
use WithPagination;
// ***
// order
public $sortColumn = 'id';
public $sortDirection = 'desc';
public $columns = [
'id' => "Id",
'title' => "Title",
'date' => "Date ",
'description' => "Description",
'posted' => "Posted",
'type' => "Type",
'category_id' => "Category",
];
public function render()
{
//$this->confirmingDeletePost = true;
$posts = Post::orderBy($this->sortColumn,$this->sortDirection);
if ($this->search)
// ***
}
// order
public function sort($column)
{
$this->sortColumn = $column;
$this->sortDirection = $this->sortDirection == 'asc' ? 'desc' : 'asc';
}Explanation of the above code
The column of $columns we define the columns that we are going to show in the list, like; for example:
'id' => "id",As the key of the array, we indicate the name of the column in the database (the name of the property in the model).
As value, it is the label or text that we are going to place as header in the table.
The $sortColumn and $sortDirection properties define the column that we are going to sort at a given time and the type (ascending or descending), respectively.
In the view:
resources/views/livewire/dashboard/post/index.blade.php
***
<table class="table w-full border">
<thead class="text-left bg-gray-100 ">
<tr class="border-b">
@foreach ($columns as $key => $c)
<th>
<button wire:click="sort('{{ $key }}')">
{{ $c }}
@if ($key == $sortColumn)
@if ($sortDirection == 'asc')
↑
@else
↓
@endif
@endif
</button>
</th>
@endforeach
<th class="p-2">
Actions
</th>
</tr>
</thead>
***Video Transcript
Lets start by defining the property up here to define each of the columns just as I explained to you before then we put columns it will be the same it is important again here you have to put the name of the column in this case it is ID which is the first field that I am going to put and this would be the Label it can have any other that you want identification simply put ID the next would be title try to make it easier for it to be exactly in the order in which they appear in the list:
public $sortColumn = 'id';
public $sortDirection = 'desc';***
<table class="table w-full border">
<thead class="text-left bg-gray-100 ">
<tr class="border-b">
@foreach ($columns as $key => $c)
<th>
<button wire:click="sort('{{ $key }}')">
{{ $c }}
@if ($key == $sortColumn)
@if ($sortDirection == 'asc')
↑
@else
↓
@endif
@endif
</button>
</th>
@endforeach
<th class="p-2">
Actions
</th>
</tr>
</thead>
***The following properties to define would be direction and column:
public $columns = [
'id' => "Id",
'title' => "Title",
'date' => "Date ",
'description' => "Description",
'posted' => "Posted",
'type' => "Type",
'category_id' => "Category",
];With which the direction is specified whether it is ascending or descending and the column
In the render function in the render method we would apply the sorting here I left it using the would be to place it here here there is an important step that is not initialized then we would have the direction here that is whether it is ascending or descending
We would need to define the fields in the table now so you have to remove all of this without the actions because that is not defined and it is not a column by which we are going to filter you remove it you remove it I am going to leave it commented there so that you have it as a reference and we come here with the for each before each part and we define the columns in the TR
The next step would be the direction which as I indicated we do from here directly direction will be equal to direction we indicate that if this is equal equal ascending then here we do the to again here we are comparing that it is equal equal ascending So as we are calling est or this method we invert it and we put that it will be descending otherwise we put that it is ascending in the same way now that you see it working in case you still do not locate it well you will see how it works and that would be practically everything
public function sort($column)
{
$this->sortColumn = $column;
$this->sortDirection = $this->sortDirection == 'asc' ? 'desc' : 'asc';
}- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter