Magento2 – Change Sort Order of Edit Action Customer Grid Column

custom-column-gridcustomer-gridgridmagento2

I want to move edit action column beside customer name programmatically in customer grid like this:

enter image description here

how to do it from custom module?

i've tried this, but still not working

app/code/Namespace/Module/view/adminhtml/ui_component/customer_listing.xml

<?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="customer_columns">
        <actionsColumn name="actions">
          <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                  <item name="sortOrder" xsi:type="number">3</item>
              </item>
          </argument>
        </actionsColumn>
    </columns>
</listing>

and i change the content with this, but still not working

<?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="customer_columns"> 
        <actionsColumn name="actions" class="Magento\Customer\Ui\Component\Listing\Column\Actions" sortOrder="2">
            <settings>
                <indexField>entity_id</indexField>
            </settings>
        </actionsColumn>
    </columns>
</listing>

i already delete the customer_listing in ui_bookmark table, clean+flush cache, run setup:upgrade & di:compile, but still not working

Best Answer

It doesn't look like sortOrder option is applicable to the Action column.

The Action column uses ActionsColumn ui component that has a configuration option called draggable, which is defaulted to false. You can extend its js script app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js and set draggable to true. This will enable the column to be dragged to any position you want. More info can be found in devDocs

In your case, first create a requirejs-config.js under app/code/Namespace/Module/view/adminhtml/ with the below code:

var config = {
    map: {
        '*': {
            'Magento_Ui/js/grid/columns/actions': 'Namespace_Module/js/actions',
            uiGridColumnsActions: 'Magento_Ui/js/grid/columns/actions'
        }
    }
};

Then create a custom js file actions.js under app/code/Namespace/Module/view/adminhtml/web/js/ with the below code to set draggable to true:

define([
    "jquery",
    'uiGridColumnsActions'
], function($, actions){
    'use strict';

    //make it draggable on customer listing page only
    if($( 'body' ).hasClass( 'customer-index-index' )){
        return actions.extend({
            defaults: {
                draggable: true
            }
        });
    }else{
        return actions;
    }
});

Clear static files and cache afterwards.

Related Topic