How to use Datatables in Laravel 8 App using Livewire

Laravel 8 livewire dataTable example tutorial. In this tutorial, we will show you how to install livewire datatable and implement dataTable in laravel 8 app using the livewire datatable.

So, you’ll learn datatables in laravel 8 livewire example. This article will give you easy example of laravel 8 mediconesystems/livewire-datatables.

Laravel 8 Livewire DataTable Example Tutorial

Step 1 – Download Laravel 8 App
Step 2 – Connecting App To Database
Step 3 – Install Livewire & DataTable Livewire
Step 4 – Build User DataTable Livewire Component
Step 5 – Create Routes
Step 6 – Update UserDataTable Component File
Step 7 – Update Welcome Blade File
Step 8 – Start Development Server

Step 1 – Download Laravel 8 App

First of all, download or install laravel 8 new setup. So, open the terminal and type the following command to install the new laravel 8 app into your machine:

composer create-project --prefer-dist laravel/laravel Laravel8CRUD

Step 2 – Connecting App To Database

Setup database with your downloaded/installed laravel 8 app. So, you need to find .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Install Livewire & DataTable Livewire

In this step, execute the following command on terminal to install livewire and dataTables livewire package in laravel 8 app:

composer require livewire/livewire

composer require mediconesystems/livewire-datatables

Then, execute the “npm install && npm run dev” command to build your assets:

npm install

To run npm:

npm run dev

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

Step 4 – Build User DataTable Livewire Component

In this step, create users dataTable livewire components by executing the following command on terminal:

php artisan make:livewire user-datatables

This command will create two files, which is located on following path:

app/Http/Livewire/UserDatatables.php

resources/views/livewire/user-datatables.blade.php

#laravel #php #database #developer