Apply Filter on Specific Column on Datatable Mount

[danish-ali-abyan]

Hi folks,
I'm using Livewire PowerGrid datatable and want to apply date filter on mount or loading on the specific column (Created At) of the datatable. And when user change the dates from column filter it should sync as well.

I'm receiving start and end dates as props and want to apply filter based on them.

Laravel 10
Livewire 3
Livewire-PowerGrid 5

Below is the current implementation.

HTML to add datatable:

<div>
    @include('common.breadcrumb', ['breadcrumbKey' => 'card-payments'])
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="card rounded">
                <div class="card-body">
                    <h4 class="fw-bolder mb-3">Card Payments</h4>
                    <livewire:investor-profile.investor-profile-card-payments
                        :start="$start"
                        :end="$end"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

Datatable:

namespace App\Livewire\InvestorProfile;

use App\Enums\BrokerEnum;
use App\Enums\PaymentEnums\PaymentGateways;
use App\Enums\PaymentEnums\PaymentMethods;
use App\Models\CardPayment;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Carbon;
use Illuminate\View\View;
use Livewire\Attributes\On;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;

final class InvestorProfileCardPayments extends PowerGridComponent
{
    public string $primaryKey = 'card_payments.card_payment_id';
    public string $sortField = 'card_payments.card_payment_id';

    public $user_id;
    public $start;
    public $end;

    public function setUp(): array
    {
        return [
            Header::make()
                ->showToggleColumns(),

            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    public function datasource(): Builder
    {
        $query = CardPayment::query()
            ->select(
                'card_payment_id',
                'card_payments.user_id AS cad_payment_user_id',
                'mobile_number',
                'card_payments.created_at AS create_date',
                'brokers.name AS broker',
                'amount',
                'rrn',
                'status',
                'transaction_id',
                'method',
                'gateway',
                'request',
                'response',
            )
            ->join('users', 'users.user_id', '=', 'card_payments.user_id')
            ->join('brokers', 'brokers.broker_id', '=', 'card_payments.broker_id')
            ->when($this->user_id, function($q){
                $q->where('card_payments.user_id', $this->user_id);
            })

           //Right now here I'm apply condition using dates but want to convert into filter for column Created At
            ->when($this->start && $this->end, function($q){
                $q->whereBetween('card_payments.created_at', [$this->start, $this->end]);
            })
            ->orderBy('card_payments.created_at', 'desc');
        return $query;
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('transaction_id')
            ->add('mobile_number')
            ->add('broker', fn ($payment) => ucfirst($payment->broker))
            ->add('amount')
            ->add('rrn')
            ->add('status', function($payment){
                $value = str_replace('transaction.', '', $payment->status);
                $statusClassName = match($value) {
                    'pending' => 'secondary',
                    'completed' => 'success',
                    'failed' => 'danger',
                };
                return '<span class="fw-bolder badge bg-'.$statusClassName.'">'.ucfirst($value).'</span>';
            })
            ->add('method', fn ($payment) => ucfirst(str_replace(['_', '/'], ' ', $payment->method)))
            ->add('gateway', fn ($payment) => ucfirst(str_replace('_', ' ', $payment->gateway)))
            ->add('create_date', fn (CardPayment $payment) => date('d M Y H:i', strtotime($payment->create_date)));
    }

    public function columns(): array
    {
        return [
            Column::make('Transaction ID', 'transaction_id'),
            Column::make('Mobile Number', 'mobile_number')
                ->sortable(),
            Column::make('Broker', 'broker')
                ->sortable(),
            Column::make('Amount', 'amount')
                ->sortable(),
            Column::make('Reference #', 'rrn')->sortable(),
            Column::make('Status', 'status'),
            Column::make('Method', 'method')->sortable(),
            Column::make('Gateway', 'gateway')->sortable(),
            
            //This is my target column
            Column::make('Created at', 'create_date', 'create_date')
                ->sortable(),
            Column::action('Action')
        ];
    }

    public function filters(): array
    {

        return [
            Filter::inputText('transaction_id')->operators(['contains']),
            Filter::inputText('mobile_number')->operators(['contains']),
            Filter::enumSelect('broker', 'brokers.name')
                ->dataSource(BrokerEnum::cases()),
            Filter::inputText('amount')->operators(['contains']),
            Filter::inputText('rrn')->operators(['contains']),
            Filter::select('status')->dataSource($this->statuses())
                ->optionLabel('label')
                ->optionValue('value'),
            Filter::enumSelect('method')
                ->dataSource(PaymentMethods::cases()),
            Filter::enumSelect('gateway')
                ->dataSource(PaymentGateways::cases()),
                
            //Current implementations till now    
            Filter::datetimepicker('create_date', 'card_payments.created_at')->params([
                'maxDate' => Carbon::now(),
            ]),
        ];
    }

    public function actionsFromView($row): View
    {
        return view('livewire.investor-profile.detail-view.card-payments.investor-profile-card-payment-actions', ['row' => $row]);
    }

    private function statuses(){
        return [
            [ 'value' => CardPayment::TRANSACTION_STATUS_PENDING, 'label' => 'Pending'],
            [ 'value' => CardPayment::TRANSACTION_STATUS_COMPLETED, 'label' => 'Completed'],
            [ 'value' => CardPayment::TRANSACTION_STATUS_FAILED, 'label' => 'Failed'],
        ];
    }
}

[marineusde]

Looks good, but whats your question? ;)

[danish-ali-abyan]

I've a dates as props on datatable components and want to apply filters based on that dates when datatable will render every-time.

[marineusde]

You can dispatch the refresh of the table in the livewire-component, where the user change the date:

$this->dispatch('pg:eventRefresh-YOURTABLENAME');

I've done that with saving the dates in the session() in the change-component, cause the user can reload or change the page and see the same result.

[danish-ali-abyan]

I want to to apply filter on page load or page mount

[marineusde]

I tested your code in my tables and it works:

Page-Component:

class MeetingPage extends Component
{
    public function render(): Factory|View|Application
    {
        return view('livewire.test.test-page', [
            'start' => '2024-04-01',
            'end' => '2024-04-30'
        ]);
    }
}

Blade-File of the page:

...
<div>
<livewire:test.test-table
    :start="$start"
    :end="$end"
/>
</div>
...

Table:

final class TestTable extends PowerGridComponent
{
    public ?string $start = null;
    public ?string $end = null;

    public function datasource(): null|QueryBuilder|EloquentBuilder|BaseCollection|array
    {
        return Model::query()
            ->when($this->start && $this->end, function($q) {
                $q->whereBetween('start_at', [$this->start, $this->end]);
            });
    }

   ...

[danish-ali-abyan]

I want to apply date filters on this datatable column on page load.

Filter::datetimepicker('create_date', 'card_payments.created_at')->params([
    'maxDate' => Carbon::now(),
]),