Customizing Table Cells

Hi sir Good day,How can I customize the padding and spacing in Filament tables cells

10 Replies

I don't think we have an option for that. You'd need to override the cell styles with CSS.

how to override the cell with css?

dissto•4w ago

Here is one quick and dirty approach I am using in a project to make the cell a bit more comapct. Be warned there is plenty of better ways to go about it.

.compact-table .fi-ta-text {
    @apply py-1;
}

.compact-table .fi-ta-cell.px-3.py-4, .compact-table .fi-ta-cell .whitespace-nowrap.px-3.py-4 {
    @apply py-1;
}

.compact-table .fi-ta-text {
    @apply py-1;
}

.compact-table .fi-ta-cell.px-3.py-4, .compact-table .fi-ta-cell .whitespace-nowrap.px-3.py-4 {
    @apply py-1;
}

$table
  ->recordClasses('compact-table')

$table
  ->recordClasses('compact-table')

This covers regular TextColumn and the bulk action selector. 🤪

J3R1CH0•4w ago

not works for me why?

toeknee•4w ago

I think you want: ->extraAttributes(['class' => 'compact-table']) on the table.

LeandroFerreira•4w ago

Did you create a custom theme ?

Themes - Panel Builder - Filament

J3R1CH0•4w ago

yes sir i already create😁

Dennis Koch•4w ago

But app.css is not a Filament theme file

dissto•4w ago

~~Yea extraAttributes is in that case probably better. I just simplified my example because I had way more logic in recordClasses 👍~~ There is no extraAttributes on the $table? 🤔

LeandroFerreira•4w ago

add this in the theme.css

.compact-table .fi-ta-text, .fi-ta-selection-cell div, .fi-ta-actions-cell div, .fi-ta-toggle {
    @apply py-1
}

.compact-table .fi-ta-text, .fi-ta-selection-cell div, .fi-ta-actions-cell div, .fi-ta-toggle {
    @apply py-1
}

add this to the table

public static function table(Table $table): Table
{
    return $table
        ->recordClasses('compact-table')
        ...

public static function table(Table $table): Table
{
    return $table
        ->recordClasses('compact-table')
        ...

run npm run build or dev...

Gaming

Programming

Customizing Table Cells