Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Bux's avatar
Level 4

How to change table row color in Resource view?

I'd like to change the background color for each table row in a Nova Resource view when the date (created_at) is older than, for example, 3 weeks. How to do that? I've been messing around in nova/resources/js/components/Index/ResourceTableRow.vue but that doesn't work.

Any help is greatly appreciated!

0 likes
3 replies
Torpedo's avatar

Hi,

at first i created a computed field

            Text::make('Status', function () {
                return view('partials.status', [
                    'is_passing' => $this->isPassing(),
                    'is_paid' => $this->isPaid(),
                    'id' => $this->id,
                ])->render();
            })->asHtml(),

than i created also the methods isPassing and isPaid in my resource

    protected function isPassing(){

        return $this->canceled == 1;

    }

    protected function isPaid(){

        return $this->invoice_paid == 1;

    }

finally the bladefile for the view


@if ($is_passing)
<div class="test" style="background: red;">

<span><b>CANCELED</b></span>
<style>
    [dusk="{{$id}}-row"]{
             background: #ffdddd !Important;
    }
</style>
</div>

@elseif ($is_paid)

    <span><b>DONE</b></span>
    @if ($is_passing)
        <span><b>CANCELED</b></span>
        @endif

        <style>
            [dusk="{{$id}}-row"]{
                background: #dff0d8 !Important;
            }
        </style>


@endif

nova doesnt have classes for eacht row, so i used dusk..

3 likes
Bux's avatar
Level 4

Hi @torpedo,

Thanks for your reply. I used your code as an example to make my own. One comment on your Blade code: the second @if ($is_passing) (inside @elseif ($is_paid)) is never reached. ;)

Bux's avatar
Bux
OP
Best Answer
Level 4

Oh...for people looking for an answer too, here is my solution:

Nova Resource

Text::make('Code', function () {
        return view('partials.overdue', [
            'overdue' => $this->isOverdue(),
            'id' => $this->id,
            'code' => $this->code,
        ])->render();
    })->asHtml()
protected function isOverdue()
{
    return ($this->created_at < Carbon::now()->subDays(21)) &&
        (is_null($this->size) ||
         is_null($this->weight) ||
         is_null($this->price));
}

resources/views/partials/overdue.blade.php

@if ($overdue)
    <style>
        [dusk="{{$id}}-row"] { background: #FDD !important; }
    </style>
    <strong style="color: darkred;">{{ $code }}</strong>
@else
    {{ $code }}
@endif
4 likes

Please or to participate in this conversation.