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

MokatchiOP•2mo ago

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•2mo 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•2mo 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•2mo ago

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

LeandroFerreira•2mo ago

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

MokatchiOP•2mo 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•2mo 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•2mo 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•2mo 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•2mo ago

Thank you guys 🙂

Gaming

Programming

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