Laravel-datatables: Changing cells' color based on their contents?

[WesThorburn]

Hi Arjay,
Laravel-Datatables is working wonderfully for me! However, I was wondering if there is a way to change cells' colors depending on their contents.

For example, here is a screenshot of my table. I'd like to have cells in the 'Day Change' column to be color-coded. Negative day changes appear with red text and positive day changes appear in green text.

Is there a particular way you could recommend that I implement this?

[yajra]

I think DT_Row options would work for you. See this demo for ref. Also check the JS API documentation on datatables.net for some docs about it.

[WesThorburn]

Thanks for the quick reply! That looks like what I need.

I'll check it out.

[WesThorburn]

For anyone else interested, I implemented this by using ->editColumn() to check the value of the cells in the 'day_change' column. Then I returned the day_change variable concatenated with a div class. Here is the code from my controller.

$stocks = StockMetrics::join('stocks', 'stocks.stock_code', '=', 'stock_metrics.stock_code')
            ->select([
                'stock_metrics.stock_code', 
                'stocks.company_name', 
                'stocks.sector', 
                'stock_metrics.last_trade',
                'stock_metrics.day_change',
                'stock_metrics.market_cap',
                'stock_metrics.average_daily_volume',
                'stock_metrics.EBITDA',
                'stock_metrics.earnings_per_share_current',
                'stock_metrics.price_to_earnings',
                'stock_metrics.price_to_book',
                'stock_metrics.year_high',
                'stock_metrics.year_low'
            ]);
        return \Datatables::of($stocks)
            ->editColumn('day_change', function($stock){
                if($stock->day_change > 0){
                    return "<div class='color-green'>".$stock->day_change."%"."</div>";
                }
                elseif($stock->day_change < 0){
                    return "<div class='color-red'>".$stock->day_change."%"."</div>";
                }
                return $stock->day_change.'%';
            })
            ->make(true);

[santhosh-rajashekar]

When i return the element like below in my case, i am getting that element displayed as text instead of teh html element as i am expecting, any idea on this?

$this->collection = Datatables::of($orders);

        $this->collection->editColumn('is_processed', function ($order)
        {
            if ($order->is_processed == 1)
            {
                return "<i class=\"fa fa-exclamation-circle\" style=\"color:red\" aria-hidden=\"true\"></i>";
            }
            else
            {
                return "<i class=\"fa fa-check-circle fa-lg\" style=\"color:green\"></i>";
            }
        });

[yajra]

@santhosh-rajashekar you might be using v7 hence you need to specify which columns contains html using ->rawColumns(['is_processed']);