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
8 Likes

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.

8 Likes

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!

3 Likes

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

2 Likes
3 Likes

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.

5 Likes

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!

2 Likes

Flop Phoenix 0.24 is out. This and the next releases will focus on cleaning up some cruft that was accumulated over the years. The first version didn’t even consider LiveView, and we were all still writing content tags back then. Some early design decisions turned out to be a bit awkward in LiveView years later. On the road to 1.0, I’ll try to get rid of that baggage. The second focus will be to rethink the approach to component customization.

Highlights in 0.24 are new features to facilitate building custom pagination components in case the default pagination component doesn’t fit your use case, as well as some extensive internal refactoring.

Full changelog:

https://hexdocs.pm/flop_phoenix/changelog.html#0-24-0-2025-02-01

12 Likes

It’s awesome to see you grow and maintain this library over the years. Keeping up with Phoenix isn’t the worst thing, but it still requires a sustained effort. Good luck with this next stage in development! :jigsaw:

2 Likes