Laravel 9 Livewire Datatables Using Tailwind CSS Example

In this section we will see laravel 9 livewire datatables with PowerGrid. PowerGrid creates modern, powerful and easy to customize Datatables based on Laravel Livewire library. So why using PowerGrid , because it comes with lots of feature like datatables Excel, Csv export, filtering , sorting, min & max word & contains and last select between two date search.

Laravel 9 Livewire Datatables with PowerGrid

Step 1: Create Laravel Project

Step 2: Set Up Database Details in ENV

Step 3: Install breeze

Step 4: install Livewire PowerGrid

Step 5: Config PowerGrid

Step 6: Create a PowerGrid DataTable

Step 7: Create fake Data using Tinker

Step 8: Import livewire component & run the app

Step 1: Create laravel Project

composer create-project laravel/laravel laravel-9-datatable 

Step 2: Set Up Database Details in ENV

Now, you have to connect the laravel app to the database

.env

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 breeze

Install first breeze package

composer require laravel/breeze --dev

Then, install breeze ui

php artisan breeze:install

install dependencies

npm install && npm run dev
# and
php artisan migrate 

Step 4: install Livewire PowerGrid

Install PowerGrid via Composer, run:

composer require power-components/livewire-powergrid

Publish PowerGrid configuration file. Run the following command:

php artisan vendor:publish --tag=livewire-powergrid-config

The configuration file will be available at: config/livewire-powergrid.php.

Publish files (OPTIONAL)

Skip this step if you don’t need to customize views or language files.

To publish Views, run:

php artisan vendor:publish --tag=livewire-powergrid-views

To publish Language files, run:

php artisan vendor:publish --tag=livewire-powergrid-lang

Step 5: Config PowerGrid

Include Scripts and Styles

Include the following Scripts and Stylesheets in your page:

Styles must be included before the </head> tag.

  <!-- Styles -->
  @livewireStyles
  @powerGridStyles

  </head>

Scripts must be included before the </body> tag.

  <!-- Scripts -->
  @livewireScripts
  @powerGridScripts

</body>

Step 6 : Create a PowerGrid DataTable

Note: Important You must have PowerGrid installed and properly configured before proceeding.

To create a PowerGrid table, run the following command:

php artisan powergrid:create  

Then, follow below steps:

Laravel livewire datatables setup command

Step 7: Create fake Data using Tinker

php artisan ti

App\Models\User::factory(50)->create();

How to Generate Dummy fake data using Factory in laravel 9

Step 8: Import livewire component & run the app

views/dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <livewire:users/>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

laravel 9 datatable page

run the the app

php artisan serve