how to modify custom status text color in UI component grid magento 2?

Question

I have created custom module and it has Ui component grid in admin side.. In that grid has status column based on different status color should be change. Eg; if the status is 'approved' text color should be GREEN

Answer 1

Suppose following column as a sample order status column:

<column name="status" component="SR_MagentoCommunity/js/grid/columns/select">
    <settings>
        <filter>select</filter>
        <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/>
        <dataType>select</dataType>
        <label translate="true">Status</label>
    </settings>
</column>

Actually, you need to change component here.

Now create a component class and return color getStatusColor according to your status:

app/code/SR/MagentoCommunity/view/adminhtml/web/js/grid/columns/select.js

define([
    'underscore',
    'Magento_Ui/js/grid/columns/select'
], function (_, Column) {
    'use strict';

    return Column.extend({
        defaults: {
            bodyTmpl: 'SR_MagentoCommunity/ui/grid/cells/text'
        },
        getStatusColor: function (row) {
            if (row.status == 'processing') {
                return '#FFA07A';
            }
            return '#90EE90';
        }
    });
});

Corresponding template:

app/code/SR/MagentoCommunity/view/adminhtml/web/template/ui/grid/cells/text.html

<div class="data-grid-cell-content" data-bind="style: { 'color': $col.getStatusColor($row())}" text="$col.getLabel($row())"/>

Answer 2

Following code use for the column

<column name="status" component="Magento_Ui/js/grid/columns/select">
      <settings>
           <bodyTmpl>MyModule_Test/ui/grid/cells/status</bodyTmpl>
           <options class="MyModule\Test\Model\Source\Status"/>
           <filter>select</filter>
           <dataType>select</dataType>
           <label translate="true">Status</label>
       </settings>
 </column>

You need to create a body template

MyModule/Test/view/adminhtml/web/template/ui/grid/cells/status.html

<!-- ko if: $col.getLabel($row()) == 'Enabled' -->
<div class="data-grid-cell-content"
     data-bind="css:'grid-severity-notice'"
     text="$col.getLabel($row())"></div>
<!-- /ko -->
<!-- ko if: $col.getLabel($row()) == 'Disabled' -->
<div class="data-grid-cell-content"
     data-bind="css:'grid-severity-critical'"
     text="$col.getLabel($row())"></div>
<!-- /ko -->

Answer 3

If you want to Change the Enabled Disabled Status Color (Green & Red Button), you can use this.

Grid Listing

<column name="is_campaign_product">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Have Campaign Product?</item>
            <item name="component" xsi:type="string">Equaltrue_MagentoEnhance/js/grid/columns/status</item>
            <item name="dataType" xsi:type="string">select</item>
        </item>
    </argument>
</column>

Create a file

app/code/Vendor_Name/Module_Name/view/adminhtml/web/js/grid/columns/status.js

define(
    [
    'underscore',
    'Magento_Ui/js/grid/columns/column'
    ],
    function (_, Column) {
        'use strict';

        return Column.extend(
            {

                defaults: {
                    bodyTmpl: 'Equaltrue_MagentoEnhance/grid/cells/status',
                    fieldClass: {
                        'data-grid-thumbnail-cell': true
                    }
                },

                getIsActive: function (record) {
                    return (record[this.index] === 1 || record[this.index] === '1');
                },

                /**
                 * Retrieves label associated with a provided value.
                 *
                 * @returns {String}
                 */
                getLabel: function () {

                    var options = this.options || [],
                    values = this._super(),
                    label = [];

                    if (!Array.isArray(values)) {
                        values = [values];
                    }

                    values = values.map(
                        function (value) {
                            return value + '';
                        }
                    );

                    options.forEach(
                        function (item) {
                            if (_.contains(values, item.value + '')) {
                                label.push(item.label);
                            }
                        }
                    );

                    return label.join(', ');
                }
            }
        );
    }
);

Now Create another file

app/code/Vendor_Name/Module_Name/view/adminhtml/web/template/grid/cells/status.html

<div class="data-grid-cell-content">
    <span data-bind="if: $col.getIsActive($row())">
        <span class="grid-severity-notice">
            <span data-bind="html: $col.getLabel($row())" />
        </span>
    </span>
    <span data-bind="ifnot: $col.getIsActive($row())">
        <span class="grid-severity-major">
            <span data-bind="html: $col.getLabel($row())" />
        </span>
    </span>
</div>

Note : Code taken from Firebear Export Import Extension