Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?

enter image description here

  • <column name="status" class="Iota\EShopping\Ui\Component\Listing\Column\Status"> <settings> <filter>select</filter> <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column> – Bong Channarith Aug 23 '18 at 7:00
  • I using class. @LAW – Bong Channarith Aug 23 '18 at 7:03
  • Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad! – Gagan Aug 23 '18 at 7:04
  • Check my answer. – Sukumar Gorai Aug 23 '18 at 8:35

Create a module named Vendor_Module. Create all the files and structure like below:

Step 1:



Step 2:


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="0.0.1">
            <module name="Magento_Sales"/>

Step 3:


<?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">
        <css src="Vendor_Module::css/grid.css"/>

Step 4:


<?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="sales_order_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>

Step 5:


td.complete div {
    border: 1px solid #008000;
    padding: 5px 0px 6px 10px;

td.closed div{
    border: 1px solid #FF0000;
    padding: 5px 0px 6px 10px;

td.processing div{
    border: 1px solid #808080;
    padding: 5px 0px 6px 10px;

td.pending div{
    border: 1px solid #FFA500;
    padding: 5px 0px 6px 10px;

Step 6:


], function (Collection) {
    'use strict';

    return Collection.extend({
        defaults: {
            template: 'Vendor_Module/ui/grid/listing'
        getRowClass: function (col,row) {
            if(col.index == 'status'){
                if(row.status == 'complete') {
                    return 'complete';
                } else if(row.status == 'closed') {
                    return 'closed';
                } else if(row.status == 'processing') {
                    return 'processing';
                } else {
                    return 'pending';

Step 7:


<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
            <tr class="data-row" repeat="foreach: rows, item: '$row'">
                <td outerfasteach="data: getVisible(), as: '$col'"
                    css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
            <tr ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>

You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.

  • your listing.html file replaces the $parent.getRowClass($col,$row()) css data binding,which removes the css classes data-grid-checkbox-cell and `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back? – EpixRu Feb 16 at 3:50

Please follow the step to apply style to your status field admin grid.

Vendor\Module Name\view\adminhtml\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <css src="<Vendor>_<Module Name>::css/style.css"/>

After that create css file in your web folder like :

Vendor\Module Name\view\adminhtml\web\css\style.css add your style here for different statuses.

If you still query then let me know.

  • Do i need to have a renderer for use with style? – Bong Channarith Aug 23 '18 at 7:03
  • No need to renderer. and run command. – aravind Pal Aug 23 '18 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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