Filament•12mo ago

recordClasses() is only correctly applied to the first entry of a Table

https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes Calling this fn in the table view leads to only style the first row correctly - every other row falls back to default even the returns are true

->recordClasses(fn (Booking $record) => match ($record->state) {
                State::InApproval => 'border-l-4 border-red-600',
                State::Approved => 'border-l-4 border-blue-600',
                State::Invoiced => 'border-l-4 border-blue-600',
                State::Paid => 'border-l-4 border-green-600',
                default => null,
            })

->recordClasses(fn (Booking $record) => match ($record->state) {
                State::InApproval => 'border-l-4 border-red-600',
                State::Approved => 'border-l-4 border-blue-600',
                State::Invoiced => 'border-l-4 border-blue-600',
                State::Paid => 'border-l-4 border-green-600',
                default => null,
            })

Advanced - Table Builder - Filament

4 Replies

max_devOP•12mo ago

max_devOP•12mo ago

Solution: The CSS is overwritten by filament css. Therefore it needs to be important. !border-l-4 !border-red-600

nathan•6mo ago

This was a huge help!! Thank you!

Mokatchi•4w ago

Hello @max_dev Can you please tell me why I can't get the table rows text turned into red??? I tried the exclamation trick but it didn't work. 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";

Gaming

Programming

recordClasses() is only correctly applied to the first entry of a Table