I have a custom logger for magento2. Now i want for in the admin grid to change the table row color based on the status of the row. For example a row got status: warning, the table row has to be orange. What is the correct way to get this done.


  • It would be colorful. Jan 25, 2018 at 16:23
  • I like it to be colorful. But how to get it done
    – Johan
    Jan 26, 2018 at 9:44

2 Answers 2


Try following simple way, as an example I use sales order grid:

Step 1: Create SR/ModifiedSalesOrderGrid/view/adminhtml/layout/sales_order_index.xml where you can define css file.

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

Step 2: Create SR/ModifiedSalesOrderGrid/view/adminhtml/ui_component/sales_order_grid.xml for overwriting listing component

<?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">SR_ModifiedSalesOrderGrid/js/grid/listing</item>

Step 3: Create js component SR/ModifiedSalesOrderGrid/view/adminhtml/web/js/grid/listing.js

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

    return Collection.extend({
        defaults: {
            template: 'SR_ModifiedSalesOrderGrid/ui/grid/listing'
        getRowClass: function (row) {

            if(row.status == 'complete') {
                return 'complete';
            } else if(row.status == 'closed') {
                return 'closed';
            } else if(row.status == 'processing') {
                return 'processing';
            } else {
                return 'pending';

Step 4: Create template SR/ModifiedSalesOrderGrid/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">
            <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($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.'"/>

Step 5: Create css file SR/ModifiedSalesOrderGrid/view/adminhtml/web/css/grid.css

td.complete {
    background-color: #008000;
    border: 1px solid #000000;

td.closed {
    background-color: #FF0000;
    border: 1px solid #000000;

td.processing {
    background-color: #808080;
    border: 1px solid #000000;

td.pending {
    background-color: #FFA500;
    border: 1px solid #000000;

Download full module from here


You can download the free extension "Grid Colouring" to get it done)


  • This extension is suitable for colorizing the orders grid only and need to be modified. :( Jan 26, 2018 at 14:12
  • Yeah, but if you need coloring other grids just check how it is working in this module ;) Jan 26, 2018 at 14:23
  • Sure, good idea. In a few words, this extension replaces component & template of a grid to its own, where colors adding using CSS. Jan 26, 2018 at 14:24

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.