Filament•17mo ago

How to change style of card when arranged to grid?

I am using the getTableContentGrid() described in the documentation to arrange my table content in a grid as cards. I also removed the background of the table by overwriting the filament table css like this which works fine:

.filament-tables-container {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
}

.filament-tables-container {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
}

Now I would like to change the background color of the cards to white (see screenshot but unfortunately the card does not have a css class attached to it which i could overwrite. How could I change the background color and the hover background color of the cards only on this table component?

Solution:

Thanks @pboivin . Below is what I ended for white cards on a blank background and also all the gray background on the filter and sort elements removed. Maybe it helps someone. I will create a PR soon to add the classes which should make this easier. ``` .filament-tables-container { background: none !important; border: none !important;...

Jump to solution

7 Replies

Patrick Boivin•17mo ago

I think this is the best you can do for now:

.filament-tables-table-container > div.grid > div {
    //
}

.filament-tables-table-container > div.grid > div {
    //
}

If you have some time though, I would encourage you to send a small PR to add the classes you want. I'm certain others will find them useful.

Solution

Sesh•17mo ago

        .filament-tables-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-pagination-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-header-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-table-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-table-container>div.flex {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Style for the card */
        .filament-tables-table-container>div.grid>div>div {
            background: white !important;
            border-radius: 0.5rem !important;

        }

        .filament-tables-table-container>div.grid>div>div:hover {
            background: #f9fafb !important;
        }

        .filament-tables-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-pagination-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-header-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-table-container {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .filament-tables-table-container>div.flex {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Style for the card */
        .filament-tables-table-container>div.grid>div>div {
            background: white !important;
            border-radius: 0.5rem !important;

        }

        .filament-tables-table-container>div.grid>div>div:hover {
            background: #f9fafb !important;
        }

binaryfire•13mo ago

Hey @Sascha. Did you find a way of solving this in v3 without affecting all tables? I'd like to do something similar, but just for specific pages. If I override fi-ta-ctn in my theme all my tables are affected. And unfortunately there's no ->extraAttributes method on the table component

SeshOP•13mo ago

Just override it on the respective page in a <style></style> tag, thats what I did

binaryfire•13mo ago

Is that possible in panel resource pages? I guess I could create a custom view but I was hoping to avoid that

SeshOP•13mo ago

Ah no sorry it was in a standalone component, but I am sure there must be a way to injest custom css to a ressource page

binaryfire•13mo ago

No worries, thanks. I just ended up creating a custom view 🙂

Gaming

Programming

How to change style of card when arranged to grid?