Configure

• 1. Import JS and CSS
• 2. Choose your Theme
• 3. Bootstrap 5 settings
• 4. Tailwind settings
• 5. Cache
• 6. Filters
• 7. New Release Notification

1. Import JS and CSS

Install AlpineJS.

npm install alpinejs

resources/js/app.js

import Alpine from 'alpinejs'

window.Alpine = Alpine

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

Alpine.start()

2. 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.

---

3. Bootstrap 5 settings

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

Some features are not available in the Bootstrap version:

• Filters outside
• Detail Row

4. Tailwind settings

4.1 Dark Mode

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

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

4.2 JIT Production

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

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.

4.3 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

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.

4.4 Tailwind Forms

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

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

This approach will avoid layout conflicts such as:

💡 Read more about Using classes instead of element selectors.

5. Cache

Cache is enabled by default. When using collections, it improves search performance.

When enabled, data is reloaded whenever the page is refreshed or a field is updated.

To disable cache, change cached_data to false in config/livewire-powergrid.php.

Example:

/*
|--------------------------------------------------------------------------
| Cache
|--------------------------------------------------------------------------
*/
'cached_data' => false,

6. 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:

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

7. New Release Notification

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

To enable this feature, follow the next steps:

7.1. Require composer as a developer dependency, running:

composer require composer/composer --dev

7.2. Change 'check_version' to true in config/livewire-powergrid.php.

/*
|--------------------------------------------------------------------------
| New Release Notification
|--------------------------------------------------------------------------
*/
'check_version' => true