table custom css

Hello, It is possible to apply a custom style to a Filament table?

->extraAttributes(['class' => 'my-width-class']) is the way?

->extraAttributes(['class' => 'my-width-class']) is the way?

16 Replies

LeandroFerreira•6mo ago

Yes, create a custom theme https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme https://filamentphp.com/docs/3.x/support/style-customization#common-hook-class-abbreviations

Themes - Panel Builder - Filament

Style customization - Core Concepts - Filament

ZoltarOP•6mo ago

mmm sorry not understand. I have grid table like in attachment, and need not show the round border around the column

LeandroFerreira•6mo ago

if you add my-width-class via extraAttributes, you need to add this class in the custom theme css file

ZoltarOP•6mo ago

ok all clear!!!! But i cant use extraAttributes for entire table but only for column, what should i use for entire table?

LeandroFerreira•6mo ago

fi-ta is used to represent classes used in the Table Builder package inspect the element in your browser and override what you need

ZoltarOP•6mo ago

I don't have to apply the CSS class to all tables but only to a specific table In detail, I am creating a page with a grid table that simulates a product catalog and I wanted to customize this grid, the other tables is ok

LeandroFerreira•6mo ago

maybe overriding this view: https://filamentphp.com/docs/3.x/panels/resources/listing-records#custom-list-page-view. or creating a div on this page outside the table using render hooks.

Listing records - Panel Builder - Filament

ZoltarOP•6mo ago

OK I'll try. thnks mate i create a custom view in listing record

protected static string $view = 'filament.employee.resources.activity-resource.pages.list-activities';

protected static string $view = 'filament.employee.resources.activity-resource.pages.list-activities';

and add this code in view

<x-filament-panels::page
    @class([
        'fi-resource-list-records-page',
        'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
    ])
>
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE, scopes: $this->getRenderHookScopes()) }}

        <div class='custom-table'>
            {{ $this->table }}
        </div>

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER, scopes: $this->getRenderHookScopes()) }}
    </div>
</x-filament-panels::page>

<x-filament-panels::page
    @class([
        'fi-resource-list-records-page',
        'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
    ])
>
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE, scopes: $this->getRenderHookScopes()) }}

        <div class='custom-table'>
            {{ $this->table }}
        </div>

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER, scopes: $this->getRenderHookScopes()) }}
    </div>
</x-filament-panels::page>

but the div 'custom-table' is behind the table this is the result...try to add background yellow

ZoltarOP•6mo ago

awcodes•6mo ago

So it worked. Look at the corners, they are yellow. The reason the whole thing isn’t yellow is because the other elements have a background set to white.

LeandroFerreira•6mo ago

https://tenor.com/view/tiny-text-cant-see-ken-jeong-gif-5957945

Tenor

LeandroFerreira•6mo ago

Your vision is really good, @awcodes 😅

ZoltarOP•6mo ago

Eheheheheh the code works...but not work for my problem, change background color of table or in general customize css of table use custom view of list record is not the right way

awcodes•6mo ago

Is this the only table on the page?

ZoltarOP•6mo ago

yes I'm trying to create everything custom without using resources like this example https://demo-learning-management-system.filamentexamples.com/ but I don't know if it's the best way

awcodes•6mo ago

I would think the page would have a class name on the body or page wrapper element that has the page name. Should be able to use that.

Gaming

Programming

table custom css