24

I made a custom grid in Magento admin using the UI Component. All is working fine, besides the order of the columns that are not showing right. enter image description here

  • as you can see the action column is right at the beginning and the selected one is at the end
  • when I created the columns in XML I took into consideration the sortOrder attribute for each column, but somehow the order is not the one that I set to be

The code from the listing.xml is the following

<columns name="inactive_columns" class="Module\MyModule\Ui\Component\Listing\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">inactive_listing.inactive_listing.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
            <item name="editorConfig" xsi:type="array">
                <item name="selectProvider" xsi:type="string">inactive_listing.inactive_listing.inactive_columns.ids</item>
                <item name="enabled" xsi:type="boolean">true</item>
                <item name="indexField" xsi:type="string">entity_id</item>
                <item name="clientConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="customer/index/inlineEdit"/>
                    <item name="validateBeforeSave" xsi:type="boolean">false</item>
                </item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">inactive_listing.inactive_listing.inactive_columns_editor</item>
                    <item name="target" xsi:type="string">startEdit</item>
                    <item name="params" xsi:type="array">
                        <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                        <item name="1" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">inactive_listing.inactive_listing.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">entity_id</item>
                <item name="sortOrder" xsi:type="number">0</item>
            </item>
        </argument>
    </selectionsColumn>
    <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">ID</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
    </column>
    <column name="firstname">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Firstname</item>
                <item name="editor" xsi:type="string">text</item>
                <item name="sortOrder" xsi:type="number">40</item>
            </item>
        </argument>
    </column>
    <column name="lastname">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Lastname</item>
                <item name="editor" xsi:type="string">text</item>
                <item name="sortOrder" xsi:type="number">50</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="editor" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Email Cacat</item>
                <item name="sortOrder" xsi:type="number">30</item>
            </item>
        </argument>
    </column>
    <column name="group_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="editor" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Group</item>
                <item name="sortOrder" xsi:type="number">90</item>
            </item>
        </argument>
    </column>
    <column name="billing_telephone">
        <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="string">text</item>
                <item name="label" xsi:type="string" translate="true">Phone</item>
                <item name="sortOrder" xsi:type="number">100</item>
            </item>
        </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="label" xsi:type="string" translate="true">Customer Since</item>
                <item name="sortOrder" xsi:type="number">110</item>
            </item>
        </argument>
    </column>
    <column name="last_visit_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="visible" xsi:type="boolean">false</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Last Logged In</item>
                <item name="sortOrder" xsi:type="number">120</item>
            </item>
        </argument>
    </column>
    <column name="created_in">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Account Created in</item>
                <item name="sortOrder" xsi:type="number">140</item>
            </item>
        </argument>
    </column>
    <column name="kpi_views_customer">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Kpi Views</item>
                <item name="sortOrder" xsi:type="number">60</item>
            </item>
        </argument>
    </column>
    <column name="customer_membership">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Customer Membership</item>
                <item name="sortOrder" xsi:type="number">70</item>
            </item>
        </argument>
    </column>
    <column name="customer_access">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Customer Access</item>
                <item name="sortOrder" xsi:type="number">80</item>
            </item>
        </argument>
    </column>
    <actionsColumn name="actions" class="Magento\Customer\Ui\Component\Listing\Column\Actions">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">entity_id</item>
                <item name="sortOrder" xsi:type="number">222</item>
            </item>
        </argument>
    </actionsColumn>
</columns> 

and the class Module\MyModule\Ui\Component\Listing\Columns is

class Columns extends \Magento\Ui\Component\Listing\Columns
{

/**
 * @var \KPIs\CustomerReports\Model\Customer\Attribute\Repository\AttributeRepository $attributeRepository
 */
protected $attributeRepository;

protected $manageAttributes;

/** @var int */
protected $columnSortOrder;

public function __construct(
    ContextInterface $context,
    ColumnFactory $columnFactory,
    AttributeRepository $attributeRepository,
    ManageAttributes $manageAttributes,
    InlineEditUpdater $inlineEditor,
    array $components = [],
    array $data = []
)
{
    parent::__construct($context, $components, $data);
    $this->columnFactory = $columnFactory;
    $this->attributeRepository = $attributeRepository;
    $this->manageAttributes = $manageAttributes;
    $this->inlineEditUpdater = $inlineEditor;
}

public function prepareDataSource(array $dataSource)
{
    $customerAccessOptions = $this->attributeRepository->get(CustomerMetadataInterface::ENTITY_TYPE_CUSTOMER, "customer_access")->getOptions();
    $customerMembershipOptions = $this->attributeRepository->get(CustomerMetadataInterface::ENTITY_TYPE_CUSTOMER, "customer_membership")->getOptions();
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as & $item) {
            if (isset($item["customer_access"])) {
                $item["customer_access"][0] = $customerAccessOptions[$item["customer_access"][0]]->getLabel();
            }
            if (isset($item["customer_membership"])) {
                $item["customer_membership"] = $customerMembershipOptions[$item["customer_membership"][0]]->getLabel();
            }
        }
    }
    return $dataSource;
}
}
  • as you can see, in the class I don't do anything sortOrder related :), so it should be the default behavior
  • also, the action and selection columns cannot be dragged and dropped (as far as I saw)

Does anyone have any idea how can I sort the columns from XML or the code? The action should be the last column and the selection the first one. Thanks! :)

2
  • 3
    Try to drag& drop column in grid
    – Keyur Shah
    May 3, 2016 at 14:11
  • I tried that already, it's not working with action and selection columns
    – Dragos
    May 3, 2016 at 14:12

4 Answers 4

75

Try this solution

  1. Use below line to sort the column in grid.

    <item name="sortOrder" xsi:type="number">6</item>
    
  2. Open you database table ui_bookmark.

  3. Search the name of your uiComponent from namespce column of ui_bookmark table. You can check uiComponent name from respective layout xml. below is just an example path.

    /app/code/Vendor/Module/view/adminhtml/layout/module__controller_index.xml
    
  4. Now delete the records that you find from ui_bookmark table.

  5. Clear the cache

    php bin/magento cache:flush
    
    php bin/magento cache:clean
    

Thats all. Enjoy!

6
  • yep, that's the correct answer. Thx! :)
    – Dragos
    Sep 15, 2016 at 11:06
  • 7
    Works, but would be nice to know how to refresh it without direct database manipulation.
    – Volvox
    Oct 13, 2016 at 10:36
  • this works like mint :) Sep 10, 2019 at 5:48
  • Admin logout/login can refresh its order if it is set properly in coding.
    – Wasim
    Dec 18, 2019 at 13:30
  • this is working superb... :) Mar 18, 2020 at 12:55
6

Columns order for ui grid in Magento2 being stored in table ui_bookmark

For column namespace equal you grid name and identifier = current you should change config column value. You can find columns order there in every end of row, parameter "positions":{}

1
  • Really help full for me! It is working solution. I have delete both current and default view so now it working fine as i want. Jul 7, 2016 at 6:16
4

✅ You may explicitly set a sortOrder attribute on the XML <column> element.

Like so:

<column name="object_id" sortOrder="10">
Alternatively

Simply do not set a sortOrder value; the column order is implied by the order in which they are listed in the UI Component's XML.

You just write them in the order you want them to appear.


🧐 Here's my working example:

Note: I'm using what seems to be a newer (or older 🤷) Magento XML definition schema for this than what the other answers are showing.

./view/adminhtml/ui_component/[your_component]_listing.xml
<?xml version="1.0"?>
<listing xmlns:xsi="..." xsi:noNamespaceSchemaLocation="...">
    <columns name="object_listing_columns">
        <column name="object_id" sortOrder="10">
            <settings>
                <filter>textRange</filter>
                <label translate="true">ID</label>
                <sorting>desc</sorting>
            </settings>
        </column>
        <column name="is_active" sortOrder="20" component="Magento_Ui/js/grid/columns/select">
            <settings>
                <options class="Magento\Config\Model\Config\Source\Yesno"/>
                <filter>select</filter>
                <editor>
                    <editorType>select</editorType>
                </editor>
                <dataType>select</dataType>
                <label translate="true">Is Active</label>
            </settings>
        </column>
        <column name="store_id" sortOrder="30" class="Magento\Store\Ui\Component\Listing\Column\Store">
            <settings>
                <label translate="true">Store View</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <sortable>false</sortable>
            </settings>
        </column>
    </columns>
</listing>

🧹 Cleaning the database's ui_bookmark table

Yes, like the other answers here, if you re-order <column>s in the UI Component's XML, you need to delete the database's ui_bookmark table entries that correspond to your module's ui_bookmark.namespace.

🔧 You have to do this manually with a database management tool of your choice.

The ui_bookmark.namespace value to remove will match what is defined your layout .xml files within the element <uiComponent name="..."/>:

./view/adminhtml/layout/[module_name]_[controller_name]_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="..." xsi:noNamespaceSchemaLocation="...">
    <body>
        <referenceContainer name="content">
           <uiComponent name="my_object_listing"/>
        </referenceContainer>
    </body>
</page>

The database values you remove here are regenerated the next time the admin page is visited.


♻️ 🚮 Ah yes, Cache:

php bin/magento cache:flush;
1
  • Kudos for mentioning ui_bookmark cleanup - it is not the most apparent part of admin UI grids.
    – vpodorozh
    Sep 26 at 8:34
2

You need to check first Your "module.xml" and find the code. example :

And check the order of your module must be loaded after or before the order is depend on module load order or make sure your module load as per your requirement.

you can check your module load order etc->config.xml file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.