Change backgrund color of row in setupListOperation ?

[AdamovicBoban]

How can I change the background color of a row based on a variable (setupListOperation)? For example, in a table, I have orders/rides that I need to assign to drivers. When I send a ride, the background of that row should be yellow. Is it possible to change the background color of a row?

[pxpm]

Hello, I would just add some custom-attribute in the rows you want to colorize, and then a bit of javascript to find those selectors, match the row tr element and apply the bg-primary class for example.

Some pseudo-quasi-working code:

CRUD::column('my_column')->wrapper(['my-custom-attribute' => fn($crud, $column, $entry, $related_key) => $entry->active ? 'true' : 'false']);

const rows = document.querySelectorAll('[my-custom-attribute="true"]');
for (const row of rows) {
  row.classList.add('bg-danger');
}

Cheers

[AdamovicBoban]

Hello @pxpm It's not a good solution because I have an editable_select, and after the Ajax process is executed, the classes I added to change the background of the row are reset. It's necessary for me to add them directly from the controller.

Video_2023_11_26-1.mp4

[pxpm]

It's not a "full" solution, but it's a good one as I see you already have colors 😄

You need to probably hook to the datatables draw event, and everytime the table finishes drawing you apply the colors, something like:

$('#crudTable').on('draw.dt' ... )' 

You can find some examples in our codebase.

Let me know how it goes. 🙏

[AdamovicBoban]

Hi @pxpm I need the colors to be applied while drawing the table, not after rendering. This is because the colors depend on values from the database. For example, if sent == 1, the color should be yellow; if sent == 2, the color should be green; if canceled == 1, the color should be red. So, this should be done in the foreach loop when generating rows in the table.

[pxpm]

Sure, just put that sent value in a wrapper attribute like I suggested.

CRUD::column('my_column')->wrapper([
    'my-custom-attribute' => function ($crud, $column, $entry, $related_key){
        $defaultColor = match($entry->sent) {
            1 => 'yellow',
            2 => 'green',
        };
        return $entry->cancelled ? 'red' : $defaultColor;
    }]);

You will endup with a my-custom-attribute="red/yellow/green" in your column wrapper.
Search those and apply that color to the tr.

Cheers

[AdamovicBoban]

This helped me; I used the CSS selector tr:has(td span a[driver_confirm=unsent]). However, I wasn't aware that the CSS :has() selector doesn't work in Firefox and needs to be enabled in the config. It's turned off by default, which surprised me a bit.

Thanks!

p.s. Can you help me with #5380?