Changing Grid Column Sort Order in Magento 2

When you add a UI component based grid, Magento will remember the positions of the columns when you next log in, even if you don’t specify a sort order. When you want to go about changing grid column sort order in Magento 2, it may not be as simple as you think.

Imagine that within your XML file within your module’s view/adminhtml/ui_component directory, you had the below code snippet that defined two columns and their sort orders.


<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

    ....

    <columns name="[your_ui_component]_columns">
        <column name="entity_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Entity ID</item>
                    <item name="sortOrder" xsi:type="number">5</item>
                </item>
            </argument>
        </column>
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>
    </columns>

    ....

</listing>

The grid would render within the admin with the Entity ID column positioned before the Title column.

If the sortOrder is changed (i.e. 20 for Entity ID), after clearing the cache and refreshing the page, the grid columns will remain in exactly the same position.

This is because Magento remembers the column positions within its ui_bookmark database table.

The namespace column within this database column contains the namespace attribute from the <item> node within the pair of <bookmark> nodes in the UI component XML file.

There will be two bookmark records that are stored within this table for each namespace, and both of these records will need to be cleared in order for Magento to recollect the bookmark information and thus, re-save the columns’ sort order.

There does not seem to be any other way that the sort orders for the columns can be modified. Simply changing the namespace within the UI component XML file does not seem to work.

Therefore if extension developers proceed to modify existing core grids, such as the product or the sales order grid, they may experience some abnormalities when attempting to position a column in a particular place.

Hopefully a cleaner solution for this will be provided in future versions when changing grid column sort order in Magento 2.

Note: This article is based on Magento Open Source version 2.1.8.