Pagination in Lightning Web Component with Component Event

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.