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: Pagination urls above the table or scroll up after change page

I've updated it to Filament 3 and Livewire 3:

app/Filament/Resources/TaskResource/Pages/ListTasks.php:

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>
            '),
        );
    }
}

Jump to solution

Table Paginator Scroll Behavior

Solution

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>
            '),
        );
    }
}

Jump to solution

Table Paginator Scroll Behavior

Table Paginator Scroll Behavior

Similar Threads

Similar Threads

Similar Threads