top of page

Pagination in Lightning Web Component with Component Event

Updated: Jan 17, 2020

We have done this in Aura components, let's see how it's done in LWC.


First create a Lightning web component to fire the navigation events. Let's name this

paginationNavigation



paginationNavigation.js-meta.xml

This component have two buttons Previous and Next, and both will fire two separate events. Now these event needs to be handled in component, where we want to consume/handle these events.


Let's create another component 'accountListView'.


we have added paginationNavigation cmp in accountListView cmp, and defined the handlers for both the event.

In javascript, we have increased or decreased the offset value according to event.

offset has @track decorator, and that's why when any change happen in this value, component needs to be rerender. when this happen the wire decorator automatically call apex method to fetch records.


accountListView.js-meta.xml

Here is the apex class that fetch the record. Note, it has annotation cacheable=true, which is used to improve performance.


If you face any problem in this tutorial, please leave a comment or message on chat.

3,265 views1 comment

1 Comment


Zakeer Mohammed
Zakeer Mohammed
Oct 01, 2020

Hi Saurabh,

In LWC lightning datatable, pagination(10 rows in a page) is there. When I selected any row of the first page, automatically the same row is selected on other page. Could you please help me on this?

I have used max-row-selection as well

Still it got selected in other page

Like
bottom of page