Laravel 10 Livewire Datatables Tutorial

Datatables are a popular way to display large amounts of data in a tabular format that is easy to navigate and understand. In this tutorial, we will show you how to create dynamic datatables using Laravel 10 and Livewire.

Prerequisites: Before you start, make sure you have the following installed on your system:

• PHP 7.4 or higher
• Laravel 10
• Livewire

Step 1: Setting up the project

The first step is to create a new Laravel project and install Livewire. Open your terminal and run the following commands:

laravel new datatable-demo
cd datatable-demo
composer require livewire/livewire

These commands create a new Laravel project called “datatable-demo” and install the Livewire package. The first command creates a new Laravel project with the name “datatable-demo”. The second command changes the current directory to the new project directory. The third command installs the Livewire package via Composer, which allows us to use Livewire components in our project.

Step 2: Creating a Livewire component

Now that we have set up the project, we can create a Livewire component that will display our datatable. Run the following command in your terminal:

php artisan make:livewire UsersTable

This will create a new Livewire component in the app/Http/Livewire directory.

Step 3: Defining the datatable

Next, we will define the datatable that we want to display in our component. We will use the DataTable package to make this process easier. Run the following command in your terminal to install the package:

composer require yajra/laravel-datatables-oracle

Now, let’s define our datatable. In the UsersTable component, add the following code:

use Yajra\DataTables\DataTables;

class UsersTable extends Component
{
    public function render()
    {
        $users = User::query();
        return view('livewire.users-table', [
            'datatable' => DataTables::of($users)->make(true),
        ]);
    }
}

This code defines a Livewire component called “UsersTable” and a render method that retrieves all users from the database and passes them to the DataTables package. The of() method creates a new DataTable instance and the make() method returns the data in JSON format. The view() function returns the Livewire view called users-table.blade.php and passes the datatable instance to it using the $datatable variable. The view can then display the datatable using the $datatable variable.

This code fetches all the users from the database and passes them to the DataTables package. The of() method creates a new datatable and the make() method returns the datatable in JSON format.

Step 4: Displaying the datatable

Now that we have defined our datatable, we can display it in our Livewire component. Create a new view file called users-table.blade.php in the resources/views/livewire directory and add the following code:

<div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($datatable['data'] as $user)
                <tr>
                    <td>{{ $user['id'] }}</td>
                    <td>{{ $user['name'] }}</td>
                    <td>{{ $user['email'] }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

This code defines the view for the Livewire component called “UsersTable”. It displays a simple HTML table with headers for the “ID”, “Name”, and “Email” columns. The @foreach directive is used to loop through the data returned by the DataTables package and display each user’s ID, name, and email in the corresponding columns of the table. The data is accessed using the $datatable variable, which was passed to the view from the component’s render() method. The table itself is wrapped in a div element for styling purposes.

This code displays a simple HTML table with the ID, name, and email of each user.

Step 5: Adding interactivity

Now that we have a basic datatable, we can add interactivity to it. Let’s add sorting and searching functionality to our datatable. In the UsersTable component, modify the render() method as follows:

public function render()
{
    $users = User::query();
    return view('livewire.users-table', [
        'datatable' => DataTables::of($users)
            ->addColumn('action', function($user){
                return '<a href="/users/'.$user->id.'/edit">Edit</a>';
            })
            ->rawColumns(['action'])
            ->make(true),
   

This code modifies the render() method of the “UsersTable” Livewire component to add a new column called “action” to the datatable. The addColumn() method is used to define the contents of the “action” column. In this case, it creates a link to the edit page for each user using the user’s ID. The rawColumns() method is used to tell the DataTables package that the “action” column contains HTML, which allows the link to be displayed correctly in the table. Finally, the make() method is called to return the modified datatable data in JSON format.

This modified code adds a new column called “action” to our datatable. In this column, we create a link to the edit page for each user. We also use the rawColumns() method to tell the DataTables package that the “action” column contains HTML.

Step 6: Styling the datatable

Finally, let’s add some styling to our datatable using Tailwind CSS. In the users-table.blade.php file, add the following classes to the table element:

<table class="min-w-full divide-y divide-gray-200">

This code adds some basic styling to our table, including borders and alternating row colors. You can customize these styles to fit your specific needs.

Conclusion

In this tutorial, we have shown you how to create dynamic datatables using Laravel 10 and Livewire. We started by setting up a new project and installing Livewire and the DataTables package. We then defined our datatable and displayed it in our Livewire component. Finally, we added interactivity and styling to our datatable. With these tools, you can easily create powerful and dynamic datatables in your Laravel applications.

This Article Ideas has been taken from the following websites; which are following:

https://www.itsolutionstuff.com/post/laravel-livewire-datatables-example-tutorialexample.html

Laravel 10 Livewire Datatables Tutorial

https://medium.com/@laraveltuts/laravel-9-livewire-datatables-example-35f1b5a38d4a

https://github.com/MedicOneSystems/livewire-datatables

Laravel 8 Livewire Datatables Tutorial

https://rappasoft.com/docs/laravel-livewire-tables/v1/usage/advanced-example-table

How to create Livewire Datatables Using Laravel