How to perform UI pagination Component in Magento 2

UI Pagination Component is a list / grid secondary component. It is responsible for providing the pagination UI and using the pagination principle to the assortment. This will help to select number of item to show on a page and choose the page we want to analyze.

Related image

  • Please capture a look at the file vendor\magento\module-ui\view\base\ui_component\etc\definition.xml, you will observe these commands:
<paging class="Magento\Ui\Component\Paging">

   <argument name="data" xsi:type="array">

       <item name="config" xsi:type="array">

           <item name="component" xsi:type="string">Magento_Ui/js/grid/paging/paging</item>

           <item name="displayArea" xsi:type="string">bottom</item>



  • It uses the file js component \vendor\magento\module-ui\view\base\web\js\grid\paging\paging.js and template vendor\magento\module-ui\view\base\web\templates\grid\paging\paging.html
  • You can make use of the UI Pagination Component like this example:
<container name="listing_top">

   <paging name="listing_paging">

       <argument name="data" xsi:type="array">

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">product_listing.product_listing.product_columns.ids</item>

               <item name="storageConfig" xsi:type="array">

                   <item name="provider" xsi:type="string">product_listing.product_listing.listing_top.bookmarks</item>

                   <item name="namespace" xsi:type="string">current.paging</item>






We will talk about the element in the details:

  • Select Provider – Component with selected data.
  • storageConfig – storageConfig is a basic component asset. Here is a list of saved page parameters constructed from bookmarks
  • sizesConfig: This is not used in this example. However, you can see it in the file \ seller \ magento \ module-ui \ view \ base \ web \ js \ grid \ paging \ paging.js. It is the component structure of the sizes. By default it is the file seller \ magento \ module-ui \ view \ base \ web \ js \ grid \ paging \ sizes.js. In this file, you can change the option to display the number of the page’s item

The steps I mentioned above are a simple way to do UI Pagination component in Magento 2. With this information, the UI Pagination Component can be easily handled. Each store has a UI Pagination Component in Magento 2 with many elements.

Last Update: April 7, 2018  

March 6, 2018   1008   Nandini Ramachandran    Operations    
Total 0 Votes:

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *