From 1a0943e259429086beb9ef00af1a32e8ab2bc133 Mon Sep 17 00:00:00 2001 From: Adrian Date: Fri, 19 Jan 2024 17:21:05 +0200 Subject: [PATCH] Conditionally render styled rows --- .../conditionally-render-styled-rows.md | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 docs/3.0/recipes/conditionally-render-styled-rows.md diff --git a/docs/3.0/recipes/conditionally-render-styled-rows.md b/docs/3.0/recipes/conditionally-render-styled-rows.md new file mode 100644 index 00000000..69845792 --- /dev/null +++ b/docs/3.0/recipes/conditionally-render-styled-rows.md @@ -0,0 +1,51 @@ +# Conditionally render styled rows + +We've had [a request](https://discord.com/channels/740892036978442260/1197693313520771113) 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 monke-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. + +## Solution + +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 + +```ruby +def fields + field :id, as: :id, html: -> { + index do + wrapper do + classes do + # We'll mark every record that has an even id + if record.id % 2 == 0 + "soft-deleted" + end + end + end + end + } +end +``` + +#### 2. Target the row that has that child element and style it as you need it + +```css +tr[data-component-name="avo/index/table_row_component"]:has(.soft-deleted){ + background: #fef2f2; +} + +/* you may even target a specific resource by it's name */ +tr[data-component-name="avo/index/table_row_component"][data-resource-name="course_links"]:has(.soft-deleted){ + background: #fef2f2; +} +``` + +Of course I chose a trivial rule like the records that have an even `id` column, but you can tweak that rule as you need it. + +I think there's a lesson or two to be learned from this which I wrote about in [this article](https://avohq.io/blog/state-the-problem-not-the-solution).