recordClasses() added the class name to the table tr but the style doesn't applied

Hello filamenters, can you please tell me why I can't get the table rows text turned into red???

10 Replies

Here is my code:

return $table
            ->recordClasses(function  (Model $record) {
                $classes = [];
                if ($record->completionDate < now() && $record->progress < 100) {
                    $classes[] = '!text-red-500';
                }
                else if ($record->progress === 100) {
                    $this->resetTable();
                }
                return implode(' ', $classes);
            })

return $table
            ->recordClasses(function  (Model $record) {
                $classes = [];
                if ($record->completionDate < now() && $record->progress < 100) {
                    $classes[] = '!text-red-500';
                }
                else if ($record->progress === 100) {
                    $this->resetTable();
                }
                return implode(' ', $classes);
            })

I installed tailwind css, but I don't want to create a new theme to use it. I only want to color the rows if the above condition is true. Here is my tailwind.config.js content

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./app/Filament/**/*.php",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./app/Filament/**/*.php",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

my postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

my app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Any help !!

Bruno Pereira•3w ago

Filament only builds the classes that it uses. If it's a custom class that you need, you have to create a custom theme.

MokatchiOP•3w ago

Where can I find the filament classes? I tried to use the filament danger class, but it didn't color the text.

Bruno Pereira•3w ago

you have to explore the dev tools and find the styles.

LeandroFerreira•3w ago

no related to the issue, but why are you doing $this->resetTable() ?

MokatchiOP•3w ago

I want to reset the table style and get the original filament style once the progress will be 100% . But now I'm still not color the text to red

LeandroFerreira•3w ago

not sure if text color will be applied using record classes, because the text color is applied by table cell 🤔 Maybe you could add this by column:

TextColumn::make('xx')
->color(fn (YourModel $record) => $record->completionDate < now() ? 'danger' : null)

TextColumn::make('xx')
->color(fn (YourModel $record) => $record->completionDate < now() ? 'danger' : null)

It sounds weird to conditionally reset the table for each row..

MokatchiOP•3w ago

the idea is to color the whole row at once that's what I used the recordClasses. I didn't want to redundant the same condition on each table column mmmmmm, my intention is to test gloally if the condition is true then reset the table style Actually I want to reset the row if the progress is 100% and not the whole table, because there may be some rows where the progress is under 100%. Thank you that you pay my attention to this point.

LeandroFerreira•3w ago

I don't think you need to reset the table or row if the progress is 100% because the row will be rendered using this on the page load

MokatchiOP•3w ago

Thank you guys 🙂

Gaming

Programming

recordClasses() added the class name to the table tr but the style doesn't applied