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.
// 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:
// 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.
// 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.
// 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.
// 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
:
// 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
.
// 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:
Driver | Description |
---|---|
cookies | Store data in cookies. |
session | Store data in the session. |
Example:
// 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
.
Filter | Description | Notes |
---|---|---|
inline | Filters are displayed below the Table Header | - |
outside | Filters are displayed outside the Table, above the Header | only available for Tailwind theme |
Example:
// 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:
composer require composer/composer --dev
Run powergrid:update
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".
// 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
> php artisan powergrid:create
โ What is the name of your Table Component? โโโโโโโโโโโโโโโโโโโโ
โ Client\Tables\ClientList โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Resulting in:
โก 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.
// 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.
โ 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:
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.
// resources/js/app.js
import flatpickr from "flatpickr";
Next, we need to load Flatpickr CSS.
Add the following code to your project's resources/js/app.css
file.
/* resources/js/app.css */
@import "flatpickr/dist/flatpickr.min.css";
Alternatively, you may import the CSS from the resources/js/app.js
file.
// 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:
// 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:
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.
// 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.
/* 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:
// 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:
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.
// 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.
/* 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:
// config/livewire-powergrid.php
'select' => [
'default' => 'slim',
'slim' => [
'settings' => [
'alwaysOpen' => false,
],
],
],