Filament•7mo ago

Table Paginator Scroll Behavior

In the Livewire documentation, the default scroll behavior for the paginator is to scroll to the top of the page upon page change. For Filament, I would expect this behavior to be to scroll to the top of the table. Instead the page does not scroll and the table records change, forcing the user to rescroll to the top of the table manually. Is there a way to customize this behavior? I tried using some of the hooks describe in the Livewire docs but either I'm doing something wrong or they don't work as intended.

Solution:

Based on this old Discord answer: https://discord.com/channels/883083792112300104/1134511774826250351/1134511774826250351 I've updated it to Filament 3 and Livewire 3: app/Filament/Resources/TaskResource/Pages/ListTasks.php:...

Jump to solution

2 Replies

Solution

Povilas K•7mo ago

class ListTasks extends ListRecords
{
    // ...

    public function setPage($page, $pageName = 'page'): void
    {
        parent::setPage($page, $pageName);

        $this->dispatch('scroll-to-top');
    }
}

class ListTasks extends ListRecords
{
    // ...

    public function setPage($page, $pageName = 'page'): void
    {
        parent::setPage($page, $pageName);

        $this->dispatch('scroll-to-top');
    }
}

app/Providers/AppServiceProvider.php:

use Filament\Support\Facades\FilamentView;
use Illuminate\Support\HtmlString;

// ...

class AppServiceProvider extends ServiceProvider
{
    // ...

    public function boot(): void
    {
        FilamentView::registerRenderHook(
            'panels::scripts.after',
            fn (): string => new HtmlString('
        <script>document.addEventListener("scroll-to-top", () => window.scrollTo(0, 0))</script>
            '),
        );
    }
}

use Filament\Support\Facades\FilamentView;
use Illuminate\Support\HtmlString;

// ...

class AppServiceProvider extends ServiceProvider
{
    // ...

    public function boot(): void
    {
        FilamentView::registerRenderHook(
            'panels::scripts.after',
            fn (): string => new HtmlString('
        <script>document.addEventListener("scroll-to-top", () => window.scrollTo(0, 0))</script>
            '),
        );
    }
}

BillTheFishOP•7mo ago

Awesome. This pointed me in the right direction. Thanks.

Gaming

Programming

Table Paginator Scroll Behavior