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
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 with Tailwind CSS Form Validation Example
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Rest Api with Vue 3 Composition Api CRUD Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
3 Way to Create Slug in Laravel 9 without Package
How to Add Dark Mode in Laravel 9 with Tailwind CSS