How to Add Column in Sales Order Grid in Magento 2

Magento 2 UI components allow to generate and display several lists and grid types. As well you can create your own component based on the already existing code, but that’s the topic for another article.

Now I want to describe how to extend sales order grid with an additional column.

Adding a new column to a grid is not so complex task as distinct from creation a column with filtering. Let’s take a look how to perform it in Magento 2.1, by adding a new column into the order grid.

Note. The code listed below in XML format is valid only for Magento 2.1 version or later. And we are not going to consider a code for elder versions in this article. If you still use Magento 1, we highly recommend that you migrate to Magento 2.

All of the directives are placed in the <module>/view/adminhtml/ui_component/ directory. Let’s create the “sales_order_grid.xml” file. The name of the file has to match with a parent component, which we want to extend.

So let’s add the code into the file as follows:

Let’s break down this code:

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

In line

We add the column into order grid. Class Module\Ui\Component\Columns\OrderGrid should extend the Magento\Ui\Component\Listing\Columns\Column class.

We should override the prepareDataSource() method:

Current grid row data is stored in the variable $item. The name of the column is available in the array element “name”:

Thus we can fill the row the data.

But let’s get back to the sales_order_grid.xml file. All what we can see in the argument line and below is related to the description of column.

The following line states that we can render any valid HTML code in the cell. Magento 2 supports a few pre-defined template renders out of the box, all of them are placed in the module-ui.

In the following example we didn’t specify the component, but additionally, we can specify the component of the column in argument tag as well. For example:

Component defines which type of column will be used. For example, it could be date, column, actions, multiselect, select or thumbnail type. As well as templates, all of the components are placed in the module-ui. At this stage, we already have the column in order grid, and in case we don’t need the filtering by this column, we can finish. But if we do, that is becoming not so easy task.

Magento Webdesign

Take your online store to the next level with BelVG Magento Webdesign

Visit the page

There are 2 ways of solving the problem:

• To add our column into sales_order and sales_order_grid tables and control CRUD operations for the sales_order table (sales_order_grid table is synchronized with sales_order table by cron).
• To write a new plugin for rapid column update.

In my view sales_order table update way leads to the overmuch data and compatibility reduction. That’s why I decided to perform it through the plugin filtering. At first, let’s add the filter into sales_order_grid.xml file. Then add the following code right after the close tag:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

So we are going to create dropdown filter, with multiselect.

In line:

We designate class, in which filter value will be defined. This class should carry out interface \Magento\Framework\Data\OptionSourceInterface.

The line

defines the provider we use. In this case, we are using the parental provider.

For each filter, we should designate collection, where data will be shown

Statement ${ $.parentName} referrers to the collection used by default. dataSource tag specifies the collection name. For example, for order sales grid it should be as follows:

Magento 2 Migration

Take your online store to the next level with BelVG Magento 2 Migration

Visit the page

The collection class for the order sales is sales_order_grid_data_source, which is defined in vendor/magento/module-sales/etc/di.xml:

So we use the collection as a source for filtering. And now, all that we have to do is to add a plugin, which could add our data into filtering results.

Let’s register a plugin in etc/di.xml

And add method Module\Plugin\AdditionalFields\CollectionFactory::aroundGetReport()

Filtering by the current field should be available after plugin installation.

The following lines

are needed for multiselect rendering, and if we remove them, parental filter type-select will be in use by default. The current filter helps to perform selecting by several filter values.

As a result, we have:

Magento 2 provides a very comfortable way of adding the column into order grid. But in case you need to add filtering by the current column, there are 2 ways.

The first is more simple — to add two columns into the sales_order and sales_order_grid tables. But this way has a few disadvantages.
And another one I’ve just covered in this article — adding filter through the plugins method. This method is quite more complex, but it has no disadvantages that we mentioned before.

UPD: Magento has changed some syntax of *.xml files for ui-components for 2.1.3 and newer versions. Here is a module with an example: https://github.com/Galillei/sample_add_columns_to_order_grid. It has been successfully tested on Magento 2.1.4 CE, and it should work on Magento 2.1.5 as well.

Need a quality Magento extension for great Administration functionalities? Visit out BelVG store!

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page