Laravel Laravel Livewire table pagination scroll behaviour
The docs page for Livewire 3.x has a section for pagination. It mentions the default behaviours and how to change those. As per the docs, the default behaviour of the paginator is to scroll to the top of the page after every page change (which occurs when clicking the pagination buttons).
Recently, I was working on a Laravel Livewire table and I noticed a rather "annoying" behaviour when click on the pagination buttons. There were a bunch of paragraphs above the table. So, you had to scroll down the page to see the table. Then, when you clicked on the pagination buttons, the page would instantly scroll to the top. Rather annoying! This would occur on every pagination button click.
It occurred with both the paginate() or simplePaginate() methods.
After a lot of unsuccessful search on the internet, I finally found the solution at the obvious place — Laravel Livewire official documentation.
The docs page for Livewire 3.x has a section for pagination. It mentions the default behaviours and how to change those. As per the docs, the default behaviour of the paginator is to scroll to the top of the page after every page change (which occurs when clicking the pagination buttons). In order to disable this behaviour, you should pass false to the scrollTo parameter of the links() method.
{{ $posts->links(data: ['scrollTo' => false]) }}The docs provide more information about customising the paginator. Now that I know this exists, my Livewire tables in the future would be more customised. 😊