Webkul Blog Start a Project
Webkul Blog
    Reading list Switch to dark mode

    How to create a grid using UI Component in Magento 2

    Updated 13 January 2023

    To create a grid in the admin panel you have to define a controller first.
    To define a controller create a new file:
    app/code/Webkul/Hello/Controller/Adminhtml/Employee/Index.php

    Here Webkul is a Namespace, Hello is a module name.

    <?php

namespace Webkul\Hello\Controller\Adminhtml\Employee;

use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends \Magento\Backend\App\Action
{   
    const ADMIN_RESOURCE = 'Webkul_Hello::employee';

        /**
         * @var \Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;

        /**
         * @param \Magento\Framework\App\Action\Context $context
         * @param \Magento\Framework\View\Result\PageFactory resultPageFactory
         */
        public function __construct(
            \Magento\Framework\App\Action\Context $context,
            \Magento\Framework\View\Result\PageFactory $resultPageFactory
        )
        {
            parent::__construct($context);
            $this->resultPageFactory = $resultPageFactory;
        }
    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Webkul_Hello::employee');
        $resultPage->addBreadcrumb(__('Employee Data'), __('Employee Data'));
        $resultPage->addBreadcrumb(__('Employee Data'), __('Employee Data'));
        $resultPage->getConfig()->getTitle()->prepend(__('Employee Data'));

        return $resultPage;
    }
}?>

    After defining Index.php we have to define a layout file for the same controller.
    For which we need to create file:
    app/code/Webkul/Hello/view/adminhtml/layout/hello_employee_index.xml

    Here, we simply register our UI component.

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="webkul_emp_data"/>
        </referenceContainer>
    </body>
</page>

    Now, after registering a Ui component, now we need to create it:

    Searching for an experienced
    Magento 2 Company ?     Read More

    app/code/Webkul/Hello/view/adminhtml/ui_component/webkul_emp_data.xml

    Here we define grid’s columns, filters and actions.

    <?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">webkul_emp_data.entity_listing_data_source1</item>
            <item name="deps" xsi:type="string">webkul_emp_data.entity_listing_data_source1</item>
        </item>
        <item name="spinner" xsi:type="string">wk_emp_data_columns</item>
        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Add New Entity</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="entity_listing_data_source1">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">entity_listing_data_source1</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/>
                        <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/>
                        <item name="namespace" xsi:type="string">webkul_emp_data</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <container name="columns_controls">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsData" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns</item>
                    </item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                </item>
            </argument>
        </container>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="dataScope" xsi:type="string">filters</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
                        </item>
                    </item>
                </item>
            </argument>
            <filterRange name="id">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">id</item>
                        <item name="label" xsi:type="string" translate="true">ID</item>
                        <item name="childDefaults" xsi:type="array">
                            <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item>
                        </item>
                    </item>
                </argument>
                <filterInput name="from">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataScope" xsi:type="string">from</item>
                            <item name="label" xsi:type="string" translate="true">from</item>
                            <item name="placeholder" xsi:type="string" translate="true">From</item>
                        </item>
                    </argument>
                </filterInput>
                <filterInput name="to">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataScope" xsi:type="string">to</item>
                            <item name="label" xsi:type="string" translate="true">to</item>
                            <item name="placeholder" xsi:type="string" translate="true">To</item>
                        </item>
                    </argument>
                </filterInput>
            </filterRange>
            <filterInput name="empname">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">empname</item>
                        <item name="label" xsi:type="string" translate="true">empname</item>
                    </item>
                </argument>
            </filterInput>
            <filterInput name="status">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="label" xsi:type="string" translate="true">status</item>
                    </item>
                </argument>
            </filterInput>
        </filters>
         <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.ids</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">delete</item>
                        <item name="url" xsi:type="url" path="hello/employee/massDelete"/>
                    </item>
                </argument>
            </action>
            <action name="status">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">status</item>
                        <item name="label" xsi:type="string" translate="true">Change status</item>
                    </item>
                </argument>
                <argument name="actions" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="type" xsi:type="string">enable</item>
                        <item name="label" xsi:type="string" translate="true">Enable</item>
                        <item name="url" xsi:type="url" path="hello/employee/massStatus">
                            <param name="status">1</param>
                        </item>
                    </item>
                    <item name="1" xsi:type="array">
                        <item name="type" xsi:type="string">disable</item>
                        <item name="label" xsi:type="string" translate="true">Disable</item>
                        <item name="url" xsi:type="url" path="hello/employee/massStatus">
                            <param name="status">0</param>
                        </item>
                    </item>
                </argument>
            </action>
        </massaction>
        <paging name="listing_paging">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="wk_emp_data_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.wk_emp_data_columns.actions</item>
                        <item name="target" xsi:type="string">applyAction</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">edit</item>
                            <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                        </item>
                    </item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks</item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>
          <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">id</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>
        <column name="empname">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">empname</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>
         <column name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">email</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>
         <column name="address">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">address</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>
        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Webkul\Hello\Model\Employee\Source\Status</item>
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                    <item name="editor" xsi:type="string">select</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>
         <actionsColumn name="actions" class="Webkul\Hello\Ui\Component\Listing\Column\EmployeeActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </actionsColumn>
    </columns> 
</listing>

    In the above file we defined data provider under data source tag.
    which brings concept of dependency injection.
    Now we need to create di file under,
    app/code/Webkul/Hello/etc/di.xml

    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Webkul\Hello\Model\ResourceModel\Employee\Grid\Collection">
        <arguments>
            <argument name="mainTable" xsi:type="string">wk_emp_data</argument>
            <argument name="resourceModel" xsi:type="string">Webkul\Hello\Model\ResourceModel\Employee</argument>
        </arguments>
    </virtualType>
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="entity_listing_data_source1" xsi:type="string">Webkul\Hello\Model\ResourceModel\Employee\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
</config>

    Here, “wk_emp_data” is our main table.

    To display available columns for the status we define a separate class:

    app/code/Webkul/Hello/Model/Employee/Source/Status.php

    <?php
namespace Webkul\Hello\Model\Employee\Source;

class Status implements \Magento\Framework\Data\OptionSourceInterface
{
    protected $emp;

    public function __construct(\Webkul\Hello\Model\Employee $emp)
    {
        $this->emp = $emp;
    }

    /**
     * Get options
     *
     * @return array
     */
    public function toOptionArray()
    {
        $options[] = ['label' => '', 'value' => ''];
        $availableOptions = $this->getOptionArray();
        foreach ($availableOptions as $key => $value) {
            $options[] = [
                'label' => $value,
                'value' => $key,
            ];
        }
        return $options;
    }

    public static function getOptionArray()
    {
        return [1 => __('Enabled'), 0 => __('Disabled')];
    }
}

    Now, to define actions, we need to create a file at:
    app/code/Webkul/Hello/Ui/Component/Listing/Column/EmployeeActions.php

    <?php
namespace Webkul\Hello\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;

class EmployeeActions extends Column
{
    /** Url path */
    const Employee_URL_PATH_EDIT = 'hello/employee/edit';
    const Employee_URL_PATH_DELETE = 'hello/employee/delete';

    /** @var UrlInterface */
    protected $urlBuilder;

    /**
     * @var string
     */
    private $editUrl;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     * @param string $editUrl
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = [],
        $editUrl = self::Employee_URL_PATH_EDIT
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->editUrl = $editUrl;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $name = $this->getData('name');
                if (isset($item['id'])) {
                    $item[$name]['edit'] = [
                        'href' => $this->urlBuilder->getUrl($this->editUrl, ['id' => $item['id']]),
                        'label' => __('Edit')
                    ];
                    $item[$name]['delete'] = [
                        'href' => $this->urlBuilder->getUrl(self::Employee_URL_PATH_DELETE, ['id' => $item['id']]),
                        'label' => __('Delete'),
                        'confirm' => [
                            'title' => __('Delete "${ $.$data.empname }"'),
                            'message' => __('Are you sure you wan\'t to delete a "${ $.$data.empname }" record?')
                        ]
                    ];
                }
            }
        }

        return $dataSource;
    }
}

    That’s all to create a grid in the admin panel using Magento 2.

    Now, to perform the action you need to create actions under the controller.

    Thank you for reading this article on How to create a grid using UI Component in Magento 2, we hope you liked it.

    You can also view our wide range of ready-to-use Magento 2 extensions.

    Further for any more queries, please reach out to our team via support ticket.

    Magento2
    author-thumb
    Bulbul 6 Badges 31 December 2015
    . . .

    Related Articles

    Magento 2 Multi Vendor Web Services API

    Nishad Bhan on 28 September 2023

    How to create Collection Grid, Edit/Add grid row,...

    abhishek on 18 September 2023

    Create Grid , edit/add grid row and installer in...

    abhishek on 12 January 2023

    Magento 2 Development 17: More about Admin Grid

    Sanjay Chouhan on 3 August 2023

    Comments

    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • Akshay Nov 3, 2018 at 6:08 am
    Getting error :
    Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not throw an exception, caught TypeError: Argument 1 passed to Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider::searchResultToOutput() must implement interface Magento\Framework\Api\Search\SearchResultInterface, instance of Ktpl\Gallery\Model\ResourceModel\Event\Collection given, called in /var/www/html/magento2.6/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php on line 284 in /var/www/html/magento2.6/vendor/magento/module-ui/Component/Wrapper/UiComponent.php on line 0
    Reply
  • Ewall Solutions Dec 2, 2017 at 12:09 pm
    where can i find the GridCollection file
    Reply
    • Webkul Support Dec 4, 2017 at 6:50 am

      Hello,
      you need to create it under WebkulHelloModelResourceModelEmployeeGridCollection.
      The concept behind using this file is: if you want to add join or filter on your collection before displaying it on your Grid, then we need to create this file, by which our collection and grid collection gives different collection according to our need.
      And if you do not want to alter your collection for Grid, then you can use your Collection also.
      Hope this will helps you.

      Thank you.

      Reply
  • How to apply join in collection in UIComponent Grid in magento 2 Feb 5, 2016 at 1:35 pm
    […] http://webkul.com/blog/how-to-create-a-grid-using-ui-component/ […]
    Reply
    • Back to Top

    Start a Project



      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home