Pass data from livewire filter component to Powergrid table

Hello,

I have blade template with two components,

     <div class="card-body py-4">
            <!--begin::Table-->
            <livewire:future.live-future-filter />   --> Filters
            <livewire:future.live-future-data-table />   --> Tables.
            <!--end::Table-->
        </div>

In live-future-filther component, there are dependent selects,

<div>
    <div class="row g-1 g-xl-1 mb-1 mb-xl-1">
        <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-1">
            <div class="d-flex align-items-center gap-2 gap-lg-3">
                <select class="form-select form-select-sm form-select-solid" wire:model.live="selectedSymbol"
                    id="symbol" wire:change="resetSelectedExpiry">
                    <option value="null">Select Symbol</option>
                    @foreach (\App\Models\NseFnoSymbol::distinct()->orderBy('symbol')->pluck('symbol') as $key => $value)
                        <option value="{{ $value }}">{{ $value }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm form-select-solid" wire:model.live="selectedExpiry"
                    wire:key="{{ $selectedSymbol }}" id="expiry">
                    <option value="null" disabled>Select Expiry</option>
                    @foreach (\App\Models\ExchangeSymbol::where('asset_symbol', $selectedSymbol)->where('instrument_type', 'FUT')->orderBy('expiry', 'asc')->distinct()->pluck('expiry') as $key => $value)
                        <option value="{{ $value }}">{{ $value }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm form-select-solid" wire:model.live="selectedTf" id="tf" >
                    <option value="null" disabled>Select TF</option>
                    <option value="3">3</option>
                    <option value="15">15</option>
                    <option value="30">30</option>
                    <option value="60">60</option>
                </select>
            </div>
        </div>
    </div>
</div>

Now, I want to pass these selected values to the PowerGrid table for filtering, https://livewire-powergrid.com/

Now there are two questions,

How to pass data from the filter component to powergrid table component?
And how to use this data in the table component?

AdamVaclav

2 years ago

Level 4

Why use your own filter component when livewire powergrid already have possibilities for filtering?

And if you insist on using your own component there are many ways to pass the data depending on use-case. You can do nested component and have powergrid component inside filter component, then its quite easy to pass parameters/values to nested component. Or you can dispatch events from component to component with filter data. Etc...

LaCoder

2 years ago

Level 1

@AdamVaclav , There is one filter TF, which doesn't have value in Table, but I need to do the calculation in data from DB based on TF, and then send calculated data to the Powergrid table, That's the reason I need to have an external filter,

How can I pass the item selected in the filter to Powergrid?

AdamVaclav

2 years ago

Level 4

@LaCoder Again, depends on your use-case. Ideally I would try to nest these components.

< livewire:future.live-future-filter > < livewire:future.live-future-data-table /> </ livewire:future.live-future-filter >

https://livewire.laravel.com/docs/nesting#passing-props-to-children

LaCoder

2 years ago

Level 1

@AdamVaclav I tried this way, In filter component, i sent dispatch to LiveFutureDataTable powergrid table,

class LiveFutureFilter extends Component
{
    public $selectedExpiry;
    public $selectedSymbol;

    public function resetSelectedExpiry()
    {
        $this->selectedExpiry = null;
    }

    public function updatedSelectedValues()
    {
        $this->dispatch('filterChanged', symbolSent: $this->selectedSymbol)->to(LiveFutureDataTable::class);
    }
    
    public function render()
    {
        return view('livewire.future.live-future-filter');
    }
}

and in powergrid table, added listener...


    public function filterC($symbolSent)
    {
        $this->symbol = $symbolSent;
        dd($this->symbol);
    }

    protected function getListeners(): array
    {
        return array_merge(
            parent::getListeners(), 
            [
                'filterChanged'   => 'filterC',
            ]);
    }

But how to test if event is dispatch successful or not, as i dont know then i tried with dd but nothing happend.

When i sent via Button it sent out correctly, but it is not sending via component,

    <button wire:click="$dispatchTo('future.live-future-data-table', 'filterChanged', { symbolSent: 'TEST' })">
        EditPost
    </button>

Below is via component, when select value change it goes to component and from there it dispatch to LiveFutureDataTable,

    public function updatedSelectedValues()
    {
        $this->dispatch('filterChanged', symbolSent: $this->selectedSymbol)->to(LiveFutureDataTable::class);
    }

LaCoder

2 years ago

Best Answer

Level 1

Resolved with below code,


class LiveFutureFilter extends Component
{
    public $selectedExpiry;
    public $selectedSymbol;

    public function resetSelectedExpiry()
    {
        $this->selectedExpiry = null;
    }

    public function updatedSelectedValues()
    {
        if (!empty($this->selectedSymbol)) {
            $this->dispatch('filterChanged', symbolSent: $this->selectedSymbol)->to(\App\Livewire\Future\LiveFutureDataTable::class);
        }
    }

    public function render()
    {
        $this->updatedSelectedValues();

        return view('livewire.future.live-future-filter');
    }
}

1 like

Please or to participate in this conversation.