Keeping Laravel Powergrid table's first row visible while loading with wire

I’m using Laravel Powergrid and I’ve added the wire:loading directive to show a skeleton loader whenever table actions are performed (e.g., page change, per-page value update, filter, and search).

The thead is always visible during these actions, but I also want to keep the first tr inside the tbody (which contains the filter/search row) visible while the table is loading. The goal is to prevent it from being hidden during any refresh or load triggered by these actions.

Here’s a simplified version of the code I’m working with:

@props([
    'theme' => null,
    'readyToLoad' => false,
    'items' => null,
    'lazy' => false,
    'tableName' => null,
])
<div @isset($this->setUp['responsive']) x-data="pgResponsive" @endisset>
    <table
        id="table_base_{{ $tableName }}"
        class="table power-grid-table {{ data_get($theme, 'table.tableClass') }}"
        style="{{  data_get($theme, 'tableStyle') }}"
    >
        <thead
            class="{{ data_get($theme, 'table.theadClass') }}"
            style="{{ data_get($theme, 'table.theadStyle') }}"
        >
            {{ $header }}
        </thead>
        <tbody
            class="{{  data_get($theme, 'table.tbodyClass') }}"
            style="{{  data_get($theme, 'table.tbodyStyle') }}"
            wire:loading.remove
        >
            @if ($readyToLoad)
                {{ $body }}
            @endif
        </tbody>
    </table>

    <div wire:loading class="p-2 space-y-4 animate-pulse">
        <!-- Skeleton loading content -->
    </div>
</div>

In this case, whenever the table is loading (due to filters, pagination, etc.), the entire tbody disappears, which removes the first tr (the filter/search row) that I want to keep visible at all times.

I tried this approach by removing wire:loading from tbody and manually writing the tr inside it:

<tbody
    class="{{  data_get($theme, 'table.tbodyClass') }}"
    style="{{  data_get($theme, 'table.tbodyStyle') }}"
>
    <tr 
        class="{{ data_get($theme, 'table.trClass') }}"
        style="{{ data_get($theme, 'table.trStyle') }}"
    >
    </tr>

    @if ($readyToLoad)
        {{ $body }}
    @endif
</tbody>

However, this doesn’t seem to be working correctly, and I’m unsure how to keep the first tr (the filter/search row) persistent without disrupting the table’s behavior. Any guidance on how to properly implement this would be greatly appreciated!

The PowerGrid table structure for reference:
code-structure

You need to sign in to view this answers

Related Post