Hire Magento 2 developers (up to 5 years exp, Magento 2 experience since beta release) Contact us now!


How to create Magento 2 UI Grid part 1


One of the biggest improvements of Magento 2 is a new admin panel.

In this article, I will explain how to create a custom UI grid for the admin panel.


There are two types of grid tables in Magento 2 admin.

The first type is a standard one like we’ve used to in Magento 1 admin and the new one called UI Grid, based on UI components.


This a basic grid of an admin panel. Now let’s take a look at what UI grid looks like.


UI grids were introduced to improve the overall Magento management experience for merchants by allowing them to customize the standard grid layout of an Admin panel.

Also, there is a special button called filter, which helps to sort your grid data.


As a store administrator, you can easily modify, columns, sort their positions directly from the admin panel.


This feature works for all EAV Grid pages (like add a catalog page, users list page etc). You can add any attribute to the grid page as well.
Another cool thing about grids is that you can save different grid sets and switch between them.


If you have many entries on the page, the navigation bar position remains fixed while scrolling down, so you can navigate throughout the page easier.


Another great improvement is a full-text search on grid pages.


You can search any text and if there is at least one entry which contains the search query – it will be displayed on the grid page.

Another important amendment is a product image column in the “Catalog” section. If you click on the product picture you will see the full image of the product.


The last feature I would like to outline is a quick edit directly from the grid or so-called inline edit. It allows you to edit the grid entries without opening the product.


You can also edit few entries at a time with the help of feature called, mass action. Just check the products you would like to edit massively and choose «edit» in the «Actions» menu.

The new architecture of Magento 2 admin layout allows you to see the changes without even reloading the page.

How to customize Magento 2 admin grid. 

All new features look really promising, but you may ask: how to use or customize them?

So let’s talk a little bit more about the process of creating a UI Grid with the help of Magento 2. First of all, we will need to create a custom extension for that.

First of all, we will need to create an extension for that.

The new extension should have the following structure:

  • {NameSpace}/{ExtensionName}/registration.php
  • {NameSpace}/{ExtensionName}/etc/module.xml
  • {NameSpace}/{ExtensionName}/etc/di.xml
  • {NameSpace}/{ExtensionName}/etc/acl.xml
  • {NameSpace}/{ExtensionName}/etc/adminhtml/menu.xml
  • {NameSpace}/{ExtensionName}/etc/adminhtml/routes.xml
  • {NameSpace}/{ExtensionName}/Model/{Entity}.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}/Collection.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}/Grid/Collection.php
  • {NameSpace}/{ExtensionName}/Setup/InstallSchema.php
  • {NameSpace}/{ExtensionName}/Controller/Adminhtml/Index/Index.php
  • {NameSpace}/{ExtensionName}/view/adminhtml/layout/{frontnameId}_index_index.xml
  • {NameSpace}/{ExtensionName}/view/adminhtml/ui_component/{entity_grid_listing}.xml

* {entity_grid_listing} is a unique identifier of your UI component. Magento is merging xml files based on their names, so you should name them like {entity}_grid_listing, similar to CMS pages sample (page_grid_listing).

In my example:

  • {NameSpace} — Test,
  • {ExtensionName} — UIGrid,
  • {Entity} – Grid.

Let’s overview the files structure in detail:

registration.php, module.xml should contain the information about Magento 2  module declaration. You can look up the module structure at Magento 2 github code samples.



acl.xml, menu.xml, routes.xml contain the information about admin panel menu links and routes.




Index.php Controller – simple admin controler, which doesn’t contain any special methods.


InstallSchema.php – should contain all the information about table schemes, which will be used by your module.
Your Model, ResourceModel and Collection model should contain general methods, to connect your model with resource model and resource model with the database and a model collection between both of them.




So now, when we’ve created a module structure, we can start building custom UI components to extend the functionality of Magento 2 admin grids. In the next articles, we will walk through the overview of UI components, edit section and finish creating a custom module for extending the UI grid functionality…

Stay tuned!

Pavlo Okhrem
Article by Pavlo Okhrem

CEO/Co-founder at eLogic Commerce. E-commerce expert. International conferences speaker.