[Live Component] Load and scroll with filters

[ag-erwan]

Hello team,
I hope you're doing well ?
Tell me, I'm currently creating a table and so I installed a load and scroll system with live component (it works)
But the problem is that I would like to be able to apply filters dynamically. But the filters are not re-rendered because data-live-ignore

For the load and scroll I went back to the same example of Ux
https://ux.symfony.com/demos/live-component/infinite-scroll-2

And so to start with the example of the site, this is exactly what I want but I can add filters for example a button when we click on it and it sorts in ascending or descending order while being dynamic

[smnandre]

Sorting will require to redo the while list, but this can easily be using a hash of the filters value (query string équivalent + hash))) and using it as id around it.

for the filters what is the problem ?

[ag-erwan]

I actually have filters where there is data-live-ignore and they don't apply.
When I remove the data-live-ignore and my filters apply well but the pagination is bad.
Is it possible to have an example so that the filters apply to my query while keeping the load and scroll?

[smnandre]

I dont get why the filters would be in some data-ignore div ? Is it some design contraints ?

[ag-erwan]

Yes actually, it doesn't go back because of the live ignore. The data when I do a dump and die is well modified but on the other hand, for the display it does not change

[ag-erwan]

For example, I would like to add a dynamic search bar and well it retrieves the search results but does not re-render them, and those because of the data-live-ignore. So I tried to remove it and there it worked but the pagination was buggy

[ag-erwan]

Hello team,
I managed to find a solution to add filters with load and scroll.
I started from the load and scroll of the following demo
Load and scroll Ux
and I added my filters

I'll share my code with you if it can help others too.

For PHP side

src/Components/Tab/TabCol.php

#[LiveProp(writable: true)]
public string $sortClient = "ASC";

#[LiveAction]
public function sortClients()
{
    $this->sortClient = $this->sortClient === 'ASC' ? 'DESC' : 'ASC';
    $this->filterQuery['c.nomClient'] = $this->sortClient;
    $this->dataToEmit('sortClient' . $this->sortClient, $this->filterQuery);
}

private function dataToEmit(string $nameKey, array $filterQuery)
{
    $this->emitUp('filters', [
        'keyFilter' => $nameKey,
        'filterQuery' => $filterQuery
    ]);
}

src/Components/Tab/Table.php

#[LiveProp(writable: true)]
public array $filterQuery = [];

#[LiveProp]
public string $keyFilter = "default";

#[LiveListener('filters')]
public function listFilters(#[LiveArg] string $keyFilter, #[LiveArg] array $filterQuery)
{
    // For $filterQuery it's because I pass several filters to it so to avoid errors I convert the subarray into string
    foreach ($filterQuery as $key => $value) {
        if(\is_array($value)) {
            $filterQuery[$key] = implode('||', $value);
        }
    }
    $this->keyFilter = $keyFilter;
    $this->filterQuery = $filterQuery;
}

For the table
Important to pass a key to the TabRow component so that it is re-rendered in its entirety

components/tab/Table.html.twig
<div{{attributes}}>
    <table class="border-separate table_bordered border-t-0">
        <twig:TabCol />
        <twig:TabRow key="{{keyFilter}}" filterQuery="{{filterQuery}}"/>
    </table>
</div>

For table column

components/tab/TabCol.html.twig
<thead{{attributes}}>
    <th class="p-2.5">
        <div class="flex justify-around">
            Clients
            <button data-model="sortClient" data-action="live#action" data-live-action-param="sortClients">
                <img class="w-6" src="/img/default/{{ sortClient == 'ASC' ? 'asc' : 'desc' }}.png" alt="Trier">
            </button>
        </div>
    </th>
    <th>test2</th>
    <th>test3</th>
</thead>

For table rows

components/tab/TabRow.html.twig

<tbody{{attributes.defaults(stimulus_controller('appear'))}}>
    {% if page > 1 %}
        <tr id="item--{{ page - 1 }}-{{per_page}}"></tr>
    {% endif %}
    {% for client in clients %}
        <tr id="item--{{page}}-{{loop.index}}" data-live-ignore class="{{ loop.index is even ? 'bg-gray-50' : 'bg-white' }}">
            <td>{{client.test1}}</td>
            <td>{{client.test2}}</td>
            <td>{{client.test3}}</td>
        </tr>
    {% endfor %}
    {% if this.hasMore %}
        {% for i in 1..per_page %}
            <tr id="item--{{ page + 1 }}-{{ i }}" 
            {% if loop.first %}
                data-appear-target="loader"
                data-action="appear->live#action"
                data-live-action-param="debounce(750)|more"
            {% endif %}>
                <td>Test</td>
            </tr>
        {% endfor %}
    {% endif %}
</tbody>

Hope my answer can help other people