In this video we’re going to learn how to configure the pagination componente. So if we were wanting to include this component within another project or another page, all I’d have to do is come here to UI objects, to the data area and find the componente here and then place it in the page. I’m just going to close this panel.

Now I’m going to select the first element that makes up this component, this one called pagination. I’m now going to come here to the data panel and I’m going to configure a series of options. I need to select a source, so I need to define which list I want to paginate.

In this case, it’s going to be the flex layout called e-grid. If we then come here to display options, we have the option to hide pagination option if we didn’t have enough items to fill up more than one page. In this case, my pagination element is hidden as I don’t need more than one page. We’ll look into this in future videos.

So over here we can define how many page numbers we want to be visible, and down here, we can select how many pages we want to see in the pagination margin. 

Now we need to select the flex layout called e-grid. We’re going to come here to the data panel, and to this area called pagination. So we need to enable pagination over here. All you have to do is click this option and define how many items we want per page. 

So just as I mentioned before, our pagination element disappears as we don’t have sufficient items to fill up more than one page. SO if I come here and say that I want to only have one item per page, we can see that the pagination has now activated with a series of page numbers.

If I type in 6 for example, it will disappear again as it needs to have a seventh item so that a new page is needed. 

I’m going to change the items per page to three so we can see the pagination element working again. Ok, so now I’m going to hit preview to test the pagination element as it’s complete. 

Ok, we’re on the first page, now we’re going through to the second page. And as you can see it’s super easy to add a pagination element to your project.