Livewire PowerGrid

Appearance

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.

Tailwind Forms ​

WARNING

If you use Tailwind forms, please consider modifying your tailwind.config.js to use the strategy class as follows:

javascript
module.exports = {
   //...
  plugins: [
    require("@tailwindcss/forms")({
      strategy: 'class',
    }),
  ]
}
module.exports = {
   //...
  plugins: [
    require("@tailwindcss/forms")({
      strategy: 'class',
    }),
  ]
}

This approach will avoid layout conflicts such as:

Output

💡 Read more about Using classes instead of element selectors.

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',

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