Today it is our job to create our very first LiveView.
Remember our planet's list under /planets?
Hopefully by now your page is a bit styled and you are loading the list of planets from the postgres database.
We do want to make an alternative live version of this page with an additional feature:
- We want the table to be sortable in ASC/DESC order by name and potentially other attributes such as orbital period.
- Sorting should happend when clicking the table column's header.
- A chevron up or down should indicate the current sorting order. Only one column should have it visible at a time. Use the unicode characters ▲ and ▼.
- If a column is already sorted in ascending order, clicking it again should switch the order to descending and vise verse.
The page should be accessible under /live/planets. Don't destroy your existing controller version of the page. I don't recommend using a Generator here as our context already exists and all we have to do is create lib/app_web/live/planets_live.ex.
Also we would like to have the page completely styled using a Flowbite Table styling. It is up to you whether you improve the existing <.table> component under core components (and perhaps outsource them into your UI library) or hardcode the table classes of Flowbite into that particular html table.
To sort planets recall the order_by instruction in our context:
def list_planets(:sorted_by_name) do
from(p in Planet, order_by: p.name)
|> Repo.all()
end
We can also order by in descending order or using multiple columns:
order_by: p.name # asc sorting by default
order_by: {desc: p.name} # sort by name (desc)
order_by: {desc: p.name, asc: p.id} # sort first by name (desc), then id (asc)
You might want to expand your planets context to allow for more variations of sorting planets. Don't do sorting of direct database results in Elixir. Its bad practice and sql is better optimized for that sort of thing.
Bonus Objective
If you are feeling ambitious you can try to implement a live form with a search box. Writing a partial string of a planet name in that field should filter the list of planets by that name. There are no points for this but it is an interesting, challenging and frequently occuring problem to tackle!
Possible Result
Here is how my live view ended up looking:
