I am using streams and the core_components table.
Some values in the stream have a flag, which if true, means their row in the table should have different styling
I didn’t see a built-in way to do it, so I added a row_class attr to the table component, like so:
assigns =
with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
assigns
|> assign(row_id: assigns.row_id || fn {id, _item} -> id end)
|> assign(row_class: assigns.row_class || fn {_, _} -> "group hover:bg-zinc-50" end)
end
And this gets passed to the
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class={@row_class && @row_class.(row)}>
I needed it as a function to check the item flag. All in all, it worked, but I then needed to add functionality where if you clicked on any value with the flag, it would flip the flag and the the styling with it. I did that with stream_insert, and it worked perfectly:
But now the issue, I needed to move the position of the item as well with the at: parameter, so I did what the docs say to do and added a stream_delete
before the stream_insert
. Now, the item is moved to the correct position, but the styling no longer updates. If I remove the stream_delete
, the styling is updated correctly, but obviously the position is not:
I am not sure why that would be the case. Here is a gist to test this out, if you remove the stream_delete
you should see that the styling no longer updates: