How to create a grid using UI Component in Magento2

To create a grid in 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;
    }
}?>

<?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->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>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

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

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

<?xml version="1.0" encoding="UTF-8"?>

<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="label" xsi:type="string" translate="true">Add New Entity</item>

<item name="class" xsi:type="string">primary</item>

</item>

</argument>

<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>

</item>

</argument>

<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>

</item>

</argument>

</dataSource>

<item name="template" xsi:type="string">ui/grid/toolbar</item>

</item>

</argument>

<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>

<item name="displayArea" xsi:type="string">dataGridActions</item>

<item name="namespace" xsi:type="string">webkul_emp_data</item>

</item>

</argument>

</bookmark>

<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>

<item name="displayArea" xsi:type="string">dataGridFilters</item>

<item name="dataScope" xsi:type="string">filters</item>

<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="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item>

<item name="visible" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.bookmarks:current.columns.${ $.index }.visible</item>

</item>

</argument>

<item name="provider" xsi:type="string">webkul_emp_data.webkul_emp_data.listing_top.listing_filters</item>

</item>

</argument>

</item>

</argument>

</filterInput>

</item>

</argument>

</filterInput>

</filterRange>

<item name="dataScope" xsi:type="string">empname</item>

<item name="label" xsi:type="string" translate="true">empname</item>

</item>

</argument>

</filterInput>

<item name="dataScope" xsi:type="string">status</item>

<item name="label" xsi:type="string" translate="true">status</item>

</item>

</argument>

</filterInput>

</filters>

<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>

</argument>

<item name="type" xsi:type="string">delete</item>

<item name="label" xsi:type="string" translate="true">delete</item>

</item>

</argument>

</action>

<item name="type" xsi:type="string">status</item>

<item name="label" xsi:type="string" translate="true">Change status</item>

</item>

</argument>

<item name="type" xsi:type="string">enable</item>

<item name="label" xsi:type="string" translate="true">Enable</item>

</item>

<item name="type" xsi:type="string">disable</item>

<item name="label" xsi:type="string" translate="true">Disable</item>

</item>

</argument>

</action>

</massaction>

<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>

<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="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="1" xsi:type="string">${ $.$data.rowIndex }</item>

</item>

<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>

</argument>

</item>

</argument>

</selectionsColumn>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">empname</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">email</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">address</item>

</item>

</argument>

</column>

<item name="options" xsi:type="object">Webkul\Hello\Model\Employee\Source\Status</item>

<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>

</argument>

</column>

</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>

<?xml version="1.0"?>

<argument name="resourceModel" xsi:type="string">Webkul\Hello\Model\ResourceModel\Employee</argument>

</arguments>

</virtualType>

<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')];
    }
}

<?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;
    }
}

<?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 admin panel using magento 2.

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

Magento2

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

Ewall Solutions Dec 2, 2017 at 12:09 pm

where can i find the GridCollection file

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.

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/ […]

How to create a grid using UI Component in Magento2

Leave a Comment Cancel Reply

4 comments