Upgrade Guide

Upgrade From V5

This page will provide you with important information to upgrade from version 5.x.

Dependency Upgrades

The following items have been updated in this release:

• PHP 8.2+

PowerGrid Facade namespace

use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;

$tableName must be unique/required

Sets the $tableName as unique and required for all existing tables.

INFO

New tables will have a pre-configured name via the powergrid:create command.

public string $tableName = 'default';
public string $tableName = 'users-table'; 
// Ex: admin-users-table, dishes, category-table

JS Imports

import './../../vendor/power-components/livewire-powergrid/dist/powergrid.css'

import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'// bootstrap5.css

setUp method

use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;

Header::make(); 
PowerGrid::header(); 

Footer::make(); 
PowerGrid::footer(); 

Responsive::make(); 
PowerGrid::responsive(); 

Exportable::make(); 
PowerGrid::exportable(); 

Lazy::make(); 
PowerGrid::lazy(); 

Cache::make(); 
PowerGrid::cache(); 

Detail::make(); 
PowerGrid::detail(); 

---

Custom Theme

• Rename template to customTemplateClass method

public function template(); 
public function customThemeClass(); 

Change your theme class, and follow new template style

INFO

This change simplifies how PowerGrid handles theme changes dynamically and removes many classes and unnecessary things to reduce processing in PHP.

WARNING

⚠️ Follow the example available in vendor/.../src/Themes/Tailwind.php or vendor/.../src/Themes/Bootstrap5.php as all methods follow this new standard.

5.x

public function table(): array
{
    return Theme::table('min-w-full dark:!bg-primary-800')
        ->container('-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8')
        ->base('p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8')
        ->div('rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600')
        ->thead('shadow-sm rounded-t-lg bg-pg-primary-100 dark:bg-pg-primary-900')
        ->thAction('!font-bold')
        ->tdAction('')
        ->tr('')
        ->trFilters('bg-white shadow-sm dark:bg-pg-primary-800')
        ->th('font-extrabold px-2 pr-4 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300')
        ->tbody('text-pg-primary-800')
        ->trBody('border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700')
        ->tdBody('p-2 whitespace-nowrap dark:text-pg-primary-200')
        ->tdBodyEmpty('p-2  whitespace-nowrap dark:text-pg-primary-200')
        ->trBodyClassTotalColumns('')
        ->tdBodyTotalColumns('p-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2')
}

6.x

public function table(): array
{
    return [
        'layout' => [
            'base'      => 'p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8',
            'div'       => 'rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600',
            'table'     => 'min-w-full dark:!bg-primary-800',
            'container' => '-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8',
            'actions'   => 'flex gap-2',
        ],

        'header' => [
            'thead'    => 'shadow-sm rounded-t-lg bg-pg-primary-100 dark:bg-pg-primary-900',
            'tr'       => '',
            'th'       => 'font-extrabold px-3 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300',
            'thAction' => '!font-bold',
        ],

        'body' => [
            'tbody'              => 'text-pg-primary-800',
            'tbodyEmpty'         => '',
            'tr'                 => 'border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700',
            'td'                 => 'px-3 py-2 whitespace-nowrap dark:text-pg-primary-200',
            'tdEmpty'            => 'p-2 whitespace-nowrap dark:text-pg-primary-200',
            'tdSummarize'        => 'p-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2',
            'trSummarize'        => '',
            'tdFilters'          => '',
            'trFilters'          => '',
            'tdActionsContainer' => 'flex gap-2',
        ],
    ];
}