In this blog we will see how we can show data in front end using admin Ui Data grids.
Originally Magento2 has provided the UiGrid option to show data in the tabular format but this method is only available at the admin site.
In the following blog, we will see how we can add the grid at front end in our custom module. In this blog, we will create a list of products created in the magento at our custom controller in the frontend. We will create a custom module named CustomModule for the same.
You will need to create the following files,
-
Register your module by creating the register.xml file at app/code/Webkul/CustomModule/ directory:
https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/registration.php
-
State the module version at app/code/Webkul/ CustomModule/etc/ directory:
https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/etc/module.xml
-
Create the routes for your custom controller at: https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/etc/frontend/routes.xml
-
Now create the custom controller at which you want to show the UiGrid. In my module I have showed the grid at custommodule/index/index page
https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/Controller/Index/Index.php
-
Create the Layout handle custommodule_index_index.xml for the controller at app/code/Webkul/CustomModule/view/frontend/layout/custommodule_index_index.xml directory: https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/view/frontend/layout/custommodule_index_index.xml
I have called the Ui Grid wk_product_list_custom in the layout file.
-
The UiComponent is created at: app/code/Webkul/CustomModule/view/frontend/ui_component/wk_product_list_custom.xml directory: https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/view/frontend/ui_component/wk_product_list_custom.xml
In this UiGrid, I have created my custom DataProvider: app/code/Webkul/CustomModule/Ui/DataProvider/ProductList.php
-
The most important part is the render controller. You need to create a custom render controller that you have mentioned in the wk_product_list_custom.xml component file.
-
The Renderer is at: https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/Controller/Index/Render.php
-
After this the grid will start showing, however as there is no style added to it, it will appear broken. You need to add the custom css to make it look the same. The css file is placed at: https://github.com/vishalverma279/magento2_custom_module/blob/master/src/app/code/Webkul/CustomModule/view/frontend/web/css/grid.css which will be called from the layout handle file: app/code/Webkul/CustomModule/view/frontend/layout/custommodule_index_index.xml
Now to install the Webkul_CustomModule, you need to follow the following steps:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
After the complete installation of the module, you will be able to check the grid at yourwebsite.com/custommodule/index/index location.
You can check the complete working module at: https://github.com/vishalverma279/magento2_custom_module