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.

J3R1CH0OP•3mo ago

how to override the cell with css?

dissto•3mo 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. 🤪

J3R1CH0OP•3mo ago

not works for me why?

toeknee•3mo ago

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

LeandroFerreira•3mo ago

Did you create a custom theme ?

Themes - Panel Builder - Filament

J3R1CH0OP•3mo ago

yes sir i already create😁

Dennis Koch•3mo ago

But app.css is not a Filament theme file

dissto•3mo 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•3mo 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