Is There A Built-In Way To Modify Table Headings?

Phoenix Forum Questions / Help
,
1

I’m trying to work up a LiveView app to display a rather large table of data. One thing I wanted to do is to add the functionality to sort by columns. I’m thinking of adding an up/down arrow next to each header cell. I mention this specifically because I’m by no means good with UI so if there’s another approach, please feel free to mention it to me.

I’m using the <.table> functional component and I can see the definition in core_components.ex I was trying to figure out if there’s some built-in functionality to allow me to modify the column headers.

I’m working on 1.15.6-otp-26 (although I doubt that a newer version would help in this case).

2

I see @codeanpeace typing and saw him typing a couple of minutes ago so I assume he has a little more to say than: “Just use Flop and Flop Phoenix” which would be my advice :slight_smile:

3

One of the nice things about the core components approach is that they’re meant to be modified and extended! So in this case, you can add those up/down sort arrows within the <th :for={...} ...> aka the table header element in the <.table> component.

There are also libraries such as flop phoenix that can help you paginate, sort, and filter data as well.
^ @sodapopcan Hahah, I had just typed this when I saw your post :sweat_smile:

Also, this comes up fairly often around here so search is your friend: Search results for ‘table sort liveview’ - Elixir Programming Language Forum

1 Like
4

You can borrow some UI/UX ideas from DataTables, as it is a mature and established project.
As for implementation, Building Table Views with Phoenix LiveView will help you cover most of your needs.

5

Thanks all of you for the suggestions! Very helpful!

I sort of guessed I’d probably need to modify the core component (or create my own component) but I thought perhaps I was missing some built-in extension mechanism which is why I was asking!