Skip to content

Conditionally render styled rows

We've had a request come in from a customer to style their soft-deleted records differently than the regular ones.

Their first idea was to add a new option to Avo to enable that. They even tried to monkey-patch our code to achieve that. It's a "fair" strategy; we're not judging.

Our impression was to add a new option, too, but in the end, we found a better solution. Something that doesn't involve monkey-patching or us adding new code to the framework. New code that we should maintain in the future and bring on more and more requests.


The solution came to me a little while after the request came over, and it's so simple!

Use the has CSS selector.

1. Attach a CSS class to the id field of the records you want to mark

def fields
  field :id, as: :id, html: -> {
    index do
      wrapper do
        classes do
          # We'll mark every record that has an even `id`
          if % 2 == 0

2. Target the row that has that child element and style it as you need it

  background: #fef2f2;

/* you may even target a specific resource by it's name */
  background: #fef2f2;

Of course, I chose a trivial rule like the records with an even id column, but you can tweak that rule as needed.

I think there's a lesson or two to be learned from this, which I wrote about in this article.