How to Use UI Grid Component on the Front End in Magento 2

How to Use UI Grid Component on the Front End in Magento 2

There are plenty examples of such a wonderful UI component as grid on the administrator part of the site. Using grid on the front end allows us to quickly enable paging, sorting and filtering via standard Magento functionality without having to invent something new. However, you will encounter a lack of less, fonts and an ajax data request error for the grid.

It is going to look like this:


You can use our UiGrid module to solve this problem quickly. The module is available at

To use the module, specify the dependency in the file etc/module.xml:

Add CSS on the page with the grid:

Ajax data requests from the admin side go at URL mui/index/render.

This does not suit us, that is why we need to change the URL to your controller in the app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml file:

Inherit the controller from:

Now the grid should look as usual:

2 (1)

In the example, the administrator can manage notes for customers. Customers can view notes and delete them. The examples are available at

Note that in order for a user to see not all the records, but only his own, you need to create your DataProvider and indicate it in ui_component/{your_route}.xml.

Ui_component: app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml.


We specify filter conditions in the data provider: app/code/Vendor/Module/Model/DataProvider.php.

Done. Now we have a full grid from the front end, in which a customer can see only his own notes:

That is it concerning UI grid component in Magento 2, we hope you will easily implement the article’s material into your Magento 2 development process.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *