Blog Detail

11

Apr
PowerGrid - Create Advanced Datatable Using Laravel Livewire cover image

PowerGrid - Create Advanced Datatable Using Laravel Livewire

PowerGrid creates modern, powerful, and easy-to-customize Datatables based on the Laravel Livewire library.

  • Zero Configuration: Tables have basic features activated by default.
  • It fits your needs: Extend and customize your table including components (checkbox, action buttons, editable fields), global search feature, column data filters, and data export tool.
  • Full Stubs: Table components include feature examples. Just uncomment some code, enter your data, and it works!

Features

With PowerGrid you get right out of the box:

  • Filters & Search
  • Column Sorting
  • Column Sum, Count & Average in Header/Footer
  • Pagination
  • Action Checkboxes
  • Action Buttons
  • Bulk Actions
  • Action Rules: Conditionally disable, hide and modify Action Buttons, Checkboxes, and rows
  • Toggle button
  • Click to edit
  • Click to copy
  • Link inside a table cell
  • Livewire Modal Integration (Wire Elements Modal)
  • Data Export to XLSX/CSV (Spout)
  • Queue Export for large tables
  • Works with Bootstrap 5 or Tailwind CSS 2x - 3x
  • Translations are available for 🇺🇸 🇧🇷 🇪🇸 🇮🇹 🇩🇪 and others

Installation

You can install this package via composer by running this command in the terminal.

composer require power-components/livewire-powergrid

Usage

Create a PowerGrid Table

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

To create a PowerGrid table, run the following command:

php artisan powergrid:create  

Now, answer the question on your screen to complete the creation process:

1. Enter the name of your PowerGrid Component.

For example: DishTable.

2. Indicate if your component will use a Model or a Collection as a data source.

Type M for Model or C for Collection.

This example uses the Dish Model, so we typed M:

3. If you choose Model, enter the path to your Model.

In this example, the Dish Model is located at App\Models\Dish.

If you don’t specify App\Models -powergrid will create based on the default App\Models directory.

4. Use Fillable?

PowerGrid can create columns based on your Model’s fillable property.

Supported databases are MySQL, Postgre, and SQLite.

If desirable, type yes to use this feature.

If you don’t use the ‘id’ column as the primary key, you should make sure your model is protected $primaryKey = null;.

PowerGrid Table created!

PowerGrid indicates the location where your new Table component was created.

This package has a lot more features with code examples, If you want to dig more you can visit its complete documentation on Github.

Published at : 11-04-2022

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch project