Step 1: Create di.xml file<\/strong><\/p>\n\n\n\n In the below code we set the main table name as “magecurious_custom_table”, you can change it as per your table name.<\/p>\n\n\n Step 2: Create Collection.php file<\/strong><\/p>\n\n\n\n We already created Model, Resource Model and Collection of BookInfo in our previous blog so now here we create a collection file for grid.<\/p>\n\n\n Step 3: Create helloworld_index_index.xml file<\/strong><\/p>\n\n\n\n This file is used to create a ui component grid.<\/p>\n\n\n Step 4: Create Index.php file<\/strong>.<\/p>\n\n\n\n In the code below we can set the title “manage grid”, you can change what you want. This controller is used to render the layout of the grid.<\/p>\n\n\n Step 5: Create ui_listing.xml file<\/strong><\/p>\n\n\n\n In below code we can add filters, Add new Record Button, database column fields, edit\/delete actions.<\/p>\n\n\n\n You can add as many database column fields as you want.<\/p>\n\n\n Step 6: Create Actions.php file<\/strong><\/p>\n\n\n Step 7: Create Delete.php file<\/strong><\/p>\n\n\n\n Here we can only create delete action full form action will be created in our next blog.<\/p>\n\n\n Step 8: Finally run the below commands<\/strong><\/p>\n\n\n\n $ php bin\/magento setup:upgrade<\/p>\n\n\n\n $ php bin\/magento cache:clean<\/p>\n\n\n\n $ php bin\/magento cache:flush<\/p>\n\n\n\n Step 8: Output:<\/strong><\/p>\n\n\n\n Final Thoughts:<\/strong><\/p>\n\n\n\n So this was the easiest way which we have told you in this blog. This is how you can Create UI Component Grid in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n Thanks for reading and visiting our site.<\/p>\n\n\n\napp\/code\/Vendor\/Extension\/etc\/di.xml\n\n<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n <type name="Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory">\n <arguments>\n <argument name="collections" xsi:type="array">\n <item name="ui_listing_data_source" xsi:type="string">Vendor\\Extension\\Model\\ResourceModel\\BookInfo\n\\Grid\\Collection<\/item>\n <\/argument>\n <\/arguments>\n <\/type>\n <virtualType name="Vendor\\Extension\\Model\\ResourceModel\\BookInfo\\Grid\\Collection" type="Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult">\n <arguments>\n <argument name="mainTable" xsi:type="string">magecurious_custom_table<\/argument>\n <argument name="resourceModel" xsi:type="string">Vendor\\Extension\\Model\\ResourceModel\\BookInfo<\/argument>\n <\/arguments>\n <\/virtualType>\n<\/config>\n<\/pre><\/div>\n\n\n
\n\n<\/pre><\/div>\n\n
\napp\/code\/Vendor\/Extension\/Model\/ResourceModel\/BookInfo\/Grid\/Collection.php\n\n<?php\n\nnamespace Vendor\\Extension\\Model\\ResourceModel\\BookInfo\\Grid;\n\nuse Vendor\\Extension\\Model\\ResourceModel\\BookInfo\\Collection as BookInfoCollection;\nuse Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\Document as BookInfoModel;\n\nclass Collection extends BookInfoCollection implements \\Magento\\Framework\\Api\\Search\\SearchResultInterface\n{\n protected $aggregations;\n\n \/\/ @codingStandardsIgnoreStart\n public function __construct(\n \\Magento\\Framework\\Data\\Collection\\EntityFactoryInterface $entityFactory,\n \\Psr\\Log\\LoggerInterface $logger,\n \\Magento\\Framework\\Data\\Collection\\Db\\FetchStrategyInterface $fetchStrategy,\n \\Magento\\Framework\\Event\\ManagerInterface $eventManager,\n $mainTable,\n $eventPrefix,\n $eventObject,\n $resourceModel,\n $model = BookInfoModel::class,\n $connection = null,\n \\Magento\\Framework\\Model\\ResourceModel\\Db\\AbstractDb $resource = null\n ) {\n parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $connection, $resource);\n $this->_eventPrefix = $eventPrefix;\n $this->_eventObject = $eventObject;\n $this->_init($model, $resourceModel);\n $this->setMainTable($mainTable);\n }\n \/\/ @codingStandardsIgnoreEnd\n\n public function getAggregations()\n {\n return $this->aggregations;\n }\n public function setAggregations($aggregations)\n {\n $this->aggregations = $aggregations;\n }\n public function getAllIds($limit = null, $offset = null)\n {\n return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);\n }\n public function getSearchCriteria()\n {\n return null;\n }\n public function setSearchCriteria(\\Magento\\Framework\\Api\\SearchCriteriaInterface $searchCriteria = null)\n {\n return $this;\n }\n public function getTotalCount()\n {\n return $this->getSize();\n }\n public function setTotalCount($totalCount)\n {\n return $this;\n }\n public function setItems(array $items = null)\n {\n return $this;\n }\n}\n<\/pre><\/div>\n\n\n\napp\/code\/Vendor\/Extension\/view\/adminhtml\/layout\/helloworld_index_index.xml\n\n<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd">\n <update handle="styles"\/>\n <body>\n <referenceContainer name="content">\n \t<uiComponent name="ui_listing"\/>\n <\/referenceContainer>\n <\/body>\n<\/page>\n<\/pre><\/div>\n\n\n
\napp\/code\/Vendor\/Extension\/Controller\/Adminhtml\/Index\/Index.php\n\n<?php\n\nnamespace Vendor\\Extension\\Controller\\Adminhtml\\Index;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\Controller\\ResultFactory;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends Action\n{\n protected $resultPageFactory;\n\n public function __construct(\n Context $context,\n PageFactory $resultPageFactory\n ) {\n parent::__construct($context);\n $this->resultPageFactory = $resultPageFactory;\n }\n public function execute()\n {\n $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);\n $resultPage = $this->resultPageFactory->create();\n $resultPage->getConfig()->getTitle()->set(__('Manage Grid'));\n return $resultPage;\n }\n}\n<\/pre><\/div>\n\n\n\napp\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component\/ui_listing.xml\n\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n <argument name="data" xsi:type="array">\n <item name="js_config" xsi:type="array">\n <item name="provider" xsi:type="string">ui_listing.ui_listing_data_source<\/item>\n <item name="deps" xsi:type="string">ui_listing.ui_listing_data_source<\/item>\n <\/item>\n <item name="spinner" xsi:type="string">columns<\/item>\n <item name="buttons" xsi:type="array">\n <item name="add" xsi:type="array">\n <item name="name" xsi:type="string">add<\/item>\n <item name="label" xsi:type="string" translate="true">Add New Record<\/item>\n <item name="class" xsi:type="string">primary<\/item>\n <item name="url" xsi:type="string">*\/*\/form<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <dataSource name="ui_listing_data_source">\n <argument name="dataProvider" xsi:type="configurableObject">\n <argument name="class" xsi:type="string">Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider<\/argument>\n <argument name="name" xsi:type="string">ui_listing_data_source<\/argument>\n <argument name="primaryFieldName" xsi:type="string">id<\/argument>\n <argument name="requestFieldName" xsi:type="string">id<\/argument>\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="component" xsi:type="string">Magento_Ui\/js\/grid\/provider<\/item>\n <item name="update_url" xsi:type="url" path="mui\/index\/render" \/>\n <item name="storageConfig" xsi:type="array">\n <item name="indexField" xsi:type="string">id<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/argument>\n <\/dataSource>\n <listing>\n <listingToolbar>\n <bookmark name="bookmarks" \/>\n <columnsControls name="columns_controls" \/>\n <filters>\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="applied" xsi:type="array">\n <item name="is_approved" xsi:type="string">1<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/filters>\n <paging name="listing_paging" \/>\n <\/listingToolbar>\n <\/listing>\n <columns name="columns">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="resizeConfig" xsi:type="array">\n <item name="enabled" xsi:type="boolean">false<\/item>\n <\/item>\n <\/item>\n <\/argument>\n <settings>\n <childDefaults>\n <param name="fieldAction" xsi:type="array">\n <item name="provider" xsi:type="string">ui_listing.ui_listing.columns.actions<\/item>\n <item name="target" xsi:type="string">applyAction<\/item>\n <item name="params" xsi:type="array">\n <item name="0" xsi:type="string">edit<\/item>\n <item name="1" xsi:type="string">${ $.$data.rowIndex }<\/item>\n <\/item>\n <\/param>\n <\/childDefaults>\n <\/settings>\n <selectionsColumn name="ids">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="resizeEnabled" xsi:type="boolean">false<\/item>\n <item name="resizeDefaultWidth" xsi:type="string">55<\/item>\n <item name="indexField" xsi:type="string">id<\/item>\n <\/item>\n <\/argument>\n <\/selectionsColumn>\n <column name="id">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="resizeEnabled" xsi:type="boolean">false<\/item>\n <item name="resizeDefaultWidth" xsi:type="string">55<\/item>\n <item name="filter" xsi:type="string">textRange<\/item>\n <item name="sorting" xsi:type="string">asc<\/item>\n <item name="label" xsi:type="string" translate="true">ID<\/item>\n <\/item>\n <\/argument>\n <\/column>\n <column name="field_1">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="filter" xsi:type="string">text<\/item>\n <item name="label" xsi:type="string" translate="true">Field 1<\/item>\n <\/item>\n <\/argument>\n <\/column>\n <column name="field_2">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="filter" xsi:type="string">text<\/item>\n <item name="label" xsi:type="string" translate="true">Field 2<\/item>\n <\/item>\n <\/argument>\n <\/column>\n <actionsColumn name="actions" class="Vendor\\Extension\\Ui\\Component\\Column\\Actions">\n <argument name="data" xsi:type="array">\n <item name="config" xsi:type="array">\n <item name="indexField" xsi:type="string">id<\/item>\n <\/item>\n <\/argument>\n <\/actionsColumn>\n <\/columns>\n<\/listing>\n<\/pre><\/div>\n\n\n\napp\/code\/Vendor\/Extension\/Ui\/Component\/Column\/Actions.php\n\n<?php\n\nnamespace Vendor\\Extension\\Ui\\Component\\Column;\n\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nclass Actions extends Column\n{\n\n const URL_PATH_EDIT = 'helloworld\/index\/form';\n const URL_PATH_DELETE = 'helloworld\/index\/delete';\n\n protected $urlBuilder;\n\n public function __construct(\n ContextInterface $context,\n ComponentFactory $BookInfoFactory,\n UrlInterface $urlBuilder,\n array $components = [],\n array $data = []\n ) {\n $this->urlBuilder = $urlBuilder;\n parent::__construct($context, $BookInfoFactory, $components, $data);\n }\n\n public function prepareDataSource(array $dataSource)\n {\n if (isset($dataSource['data']['items'])) {\n foreach ($dataSource['data']['items'] as &$item) {\n if (isset($item['id'])) {\n $item[$this->getData('name')] = [\n 'edit' => [\n 'href' => $this->urlBuilder->getUrl(\n static::URL_PATH_EDIT,\n [\n 'id' => $item['id'],\n ]\n ),\n 'label' => __('Edit'),\n ],\n 'delete' => [\n 'href' => $this->urlBuilder->getUrl(\n static::URL_PATH_DELETE,\n [\n 'id' => $item['id'],\n ]\n ),\n 'label' => __('Delete'),\n 'confirm' => [\n 'title' => __('Delete Record ?'),\n 'message' => __('Are you sure you wan\\'t to delete a record?'),\n ],\n ],\n ];\n }\n }\n }\n\n return $dataSource;\n }\n}\n<\/pre><\/div>\n\n\n\napp\/code\/Vendor\/Extension\/Controller\/Adminhtml\/Index\/Delete.php\n\n<?php\n\nnamespace Vendor\\Extension\\Controller\\Adminhtml\\Index;\n\nuse Vendor\\Extension\\Model\\BookInfoFactory;\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Delete extends Action\n{\n protected $resultPageFactory;\n protected $BookInfoFactory;\n\n public function __construct(\n Context $context,\n PageFactory $resultPageFactory,\n BookInfoFactory $BookInfoFactory\n ) {\n $this->resultPageFactory = $resultPageFactory;\n $this->BookInfoFactory = $BookInfoFactory;\n parent::__construct($context);\n }\n\n public function execute()\n {\n $resultRedirectFactory = $this->resultRedirectFactory->create();\n try {\n $id = $this->getRequest()->getParam('id');\n if ($id) {\n $model = $this->BookInfoFactory->create()->load($id);\n if ($model->getId()) {\n $model->delete();\n $this->messageManager->addSuccessMessage(__("Record Delete Successfully."));\n } else {\n $this->messageManager->addErrorMessage(__("Something went wrong, Please try again."));\n }\n } else {\n $this->messageManager->addErrorMessage(__("Something went wrong, Please try again."));\n }\n } catch (\\Exception $e) {\n $this->messageManager->addErrorMessage($e, __("We can't delete record, Please try again."));\n }\n return $resultRedirectFactory->setPath('*\/*\/index');\n }\n}\n<\/pre><\/div>\n\n\n![\"\"\/](\"https:\/\/lh7-us.googleusercontent.com\/ZrpwwBOtuW9NqTgUUcmCllgqZhyIl1AcdsMpXYd-eubhHH5Yra7Ynr8xwJhGGFbkXG8IqIcb2v7KTOICrV7c2XUO0fGjn_OZfYIFJn41-XH__2CX_IY75WzGBNPs9I-b_bLQiN_V3UjOCKsj6Q5SGS8\")