Filament•8mo ago

Change row color in table builder

I am using Laravel Filament v3 in my project, and I am wondering, how could I change the row color for a specific record in a table, in my case, if payments_left === 0 I would like to change the row color to green (or any other color for example) I tried this: https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes but it doesn't change the row color. this adds the classes to the html tag, but it doesn't change the color of the row.

->recordClasses(function (RecurringExpense $record) {
                if ($record->payments_left === 0) {
                    return 'bg-green-100 dark:bg-green-800';
                }
            })

->recordClasses(function (RecurringExpense $record) {
                if ($record->payments_left === 0) {
                    return 'bg-green-100 dark:bg-green-800';
                }
            })

Advanced - Table Builder - Filament

Solution:

Thanks yes it was just "npm run build"

Jump to solution

11 Replies

Lara Zeus•8mo ago

you can use tailwind css classes like bg-green-500 make sure to compile your css

Stryker•8mo ago

I used tailwind classes, and the code I posted is mine, I just want to know what am I doing wrong, or is there any other way to achieve this?

Lara Zeus•8mo ago

from the docs "These classes are not automatically compiled by Tailwind CSS. If you want to apply Tailwind CSS classes that are not already used in Blade files, you should update your content configuration in tailwind.config.js to also scan for classes inside your directory: './app/Filament/*/.php'"

Stryker•8mo ago

I have it set like this:

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Lara Zeus•8mo ago

looks good maybe !bg-green-100

awcodes•8mo ago

Have you set up a custom theme?

Stryker•8mo ago

no, I haven't, still using the default theme

Thijmen•8mo ago

There is your problem

Sidem•8mo ago

I create my theme like it write here https://filamentphp.com/docs/3.x/panels/themes but in my code :

//didn't works
->recordClasses(function (Demande $record) {
                return 'bg-red-100 dark:bg-red-800';
}

//works
->recordClasses(function (Demande $record) {
                return 'bg-green-100 dark:bg-green-800';
}

//didn't works
->recordClasses(function (Demande $record) {
                return 'bg-red-100 dark:bg-red-800';
}

//works
->recordClasses(function (Demande $record) {
                return 'bg-green-100 dark:bg-green-800';
}

only bg-green-100 dark:bg-green-800 works, the problem is bg-red-100 dark:bg-red-800but I don't understand why because even bg-yellow-100 dark:bg-yellow-800 doesn't works

Themes - Panel Builder - Filament

Lara Zeus•8mo ago

I guess "you should update your content configuration in tailwind.config.js to also scan for classes inside your directory: './app/Filament/*/.php'"

Solution

Sidem•8mo ago

Thanks yes it was just "npm run build"

Gaming

Programming

Change row color in table builder