You are here:

Create Simple Grid Listing in Magento 2 Admin with UI Component

It is very easy to get it done

Step 1: Create company_staff_listing.xml

You can create this file in app/code/store/Company/view/Adminhtml/ui_component. By this way, all grid elements will be handled by XML file with default component built in Magento like search, filter, export, button, mass action. You just need to apply following code to do:

Step 2: Create Staff Data Provider

You can create Staff Data Provider in app/code/store/Company/UI/DataProviderStaffDataProvider.php by using codes below:

Step 3: Create layout files

You can create layout files in app/code/store/Company/view/Adminhtml/layout. Companyadmin_staff_index.xml is the layout for the index actions of staff controller. The file company_staff_listing is used as the component to show in the content area. Enter the code below to manipulate:

Step 4: Create model

You can create model in app/code/store/Company/Model/Staff.php by following code:

In app/code/store/Company/Model/ResourceModel/Staff.php by using command below:

And in app/code/store/Company/Model/ResourceModel/Staff/Collection.php by following command:

Step 5: Create controller

Apply code below to create controller in app/code/store/Company/Controller/Adminhtml/AbstractAction.php:

In app/code/store/Company/Controller/Adminhtml/Staff.php:

And in app/code/store/Company/Controller/Adminhtml/Staff/index.php

Step 6: Add menu.xml in etc folder

You can do this action in app/code/store/Company/etc/adminhtml/menu.xml by applying command below:

That’s all you need to do for creating grid listing in Magento 2 admin UI component. This is a very simple tutorial for all Magento 2 users because you just need to enter command as guide above to reach the goal. Hope that you can manipulate it successfully!

Related articles


Back to Top