how to modify custom status text color in UI component grid magento 2?
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())"/>