How to link to the table with filters in the URL so that they get applied on load?

[manuelteuber]

I have a powergrid table with a lot of filters. From my dashboard I want to link to the page where the powergrid table is placed and include the filters in the URL, so that they get populated and the data filtered when the table is loaded.

App\Livewire\BookingsTable.php

<?php

namespace App\Livewire;

use App\Enums\BookingStatus;
use App\Enums\BookingType;
use App\Enums\TransactionStatus;
use App\Models\Booking;
use App\Models\PaymentAccount;
use App\Models\TransactionLog;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Carbon;
use NumberFormatter;
use PowerComponents\LivewirePowerGrid\{Column, Detail, Footer, Header, PowerGrid, PowerGridColumns, PowerGridComponent};
use PowerComponents\LivewirePowerGrid\Facades\Filter;

final class BookingsTable extends PowerGridComponent
{
    public bool $showFilters = true;
    public array $filters = [];
    public string $search = '';
    protected $queryString = ['search', 'filters'];

    /*
    |--------------------------------------------------------------------------
    |  Features Setup
    |--------------------------------------------------------------------------
    | Setup Table's general features
    |
    */
    protected NumberFormatter $numberFormatter;

    public function __construct()
    {
        $this->numberFormatter = new NumberFormatter('de_DE', NumberFormatter::CURRENCY);

    }

    public function setUp(): array
    {
        $this->persist(['filters', 'columns']);
        $this->sortBy('id', 'desc');

        return [
            Header::make()
                ->showSearchInput()
                ->showToggleColumns(),
            Detail::make()
                ->view('components.booking-detail-row')
                ->showCollapseIcon(),
            Footer::make()
                ->showPerPage(25)
                ->showRecordCount(),
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */

    /**
     * PowerGrid datasource.
     *
     * @return Builder<Booking>
     */
    public function datasource(): Builder
    {
        return Booking::query()
            ->with(['transactions', 'logs', 'latestLog', 'konto'])
            ->whereIn('kontoid', config('payment-matching.supported_payment_accounts'));
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    | ❗ IMPORTANT: When using closures, you must escape any value coming from
    |    the database using the `e()` Laravel Helper function.
    |
    */
    public function addColumns(): PowerGridColumns
    {
        return PowerGrid::columns()
            ->addColumn('id')
            ->addColumn('booking_type', fn(Booking $model) => ($model->betrag > 0 ? trans('general.payment') : trans('general.refund')))
            ->addColumn('bookingdate_formatted', fn(Booking $model) => Carbon::parse($model->bookingdate)->format('d.m.Y'))
            ->addColumn('kontoid')
            ->addColumn('kontoid_formatted', function (Booking $model) {
                return $model->konto->bezeichnung;
            })
            ->addColumn('intern')
            ->addColumn('booking_status', function (Booking $model) {
                return BookingStatus::tryFrom($model->intern)?->label() ?? BookingStatus::UNKNOWN->label();
            })
            ->addColumn('transaction_status', function (Booking $model) {
                $log = $model->latestLog;
                if (!$log) {
                    if ($model->is_processed) {
                        /*
                         * This booking has no log entry, but is marked as processed.
                         * Maybe it was processed by hand or before the log was introduced.
                         */
                        $status = TransactionStatus::SUCCESS;
                    } else {
                        $status = TransactionStatus::NOT_PROCESSED;
                    }
                } else {
                    $status = TransactionStatus::tryFrom($log->status);
                }
                return $status ? $status->label() : TransactionStatus::UNKNOWN->label();
            })
            ->addColumn('userid')
            ->addColumn('transaction_id', fn(Booking $model) => $model->transactions->first()?->transaction_id);
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |
    */

    /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [
            Column::make(trans('general.id'), 'id')
                ->searchable()
                ->sortable(),

            Column::make(trans('psp.psp'), 'kontoid_formatted', 'kontoid')
                ->searchable(),

            Column::make(trans('general.status'), 'booking_status', 'intern')
                ->contentClasses(
                    BookingStatus::colorClassMapping('py-1 px-2 inline-block text-xs font-medium rounded')
                )
                ->searchable(),

            Column::make(trans('transactions.processing_status'), 'transaction_status')
                ->contentClasses(
                    TransactionStatus::colorClassMapping('py-1 px-2 inline-block text-xs font-medium rounded')
                ),

            Column::make(trans('bookings.date'), 'bookingdate_formatted', 'bookingdate')
                ->sortable()
                ->searchable(),

        ];
    }

    /**
     * PowerGrid Filters.
     *
     * @return array<int, Filter>
     */
    public function filters(): array
    {
        return [
            Filter::datepicker('bookingdate'),

            // Filter for transaction_status
            Filter::select('transaction_status')
                ->builder(function (Builder $query, $value) {
                    $query->whereHas('latestLog', fn(Builder $query) => $query->where('status', $value));
                })
                ->dataSource(
                    TransactionLog::whereHas('booking')->select('status')->distinct()->get()
                        ->map(function ($item) {
                            $item['label'] = TransactionStatus::tryFrom($item['status'])?->label();
                            return $item;
                        })
                        ->toArray()
                )->optionLabel('label')->optionValue('status'),


        ];
    }

}

When using the filters of the table, the URL changes to include the filters in the query string. But when I copy this URL and open it again, the filters are not applied.

How do I make this work?

[Unisolgr14]

You can do as follows
In Powergridtable

final class StudentList extends PowerGridComponent
{
   use WithExport;
   use ActionButton;
 
   public int $perPage = 50;
   public array $perPageValues = [50,100];
   public string $primaryKey = 'students.id';
   public string $sortField = 'students.id';
   public string $grade;// the values pass from the view
 public function datasource(): Builder
   {
return Student::query()
       ->where('grade','=',$this->grade);
}
}

And on the view

<livewire:student-list grade="2"/>

I hope you can tweak it to achieve with the URL