Pagination urls above the table or scroll up after change page

Hello,

After I click at the next page on pagination, and the page is loaded it is not scrolling up to the first result of the table.

Is it possible to achieve this?

Also is it possible to have the paginated links at the top of the table, and not only at the bottom?

Thank you!

Solution

Add this to a service provider or extract the js to your own script if you’re using a custom js file in filament.

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Jump to solution

Pagination urls above the table or scroll up after change page

Similar Threads

Similar Threads

Similar Threads