Custom Row Classes - How to assign a different background color to each row (Category)
Hello.
I have a resource where the user assigns a special color of his choice (with ColorPicker::make()) and I would like in the list (table) to show every row with that color in the background (opacity 50%). I have tried, but it is not working because it seems that only tailwind predefined classes can be used.
I have used these examples in:
https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes
and changed to:
Any ideas whether this can be possible?
Thank you.
16 Replies
@Albert Lens have you dumped your $record->color value to see what that value is? The way you are using it, it would have to be a hex value, or rgb(....)
nvm, cant be used that way, you are doing a style instead of a class name
so obviously
class="background-color: #fffff" isnt going be validI see. And how could I use that #fffff hex color and use it as the background of the row?
Is there a ->recordCss() function or ->recordHtml() ? to apply those html or css attributes to the rows?
Tks.
personally i dont think color pickers are a good idea as you dont just want any color to be chosen. Remember that you typically want it to work with both dark mode and light mode, then you need your different shades, etc. I think its better to only have X amount of preselected ones. Plus any color can also make your app look awful
Im personally doing something more like this, but you are right, its still a pain unless you have all the color classes already available. Ive been trying to figure out how to use the new Color class, but every component is setup to mainly uses class names, so i dont see how its going to solve those types
You can use Color::hex() and it’ll generate the shades for you.
yes, but thats still just set of rgb values. doesnt help you with all the components that are setup to only accept hex or classes (mostly classes)
Those worthless rgb values work with the css ‘—c-‘ custom properties. In the theme.
Would still need to be able to apply styles though instead of classes for this particular use case.
and every other component from what im seeing. Heck, the ColorColumn requires a hex or rgb value, but you even ahve to go as far as providing rgb(.....), not just the 3 comma separated integers that you get back from Color
have a look at some of the components to see how it works:
then the classes would be something along these lines:
so how does that help @Albert Lens provide custom colors to a method that requires a class name or any other class that requires that? i get that its useful to plugin developers
The output is class names?!
I was just explaining how the colors work.
in the case of a table row though, since there is no way to apply styles to them then you'd have to try to do something at the CSS level and not the PHP level.
@Albert Lens work a try, but have you tried someting like
bg-[#21B8A6] as the returned class name for the row? see if that works statically and if so, then maybe you can dynamically set the hex valueI'll try and feedback. Tks
It does not work. Sorry. Don't worry. I think I will have to change the approach and convince the client to do differently.
@Albert Lens yep, i just realized those still have to be accessed when running builing out the app.css, so since its not in a blade, it wont be seen since its dynamic
I'll make a different approach letting them choose from a list of preconfigured set of colors