fbutano
Hi all, I’m trying to maintain a consistent UI by using the standard Core Components <.table> generated by Phoenix (with DaisyUI styling), but I also want to integrate Flop sorting into the headers. At the same time, I’m using LiveView streams (phx-update=“stream”) to update only the table body.
Requirements:
1. Use Flop for sorting, so each header becomes clickable and triggers /admin/users?order_by=email&…
2. Keep the Core Components <.table>, without rewriting the whole table manually.
3. Keep using LiveView streams for the rows so updates are efficient and smooth.
I’ve tried:
• Using <Flop.Phoenix.sort_link> inside label={…}, but that doesn’t work because label expects a string.
• Adding slots like <:label>, but <.table> doesn’t support that.
• Using Flop.Phoenix.table, which supports sorting but does not support phx-update=“stream”, so it doesn’t play nicely with the Core Components setup.
⸻
Question:
Has anyone found a clean way to integrate Flop sorting into the Core Components <.table> while still leveraging LiveView streams for the table body—without having to rebuild the table manually?
If you’ve come across a pattern or a component wrapper that does exactly this, I’d love to see it!
Thanks in advance.
Trending in Questions
Other Trending Topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex










First 3 of 3 Posts
woylie
Flop.Phoenix.tablesupports streams, there’s an example in the readme: LiveView streams.phx-update="stream"is set automatically when a stream is passed to the component. The implementation is very close to the table implementation fromCoreComponents.fbutano
Thanks a lot for your quick reply, and congratulations on the amazing work you’ve done with this library — it’s a great piece of work!
I’ll definitely give this approach a try with Flop.Phoenix.table and streams. My original question was more about whether there’s a way to somehow inject the sorting into the original Core Components <.table> component, but I’ll try your solution anyway.
One extra question: do you see any drawbacks in replacing <.table> with Flop.Phoenix.table> entirely in a project that uses Core Components everywhere?
Thanks again!
woylie
I’m using the Flop table for most use cases throughout all projects I’m working on. I still have a
simple_tablecomponent inCoreComponentsfor cases where I don’t need pagination, filtering, or sorting. Both components are interchangeable, with the exception of the requiredFlop.Metastruct.