Include Livewire dependent selects as filter in powergrid filter

[jigapate]

Hello,

Is it possible to include dependent selects of livewire as a filter in powergrid table? In below code <livewire:future.live-future-filter /> is a filter set which is dependent on another filter,

Like this, https://livewire-powergrid.com/table/column-filters.html#custom-view-components

//Filter

<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>

//Filter included in Blade,

<x-default-layout>

    <div class="card">
        <!--begin::Card body-->

        <div class="card-header card-header-stretch">
            <livewire:future.live-future-filter />
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#pane_futures">Table</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#pane_future_price_oi">Future Price & OI</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="card-body py-4">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="pane_futures" role="tabpanel">
                    <livewire:future.live-future-data-table-comp />
                </div>
                <div class="tab-pane fade show" id="pane_future_price_oi" role="tabpanel">
                    <livewire:future.live-price-oi-chart />
                </div>
            </div>
        </div>
        <!--end::Card body-->
    </div>

</x-default-layout>

//<livewire:future.live-future-data-table-comp />// This component have table,

<div wire:poll.60s="refreshMyTable">
    <livewire:future.live-future-data-table />
</div>