Skip to content

Configure

Import JS and CSS

resources/js/app.js

javascript
import './../../vendor/power-components/livewire-powergrid/dist/powergrid'
 
// If you use Tailwind 
import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'

// If you use Bootstrap 5 
import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'
import './../../vendor/power-components/livewire-powergrid/dist/powergrid'
 
// If you use Tailwind 
import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'

// If you use Bootstrap 5 
import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'

Choose your Theme

PowerGrid supports Tailwind and Bootstrap 5 as Themes. Tailwind is selected by default.

Your Theme can be set at config/livewire-powergrid.php.

To change to Bootstrap 5, modify your theme option as follows:

TIP

💡 Read more how to customize your Theme.


Bootstrap 5 settings

php
    /*
    |--------------------------------------------------------------------------
    | Theme
    |--------------------------------------------------------------------------
    */
    'theme' => \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5::class, 
    /*
    |--------------------------------------------------------------------------
    | Theme
    |--------------------------------------------------------------------------
    */
    'theme' => \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5::class, 

Some features are not available in the Bootstrap version:

Tailwind settings

Dark Mode

To enable Dark Mode, configure the DarkMode class in tailwind.config.js file as follows:

javascript
module.exports = {
    darkMode: 'class',
}
module.exports = {
    darkMode: 'class',
}

JIT Production

If you use Tailwind JIT you must add PowerGrid files in purge inside the tailwind.config.js file:

javascript
module.exports = {
  content: [
      // ....
      './app/Http/Livewire/**/*Table.php', 
      './vendor/power-components/livewire-powergrid/resources/views/**/*.php',
      './vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php'
  ]
  // ....
}
module.exports = {
  content: [
      // ....
      './app/Http/Livewire/**/*Table.php', 
      './vendor/power-components/livewire-powergrid/resources/views/**/*.php',
      './vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php'
  ]
  // ....
}

TIP

💡 Read more about Tailwind just-in-time.

Presets

PowerGrid uses the slate color by default, you might want to change that, just insert the PowerGrid preset in the tailwind.config.js file

js
const colors = require('tailwindcss/colors') 

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
        require("./vendor/wireui/wireui/tailwind.config.js"),
        require("./vendor/power-components/livewire-powergrid/tailwind.config.js"), 
    ],
    // optional
    theme: {
        extend: {
            colors: {
                "pg-primary": colors.gray, 
            },
        },
    },
}
const colors = require('tailwindcss/colors') 

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
        require("./vendor/wireui/wireui/tailwind.config.js"),
        require("./vendor/power-components/livewire-powergrid/tailwind.config.js"), 
    ],
    // optional
    theme: {
        extend: {
            colors: {
                "pg-primary": colors.gray, 
            },
        },
    },
}

TIP

💡 Read more about Tailwind Presets.

Filters

PowerGrid offers inline and outside filters.

inline: Filters data inside the table (default).

outside: Filters data outside the table.

Inline is configured by default. To modify, change filter setting in config/livewire-powergrid.php.

Example:

php
/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
'filter' => 'outside',
/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
'filter' => 'outside',

To keep the Filters Outside toggle always open, just set the property $showFilters to true in your component.

php
// app/Livewire/DishesTable.php

final class DishesTable extends PowerGridComponent
{
     public bool $showFilters = true;

    //...
}
// app/Livewire/DishesTable.php

final class DishesTable extends PowerGridComponent
{
     public bool $showFilters = true;

    //...
}

New Release Notification

PowerGrid can verify if a new release is available when you create a new PowerGrid Table.

Output

To enable this feature, follow the next steps:

  • Require composer as a developer dependency, running:
bash
composer require composer/composer --dev
composer require composer/composer --dev
  • Change check_version to true in config/livewire-powergrid.php.**
php
/*
|--------------------------------------------------------------------------
| New Release Notification
|--------------------------------------------------------------------------
*/
'check_version' => true
/*
|--------------------------------------------------------------------------
| New Release Notification
|--------------------------------------------------------------------------
*/
'check_version' => true

Created By Luan Freitas and DanSysAnalyst