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:
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>
run the the app
php artisan serve