i want to change Status column - with color in CMS october in columns.yaml

Question

i want to change Status column - with color in CMS october in columns.yaml ...

how i add this :

<div class="control-list">
    <table class="table data">
        <thead>
            <tr>
                <th style="width: 150px"><span>Status</span></th>
                <th class="active sort-asc"><a href="/">Title</a></th>
            </tr>
        </thead>
        <tbody> 
            <tr>
                <td>
                    <span class="oc-icon-circle text-success">
                        Approved
                    </span>
                </td>
                <td>The sun is shining</td>
            </tr>
            <tr>
                <td>
                    <span class="oc-icon-circle text-danger">
                        Cancelled
                    </span>
                </td>
                <td>The weather is sweet here</td>
            </tr>
        </tbody>
    </table>
</div>

How can I add such a thing into my system model?

Answer 1

Entire row (easier)

You can apply a class to the entire row overwriting listInjectRowClass in your controller and return the name of one of the classes listed in the docs, for example:

public function listInjectRowClass($model, $definition)
{
    switch ($model->status) {
        case Order::STATUS_NEW:
            return 'new';
            break;

        case Order::STATUS_PREPARING:
            return 'processing';
            break;

        case Order::STATUS_PREPARED:
            return 'processing';
            break;

        case Order::STATUS_SHIPPED:
            return 'frozen';
            break;

        case Order::STATUS_DELIVERED:
            return 'positive';
            break;

        case Order::STATUS_WITHDRAWN:
            return 'positive';
            break;
    }
}

This will result in something like this:

Just one column of the row

This is a little more tricky, basically you have to use a partial for rendering the column.

In your columns.yaml

content:
    type: partial
    path: ~/plugins/acme/blog/models/comments/_content_column.htm

And in the partial file _content_column.htm you need to have something like this:

<span class="<?= $record->column_status_class ?>">
   <?= $value ?>
</span>

where, as the docs say:

$value is the default cell value

$record is the model used for the cell

So, for this example, the model need a function called getColumnStatusClassAttribute which will return the proper class name.