Site Admin
Site Admin Founder of MeaningArticles
30 Views

Laravel 5 handle Column sorting

Hello Dev.

We have new package kyslik/column-sortable[https://github.com/Kyslik/column-sortable] for Laravel to handle column sorting. With the help of this package, you can sort the column in ascending or descending order. This is useful in Admin panel where there are lots of data showing.

So lets start building the application. We will go through step by step guide.
 

Step 1: Create new Laravel project

In the first step, we have created new Laravel project using below command

composer create-project laravel/laravel column

 

Step 2: Install package

In the next step we will install the kyslik/column-sortable package in the application.

composer require kyslik/column-sortable

 

Step 3: Configure package

Now open Aad the service provider to array of providers in config/app.php

'providers' => [

    App\Providers\RouteServiceProvider::class,

    /*
     * Third Party Service Providers...
     */
    Kyslik\ColumnSortable\ColumnSortableServiceProvider::class,
],

Publish the configuration file for kyslik/column-sortable package in Laravel. This will add configuration file config/columnsortable.php to make adjustments if you want.

 

Step 4: Add trait to User.php Model

Now, add Sortable trait to the User.php model and add $sortable variable.

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Kyslik\ColumnSortable\Sortable;

class User extends Model implements
{
    use Authenticatable, Sortable;
    ...

    public $sortable = ['id',
                        'name',
                        'email',
                        'created_at',
                        'updated_at'];
}

 

php artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"

 

Step 5: Add route

Add route to show user data table so that we can sorting features.

<?php

Route::get('users', 'UserController@index');

 

Step 6: Create controller

Create controller file to hanle route.

<?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * list all users.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::sortable()->paginate(10);

        return view('users',compact('users'));
    }
}

 

Step 7: Create blade file to view table

Finally create view file resource/views/users.blade.php and add below code in that file.

<!DOCTYPE html>
<html>
<head>
    <title>Column sorting</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
	    <h3 class="text-center">Laravel column sorting</h3>
	    <table class="table table-bordered">
	        <tr>
	            <th>@sortablelink('id')</th>
	            <th>@sortablelink('name')</th>
	            <th>@sortablelink('email')</th>
	            <th>@sortablelink('created_at','Created At')</th>
	        </tr>
	        @if($users->count())
	            @foreach($users as $user)
	                <tr>
	                    <td>{{ $user->id }}</td>
	                    <td>{{ $user->name }}</td>
	                    <td>{{ $user->email }}</td>
	                    <td>{{ $user->created_at->diffForHumans() }}</td>
	                </tr>
	            @endforeach
	        @endif
	    </table>
	    {!! $users->appends(\Request::except('page'))->render() !!}
	</div>
</body>
</html>

Now run the project with below command

php artisan serve

Open route link

http://localhost:8000/users

I hope it can help you, thanks for visit my articles if you like my article then share with your friend and social platform.