Magento 2, add color style in Status column in sale order

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

Step 1:

/app/code/Vendor/Module/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

Step 2:

/app/code/Vendor/Module/etc/module.xml

<?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">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

Step 3:

/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml

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

Step 4:

/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.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="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>
            </item>
        </argument>
    </columns>
</listing>

Step 5:

/app/code/Vendor/Module/view/adminhtml/web/css/grid.css

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:

/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js

define([
    'Magento_Ui/js/grid/listing'
], 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:

/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html

<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
       <thead>
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
        </thead>
        <tbody>
            <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>
            <tr ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
            </tr>
        </tbody>
    </table>
</div>

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

Tags:

Adminhtml

Order Grid

Magento2.2

Recent Posts