Flop.Phoenix - UI components for pagination, filter forms and sortable tables

Phoenix components for pagination, sortable tables and filter forms with Flop and (optionally) Ecto.

  • pagination
  • cursor pagination
  • sortable tables
  • filter forms

Flop.Phoenix 0.18.0 was released. Apart from some under-the-hood updates, the main change is the updated filter_fields component, which now produces the Phoenix.HTML.FormField struct introduced in Phoenix.HTML 3.3.0.

This release deprecates Flop.Phoenix.pop_filter/2 in favor of the updated Flop.Filter.pop/3 function, which will be released with Flop 0.20.0 soon.


Just wanted to drop a line and say the new <filter_fields .../> works great, and integrates nicely with the new phoenix 1.7 <.input .../>. Thanks for the short “how to upgrade” section in the changelog. Keep it up!


Small update adding support for LiveView streams to the table component.


Flop Phoenix 0.20 introduces on_paginate and on_sort attributes for executing JS commands during pagination or table column sorting. This can be used for scrolling the top of the table into view when paginating, for example. An example for exactly that use case can be found in the documentation.

It’s also possible to dynamically set row and cell attributes depending on the current row item now.


Awesome, thanks for this! Nice and clean unlike my current kludgey solution.

1 Like

Hehehe same here.

I will move to this library ASAP and I hope I’ll be able to contribute back

Thanks @woylie !

1 Like

I actually just meant the stuff in the latest update :sweat_smile: But yes, it’s a very nice lib. Recommended!

1 Like