Livewire Powergrid

Column Filters

Filters can be configured under each column, inside the columns() method.

Usage

You can add a filter to your column header by chaining a Filter method to Column::add().

The following example adds a range filter (min/max) to the "Dish Quantity" column.

public function columns(): array
{
  return [
    Column::make('Dish Quantity', 'quantity'),
        ->makeInputRange(),
  ];
}

Filter methods

These methods enable input for filters at your column header.

makeInputText(string $dataField)

Adds an input text filter on the column.

Available filters are: Is/Is not, Contains/Does not contain, Starts with/Ends with,Is null/Is not null, Is blank\Is not Blank, Is blank\Is not blank, Is empty/Is not empty. "Empty" covers "Blank + Null".

Parameters:

  • $dataField: field used by the filter.

Example:

->makeInputText(dataField: 'name')

Result:

Output

makeBooleanFilter(string $dataField, string $trueLabel, string $falseLabel)

Adds a filter for boolean values.

Parameters:

  • $dataField: field used by the filter.
  • $trueLabel: select option displayed for true (E.g, 'Active')
  • $falseLabel: select option displayed for false (E.g, 'Inactive')

Example:

->makeBooleanFilter(dataField: 'in_stock', trueLabel: 'yes', falseLabel: 'no')

Result:

Output

makeInputDatePicker(string $dataField, array $settings = [], string $classAttr = '')

Includes a specific field on the page to filter between the specific date in the column.

Configure a linguagem no arquivo config/livewire-powergrid.php como no exemplo de acordo com a sua config/app - locale.

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

Parameters:

  • $dataField: field used by the filter.
  • $settings: Settings must be passed as "key => value". Availables keys are:
    • 'only_future' => true: Will not allow to select dates in the past.
    • 'no_weekends' => true: Will not allow to select weekends.
  • $classAttr: class to be applied.

Example:

->makeInputDatePicker('created_at')

Result:

Output

makeInputSelect($dataSource, string $name, string $dataField, array $settings)

Includes a specific field on the page to filter a hasOne relation in the column.

Parameters:

  • $dataSource: parameter must be a Datasource.
  • $name: datasource field name to be displayed in options.
  • $dataField: field used by the filter.

Options:

  • live-search => [true/false] feature works only with Bootstrap.
  • class => '' adds a class to your select element.

Example:

->makeInputSelect(Kitchen::all(), 'state', 'kitchen_id', ['live-search' => true])

Result:

Output

makeInputMultiSelect($dataSource, string $name, string $dataField)

Includes a specific field on the page to filter a hasOne relation in the column.

Parameters:

  • $dataSource: parameter must be a Datasource.
  • $name: datasource field name to be displayed in options.
  • $dataField: field used by the filter.

Example:

->makeInputMultiSelect(Kitchen::all(), 'state', 'kitchen_id')

Result:

Output

Select filter with labels

In some cases, you might want to change the displayed label for each option in your select filter.

For example, imagine a column code which holds numeric values representing certain product conditions.

The code 0 represents "Best before", 1 represents "Expiring" and 2 represents "Expired".

To build a table with a filter based on Database values, you can use:


 public function addColumns(): PowerGridEloquent
    {
        return PowerGrid::eloquent()
            //...
            ->addColumn('code');
    }

    public function columns(): array
    {
        return [
            //...
            Column::add()
                ->title('code')
                ->field('code', 'code')
                ->makeInputSelect(Dish::select('code')->distinct()->get(), 'code', 'code')
        ];
    }

However, it results in very non-user-friendly Table:

Output

A better alternative is to pass the $name parameter to makeInputSelect and makeInputMultiSelect to display a friendly value for the select option.

Let's see a full example:

First, let's create a method in Dish Model which will return a collection containing each code with the respective label.

This is very convenient as we can refer to it any time we need access to our product codes.

// File: app/Models/Dish.php

<?php 

class Dish extends Model
{
    //...

    public static function codes()
    {
        return collect(
            [
                ['code' => 0,  'label' => 'Best before'],
                ['code' => 1,  'label' => 'Expiring'],
                ['code' => 2,  'label' => 'Expired'],
            ]
        );
    }
}

Now, we can use this method in DishTable to access our collection of codes.


 public function addColumns(): PowerGridEloquent
    {
        return PowerGrid::eloquent()
            /*
              Returns the 'label' key of the first collection item matching the database value in column "code"
            */
            ->addColumn('code_label', fn ($dish) => Dish::codes()->firstWhere('code', $dish->code)['label'])
            ->addColumn('code');
    }

    public function columns(): array
    {
        return [
            //...
            Column::add()
                ->title('code')
                ->field('code_label', 'code')
                /*
                Uses the codes collection as datasource for the options with the key "label" as the option label.
                */
                ->makeInputSelect(Dish::codes(), 'label', 'code'),
        ];
    }

The example above results in a much more user-friendly table:

Output

makeInputEnumSelect(array $enumCases, string $dataField = null, array $settings = [])

Includes a select filter based in a PHP Enum.

Available only in Php 8.1+.

Parameters:

  • $enumCases: parameter must be a enum.
  • $dataField: field used by the filter.
  • $settings: Settings

Usage: ->makeInputEnumSelect(Diet::cases(), 'dishes.diet')

Example:

Consider the following Enum with Dietary restrictions.

The database field diet contains the int values (0, 1 or 2). In this Enum we added a method label() to display a human friendly value for each case.

<?php

enum Diet: int
{
    case ALL      = 0;
    case VEGAN    = 1;
    case CELIAC   = 2;

    public function labels(): string
    {
        return match ($this) {
            self::ALL         => "🍽️ All diets",
            self::VEGAN       => "🌱 Suitable for Vegans",
            self::CELIAC      => "🥜 Suitable for Celiacs",
        };
    }
}

In PowerGrid you can make use of closures to display your Enum labels instead of the default database values.

Including the column with filter:

//...

//Including column
Column::add()
    ->field('diet', 'dishes.diet')
    ->makeInputEnumSelect(Diet::cases(), 'dishes.diet')
    ->title(__('Dieta')),

Result:

Output

To display your labels instead of case values, you can inlcude the labelPowergridFilter method inside your enum.

<?php

enum Diet: int
{
    //...

   /**
     * Sends labels to PowerGrid Enum Input
     *
     */
    public function labelPowergridFilter(): string
    {
        return $this->labels();
    }
}

Output

makeInputRange(string $dataField, string $thousands, string $decimal)

Adds a range filter input (min and max values).

The following example adds a range filter on "Dish Quality" column, filtering with quantity field.

public function columns(): array
{
  return [
      Column::make('Dish Quantity', 'quantity'),
  ];
}

The example below sets $thousands and $decimal separators. This is useful with currency values.

PowerGrid parses the formatted 1.170,90 into a decimal number (1170.90) and filter data based on the price field.

public function columns(): array
{
  return [
      Column::make('Price', 'price_in_brl')
          ->makeInputRange('price', '.', ','),
  ];
}

Result:

Output

Filter by Relationship

To filter by relationships, add each relationship of your main Datasource Table in the relationSearch method.

The relationships must be added in the format:

'model_name' => ['search_column_A', 'search_column_B'...].

Example:

public function relationSearch(): array
{
    return [
        'kitchen' => [ // relationship on dishes model
            'name', // column enabled to search
        ],
        //...
    ];
}

The example above adds the relationship to the kitchen Model and allows the column name to be searched.