Laravel 9 Livewire Datatable With Rappasoft Package

Hello artisan,

In this tutorial, I will show you how to create a functional livewire datatable in laravel 9. Rappasoft laravel livewire datatable is a plugin built for Laravel Livewire that allows us to create simple or advanced dynamic datatables. If you don't know how to use this rappasoft livewire datatable package then this article is for you.

I will simply use User model to generate laravel 9 livewire datatable. We can easily customize and can extends this package. It is very simple to use this package to generate and create laravel 9 livewire datatable. In this laravel 9 livewire datatable tutorial, we will create laravel livewire datatables using laravel rappasoft/laravel-livewire-tables package. So see the preview image that we are going to make:

Step 1 : Install Laravel

I am going to start from scratch. So download a fresh Laravel project using the below command:

composer create-project laravel/laravel example-app

Step 2 : Create Dummy Records

We need to run the following command to create dummy records in your user's table. let's run both commands:

php artisan tinker
App\Models\User::factory()->count(100)->create()

Read also: Laravel 9 Livewire Datatables Example Step by Step

Step 3: Install Livewire & livewire-datatable

Now in this step, we will simply install livewire to our laravel application using below command:

composer require rappasoft/laravel-livewire-tables

//now

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations

Step 4: Create Component

Now here we will create a livewire component using their command. so run the below command to create the data tables component.

php artisan make:datatable UserTable User

Now update the users table class like:

App\Http\Livewire\UserTable.php

namespace App\Http\Livewire;

use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use App\Models\User;

class UserTable extends DataTableComponent
{   
    protected $model = User::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
        $this->setSearchEnabled();
        $this->setSearchDebounce(1000);
    }

    public function columns(): array
    {
        return [
            Column::make("Id", "id")
                ->sortable(),
            Column::make("Name", "name")
                ->sortable(),
            Column::make("Email", "email")
                ->sortable(),
            Column::make("Created", "created_at")
                ->sortable()
        ];
    }

    public function filters(): array
    {
        return [];
    }
}

Step 5: Create Route

Now we will create one route for calling our example, so let's add a new route to the web.php file as below:

routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('datatables', function () {
    return view('welcome');
});

Step 6: Create View File

Now update the welcome file like the below:

resources/views/welcome.blade.php

Read also: Laravel 9 Rest API Development with Laravel Orion

Hope it can help you.