Skip to content

PowerGrid Configuration โ€‹

This section covers the PowerGrid config file, along with the configurations for assets and plugins.

Here you will find:

Introduction โ€‹

Once the installation is complete, you must perform these Essential Configuration steps to start using PowerGrid in your Laravel application.

Essential Configuration โ€‹

1. Import Javascript Assets โ€‹

First, import PowerGrid's JavaScript assets.

Add the following code to your project's resources/js/app.js file.

javascript
// resources/js/app.js

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

2. Choose a CSS theme โ€‹

PowerGrid provides Tailwind 3 and Bootstrap 5 themes. Tailwind is selected by default.

To use Bootstrap 5, simply change the theme key in the config/livewire-powergrid.php file. Here's an example:

php
// config/livewire-powergrid.php

/*
|--------------------------------------------------------------------------
| Theme
|--------------------------------------------------------------------------
*/

'theme' => \PowerComponents\LivewirePowerGrid\Themes\Tailwind::class, 
'theme' => \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5::class, 

๐Ÿ“ NOTE

Currently, the following features are exclusive to the Tailwind theme.

3. Import theme Assets โ€‹

Next, you must import the theme assets in the file resources/js/app.js.

Tailwind โ€‹

If your project is configured for Tailwind, add the following code.

javascript
// resources/js/app.js

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

Bootstrap 5 โ€‹

If your project is configured for Bootstrap 5, add the following code.

javascript
// resources/js/app.js

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

4. Tailwind Configuration โ€‹

If you are using Tailwind, you may configure the options below.

Dark Mode โ€‹

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

javascript
// tailwind.config.js

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

JIT Production โ€‹

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

javascript
// tailwind.config.js

module.exports = {
  content: [
      // ....
      './app/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.
If you are already using Tailwind version 3 or greater JIT is enabled by default. So you need to add these files to your tailwind.config.js because otherwise the styles won't apply correctly. Read more here

Presets โ€‹

PowerGrid uses the slate color by default.

To use a different color, insert the PowerGrid preset in the file tailwind.config.js.

js
// tailwind.config.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, 
            },
        },
    },
}

๐Ÿ’ก TIP

Read more about Tailwind Presets.

5. Bootstrap Configuration โ€‹

Currently, there are no specific Bootstrap theme configuration instructions.

6. Next step โ€‹

๐ŸŽ‰ Everything ready!

Now, we can go to the next step and create a PowerGrid Table.

General Configuration โ€‹

Persist Driver โ€‹

This section defines how Persist data is stored. By default, information is stored in cookies. You may change this configuration in the key persist_driver in config/livewire-powergrid.php.

Possible Persist Drivers:

DriverDescription
cookiesStore data in cookies.
sessionStore data in the session.

Example:

php
// config/livewire-powergrid.php
    /*
    |--------------------------------------------------------------------------
    | Persisting
    |--------------------------------------------------------------------------
    |
    */

    'persist_driver' => 'cookies',
    'persist_driver' => 'session',

Filter Position Configuration โ€‹

To configure how filters are displayed, change the value in the key filter in config/livewire-powergrid.php.

FilterDescriptionNotes
inlineFilters are displayed below the Table Header-
outsideFilters are displayed outside the Table, above the Headeronly available for Tailwind theme

Example:

php
// config/livewire-powergrid.php

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

New Release Notification โ€‹

PowerGrid can let you know when a new release is available.

Require composer as a developer dependency, running:

bash
composer require composer/composer --dev

Run powergrid:update

bash
php artisan powergrid:update

Advanced Configuration โ€‹

Custom Namespace โ€‹

By default, PowerGrid will create components following the location specified under Livewire's Config Key livewire.class_namespace.

To adjust the configuration, run: php artisan livewire:publish --config to publish the file config/livewire.php.

The example below changes the namespace to "Domain".

php
// config/livewire.php

/*
|---------------------------------------------------------------------------
| Class Namespace
|---------------------------------------------------------------------------
*/

'class_namespace' => 'App\\Livewire',
'class_namespace' => 'Domain', 

Now, your Components will be created inside the top /Domain directory.

The next example will create a component ClientList inside the path /Domain/Client/Tables

shell
  > php artisan powergrid:create

 โ”Œ What is the name of your Table Component? โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
 โ”‚ Client\Tables\ClientList                                     โ”‚
 โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Resulting in:

shell
 โšก ClientList was successfully created at [Domain/Client/Tables/ClientList.php].

 ๐Ÿ’ก include the ClientList component using the tag: <livewire:client.tables.client-list/>

Auto-Discover Models โ€‹

By default, PowerGrid auto discovers Models living in the directory app/Models/.

If your application is organized in a different architecture (E.g, Domain-Driven Design), you may add other directory paths inside the configuration key livewire-powergrid.auto_discover_models_paths in PowerGrid's configuration file.

The example below adds the main directory /Domain to be scanned for Eloquent Models.

php
// config/livewire-powergrid.php

/*
|--------------------------------------------------------------------------
| Auto-Discover Models
|--------------------------------------------------------------------------
|
| PowerGrid will search for Models in the directories listed below.
| These Models be listed as options when you run the
| "artisan powergrid:create" command.
|
*/

'auto_discover_models_paths' => [
    app_path('Models'),
    base_path('Domain'),
],

As a result, when creating a PowerGrid Component, all Models under /Domain will be available in the select list.

shell
 โ”Œ Select a Model or enter its Fully qualified name. โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
 โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
 โ”‚โ€บ Domain\Dish\Models\Dish                                     โ”‚
 โ”‚  Domain\Invoice\Models\Invoice                               โ”‚
 โ”‚  Domain\User\Models\User                                     โ”‚
 โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Plugins Configuration โ€‹

Flatpickr โ€‹

PowerGrid relies on Flatpickr to render the Datetime Picker Filter and the Date Picker Filter.

To install Flatpickr in your project, run the following command:

shell
npm i flatpickr --save

Then, you must configure your application to load Flatpickr's assets.

Add the following code to your project's resources/js/app.js file.

javascript
// resources/js/app.js

import flatpickr from "flatpickr"; 

Next, we need to load Flatpickr CSS.

Add the following code to your project's resources/css/app.css file.

css
/* resources/css/app.css */

@import "flatpickr/dist/flatpickr.min.css";

Alternatively, you may import the CSS from the resources/js/app.js file.

javascript
// resources/js/app.js

import 'flatpickr/dist/flatpickr.min.css';

Finally, adjust the language configuration to match your app's locale within the config/livewire-powergrid.php file, specifically in the plugins > flatpickr section.

Example:

php
// config/livewire-powergrid.php

 'plugins' => [
        // ...
        'flatpickr' => [
            // ..
            'locales'   => [
                'pt_BR' => [
                    'locale'     => 'pt',
                    'dateFormat' => 'd/m/Y H:i',
                    'enableTime' => true,
                    'time_24hr'  => true,
                ],
                'us' => [
                    'locale'     => 'us',
                    'dateFormat' => 'm/d/Y',
                    'enableTime' => true,
                    'time_24hr'  => false,
                ],
            ],
        ],
    ],

TomSelect โ€‹

PowerGrid can use TomSelect to render a Multi Select Filter.

To install TomSelect in your project, run the following command:

shell
npm i tom-select

Then, you must configure your application to load TomSelect's assets.

Add the following code to your project's resources/js/app.js file.

javascript
// resources/js/app.js

import TomSelect from "tom-select";
window.TomSelect = TomSelect

Next, add the following code to your project's resources/js/app.css file.

css
/* resources/js/app.css */

@import "~tom-select/dist/scss/tom-select.bootstrap5";

Finally, configure PowerGrid to use TomSelect as default within the config/livewire-powergrid.php file, specifically in the select > default section. You may also configure Slim's settings inside the select > tom key.

Example:

php
// config/livewire-powergrid.php

'select' => [
    'default' => 'tom', 

       'tom' => [
            'plugins' => [
                'clear_button' => [
                    'title' => 'Remove all selected options',
                ],
            ],
       ,
    ],
],

SlimSelect โ€‹

PowerGrid can use SlimSelect to render a Multi Select Filter.

To install SlimSelect in your project, run the following command:

shell
npm i slim-select

Then, you must configure your application to load SlimSelect's assets.

Add the following code to your project's resources/js/app.js file.

javascript
// resources/js/app.js

import SlimSelect from 'slim-select'
window.SlimSelect = SlimSelect

Next, add the following code to your project's resources/js/app.css file.

css
/* resources/js/app.css */

@import "~slim-select/dist/slimselect.css";

Finally, configure PowerGrid to use SlimSelect as default within the config/livewire-powergrid.php file, specifically in the select > default section. You may also configure Slim's settings inside the select > slim key.

Example:

php
// config/livewire-powergrid.php

'select' => [
    'default' => 'slim', 

    'slim' => [ 
       'settings' => [
             'alwaysOpen' => false,
       ],
    ],
],

Created By Luan Freitas and @DanSysAnalyst