Filament•12mo ago

table header bg color

When create a table in Livewire component, and display it as {{ $this->table }}, how do i change table header background color? Currently is set to some shade of gray when i display it, and cant find the way to change it to other color.

Solution:

Just wrap your table with a css class or id then?

Jump to solution

5 Replies

VladimirOP•12mo ago

ok so the only way i found this to work is to manually add styles in blade file. Is there a better way?

awcodes•12mo ago

The better way is to use css.

VladimirOP•12mo ago

@awcodes is this what you mean?

<section class="flex flex-col">
    <div class="relative overflow-x-auto rounded-lg w-full">
        {{ $this->table }}
    </div>
</section>
@push('styles')
    <style>
        .fi-ta-table > thead {
            background-color: #15803d;
        }
        .fi-ta-header-cell-label {
            color:white;
        }
        .fi-ta-header-cell-sort-icon {
            color:white;
        }
        .fi-ta-ctn{
            background: transparent;
        }
    </style>
@endpush

<section class="flex flex-col">
    <div class="relative overflow-x-auto rounded-lg w-full">
        {{ $this->table }}
    </div>
</section>
@push('styles')
    <style>
        .fi-ta-table > thead {
            background-color: #15803d;
        }
        .fi-ta-header-cell-label {
            color:white;
        }
        .fi-ta-header-cell-sort-icon {
            color:white;
        }
        .fi-ta-ctn{
            background: transparent;
        }
    </style>
@endpush

If so , here is a challenge i am strugling to solve: Example: I have a same table that looks pretty much same, except that colors in tables are different. There is table showing jobs, and another showing applicants, and by design, first one is in green shades, and second one in orange shades. On the page, i shall display them both, so when i apply css on one, as in example, it overwrite another one. Is there a way to give ID to a table using Table Builder> Or the class?

LeandroFerreira•12mo ago

if you are using the table builder, you should add in the app.css https://filamentphp.com/docs/3.x/tables/installation#configuring-styles if you are using the panel builder, check this https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Installation - Table Builder - Filament

Solution

Dennis Koch•12mo ago

Just wrap your table with a css class or id then?

Gaming

Programming

table header bg color