F
Filament•6mo ago
Zoltar

custom background columns in table grid

Hello, Another day another request 🤓 I'm trying to recreate a grid like the attached image the background color of columns depend by a value stored in $record my code is below
No description
Solution:
```php ->recordClasses(fn (Model $record) => match ($record->id) { 21 => 'custom-bg-color-black', 22 => 'custom-bg-color-red', 23 => 'custom-bg-color-yellow',...
Jump to solution
29 Replies
Zoltar
ZoltarOP•6mo ago
table function use custom view 
 
public static function table(Table $table): Table
    { 
        return $table
            ->columns([
                Stack::make([
                    /*
                    TextColumn::make('titolo')
                        ->weight(FontWeight::SemiBold)
                        ->size(TextColumn\TextColumnSize::Large)
                        ->alignCenter(),
                        ->icon('heroicon-m-envelope')
                        ->iconColor('red'),
                        ->searchable()
                        ->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    */
                ]),    
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc');
    }
 
public static function table(Table $table): Table
    { 
        return $table
            ->columns([
                Stack::make([
                    /*
                    TextColumn::make('titolo')
                        ->weight(FontWeight::SemiBold)
                        ->size(TextColumn\TextColumnSize::Large)
                        ->alignCenter(),
                        ->icon('heroicon-m-envelope')
                        ->iconColor('red'),
                        ->searchable()
                        ->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    */
                ]),    
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc');
    }
custom view 
    @if($getRecord()->id == 21)
    //Work for all but not for style.....
    <style>
        .fi-ta-record  { 
            background-color: #FFFFE0 ;
        }
    </style> 
    @endif

    
    <div class="px-4 py-3 rounded-lg">

            <span>
                {{ $getRecord()->titolo }}
                <br>
                {{ $getRecord()->durata }}
            </span>

        <br>
        Fine Blocco Vista Grid
        <br>

    </div>
    @if($getRecord()->id == 21)
    //Work for all but not for style.....
    <style>
        .fi-ta-record  { 
            background-color: #FFFFE0 ;
        }
    </style> 
    @endif

    
    <div class="px-4 py-3 rounded-lg">

            <span>
                {{ $getRecord()->titolo }}
                <br>
                {{ $getRecord()->durata }}
            </span>

        <br>
        Fine Blocco Vista Grid
        <br>

    </div>
the problem is that the style tag is always taken. without considering the if condition
Zoltar
ZoltarOP•6mo ago
No description
awcodes
awcodes•6mo ago
maybe something like this: 
Stack::make()
  ->extraAttributes(function ($record) {
    if ($record->bgColor) {
      return ['style' => 'background-color: ' . $record->bgColor . ';'];
    }
  })
Stack::make()
  ->extraAttributes(function ($record) {
    if ($record->bgColor) {
      return ['style' => 'background-color: ' . $record->bgColor . ';'];
    }
  })
may or may not need an !important
Zoltar
ZoltarOP•6mo ago
ok i will try...thanks but do you know why the style tag doesn't take the if condition? i try with @if and <?php if
awcodes
awcodes•6mo ago
the style tag will reset the cascade, they aren't scoped. might also need to wrap both the if and the div in an outer div, so there is only one root element.
Zoltar
ZoltarOP•6mo ago
if i print text inside if, it work
Zoltar
ZoltarOP•6mo ago
No description
Zoltar
ZoltarOP•6mo ago
try with extraAttributes function...thanks @awcodes Illuminate\View\ComponentAttributeBag::merge(): Argument #1 ($attributeDefaults) must be of type array, null given, called in vendor\filament\support\src\Concerns\HasExtraAttributes.php on line 37 
return $table
            ->columns([

                Stack::make([
                    
                    TextColumn::make('titolo')
                        //->weight(FontWeight::SemiBold)
                        //->size(TextColumn\TextColumnSize::Large)
                        //->alignCenter(),
                        //->icon('heroicon-m-envelope')
                        //->iconColor('red'),
                        ->searchable(),
                        //->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    
                ])
                ->extraAttributes(function ($record) {
                    if ($record->id == 21) {
                      return ['style' => 'background-color: red;'];
                    }
                  })
                /*    
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
                    ->components([
                        //TextColumn::make('titolo'),
                        //TextColumn::make('durata'),
                    ]) 
                */
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc');
            //->modifyQueryUsing(fn (Builder $query) => $query->published());
return $table
            ->columns([

                Stack::make([
                    
                    TextColumn::make('titolo')
                        //->weight(FontWeight::SemiBold)
                        //->size(TextColumn\TextColumnSize::Large)
                        //->alignCenter(),
                        //->icon('heroicon-m-envelope')
                        //->iconColor('red'),
                        ->searchable(),
                        //->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    
                ])
                ->extraAttributes(function ($record) {
                    if ($record->id == 21) {
                      return ['style' => 'background-color: red;'];
                    }
                  })
                /*    
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
                    ->components([
                        //TextColumn::make('titolo'),
                        //TextColumn::make('durata'),
                    ]) 
                */
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc');
            //->modifyQueryUsing(fn (Builder $query) => $query->published());
awcodes
awcodes•6mo ago
->extraAttributes(function ($record) {
  if ($record->id == 21) {
    return ['style' => 'background-color: red;'];
  }
  return [];
})
->extraAttributes(function ($record) {
  if ($record->id == 21) {
    return ['style' => 'background-color: red;'];
  }
  return [];
})
Zoltar
ZoltarOP•6mo ago
@awcodes ok its works..thanks so much
No description
Zoltar
ZoltarOP•6mo ago
but is it possible to apply the style to the column? the yellow bg
awcodes
awcodes•6mo ago
hmm. yea, sorry, i thought it would.
Zoltar
ZoltarOP•6mo ago
If you have any other suggestions let me know
awcodes
awcodes•6mo ago
awcodes
awcodes•6mo ago
but i'm not sure how that would work with colors from the DB could also add styling with negative margins to overcome the padding
Zoltar
ZoltarOP•6mo ago
it might be the simplest solution
awcodes
awcodes•6mo ago
i think that's what i did in Curator for the media grid table.
Zoltar
ZoltarOP•6mo ago
i try this but not working 
return $table
            ->columns([

                Stack::make([
                    
                    TextColumn::make('titolo')
                        //->weight(FontWeight::SemiBold)
                        //->size(TextColumn\TextColumnSize::Large)
                        //->alignCenter(),
                        //->icon('heroicon-m-envelope')
                        //->iconColor('red'),
                        ->searchable(),
                        //->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    
                    
                ])
                /*
                ->extraAttributes(function ($record) {
                    if ($record->id == 21) {
                      return ['style' => 'background-color: red;'];
                    }
                     return [];
                  }),
                */
                /* 
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
                    ->components([
                        //TextColumn::make('titolo'),
                        //TextColumn::make('durata'),
                    ]) 
                */
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc')
            ->recordClasses(fn (Activity $record) => match ($record->id) {
                '21' => 'background-color: red;',
                default => null,
            });
            //->modifyQueryUsing(fn (Builder $query) => $query->published());
return $table
            ->columns([

                Stack::make([
                    
                    TextColumn::make('titolo')
                        //->weight(FontWeight::SemiBold)
                        //->size(TextColumn\TextColumnSize::Large)
                        //->alignCenter(),
                        //->icon('heroicon-m-envelope')
                        //->iconColor('red'),
                        ->searchable(),
                        //->view('filament.employee.resources.activity-resource.pages.col-titolo'),
                    TextColumn::make('testo_copertina')
                        ->limit(100)
                        ->html(),
                    TextColumn::make('durata')
                        ->weight(FontWeight::Light)
                        ->alignRight()
                    
                    
                ])
                /*
                ->extraAttributes(function ($record) {
                    if ($record->id == 21) {
                      return ['style' => 'background-color: red;'];
                    }
                     return [];
                  }),
                */
                /* 
                View::make('filament.employee.resources.activity-resource.pages.grid-activities')
                    ->components([
                        //TextColumn::make('titolo'),
                        //TextColumn::make('durata'),
                    ]) 
                */
            ])
            ->filters([
                //
            ])
            ->contentGrid(['sm' => 2, 'md' => 2, 'xl' => 3])
            ->paginationPageOptions([9, 18, 27])
            ->defaultSort('id', 'desc')
            ->recordClasses(fn (Activity $record) => match ($record->id) {
                '21' => 'background-color: red;',
                default => null,
            });
            //->modifyQueryUsing(fn (Builder $query) => $query->published());
recordClasses not show nothing
awcodes
awcodes•6mo ago
yea, that's what i was getting at, it's going to add a class, not a style.
Zoltar
ZoltarOP•6mo ago
->recordClasses(fn (Model $record) => match ($record->status) i use Model or Modelname?
awcodes
awcodes•6mo ago
either will work. Activity extends Model so, they are the same thing there. id isn't a string here, but this will tell it add a class of 'background-color: red;' to the element, not a style attribute. So you would need a class in your stylesheet to handle the appearance of the class. So, I don't think this is going to work, since your colors are coming from the DB. 
->recordClasses(fn (Activity $record) => match ($record->id) {
    21 => 'background-color: red;',
    default => null,
});
->recordClasses(fn (Activity $record) => match ($record->id) {
    21 => 'background-color: red;',
    default => null,
});
You would have to do everything through the extraAttributes() instead
Zoltar
ZoltarOP•6mo ago
ok i think is the only way thanks
awcodes
awcodes•6mo ago
try this 
->recordClasses('custom-bg-color')

->extraAttributes(function ($record) {
  if ($record->id == 21) {
    return ['style' => '--custom-bg-color: red;'];
  }
   return [];
}),
->recordClasses('custom-bg-color')

->extraAttributes(function ($record) {
  if ($record->id == 21) {
    return ['style' => '--custom-bg-color: red;'];
  }
   return [];
}),
and in a css file 
.custom-bg-color {
  --custom-bg-color: inherit;
  background-color: var(--custom-bg-color);
}
.custom-bg-color {
  --custom-bg-color: inherit;
  background-color: var(--custom-bg-color);
}
Actually, take —custom-bg-color: inherit; and put it in :root {} instead
Solution
Zoltar
Zoltar•6mo ago
->recordClasses(fn (Model $record) => match ($record->id) {
                21 => 'custom-bg-color-black',
                22 => 'custom-bg-color-red',
                23 => 'custom-bg-color-yellow',
                default => null,
            })
->recordClasses(fn (Model $record) => match ($record->id) {
                21 => 'custom-bg-color-black',
                22 => 'custom-bg-color-red',
                23 => 'custom-bg-color-yellow',
                default => null,
            })
Zoltar
ZoltarOP•6mo ago
this work but how to put class in css?
awcodes
awcodes•6mo ago
Zoltar
ZoltarOP•6mo ago
No description
Zoltar
ZoltarOP•6mo ago
recordClasses apply class to column...is the right way
Zoltar
ZoltarOP•6mo ago
ok worked
No description
Want results from more Discord servers?
Add your server