Table Filter with Phoenix LiveView

Part 1 : Select columns to show on a table

Part 2 : How to filter columns with dropdown lists

Part 3 : How to search columns with >,≥,<,≤ for numbers and query for strings

Part 1: Select columns to show on a table

Phoenix LiveView is so great to develop interactive apps without writing any Javascript. It has been almost a month since I bough the book Programming Phoenix 1.4 and I really enjoyed learning Elixir, Phoenix and developing using this awesome framework.

Phoenix LiveView really convinced me to learn Elixir and Phoenix, I was going to learn React with React Hooks and when I saw that it was possible to develop real-time apps with Phoenix LiveView without writing any Javascript, my dream became true. I didn’t need anymore to use a Javascript framework to develop interactive and real-time web apps.

I almost finished to migrate a small PHP app to Phoenix and it is such a great experience. For another app I am using https://www.tablefilter.com/ a table filter Javascript library to give users the ability to search by column and filter data in tables.

And I tried to have some of these features in my new Phoenix app using LiveView without writing any Javascript. Sorry, I might repeat several times “without writing any Javascript” but this is so awesome that I have to repeat it.

Here is the LiveView template to show only the columns that are checked :

LiveView Template with checkboxes to show columns

cols is a list of tuples containing { col, col_title } , the list of the columns that are visible in the table. First I tried to use a map but I had to use a list to keep the order of the columns.

show_cols is a map containing the columns for the keys and the values are boolean in strings and you can guess that if the value for a column is “true” , the column is visible and when it is “false” the column is not visible. We use the function String.to_existing_atom to convert the strings “true” or “false” to the booleans true or false. This map show_cols is set using the cols list : Enum.map(cols, fn {col,_} -> {col,”true”} end) |> Enum.into(%{})

There is a function checked?(value) that returns an empty string or “checked” if value is “true”.

In the mount function, we assign to the socket the list cols and the map show_cols.

Then when a checkbox is checked or unchecked, it triggers the event “show_cols” and the param checked_cols received in the function handle_event is a map containing all the columns for the keys with the values “true” or “false” for checked or unchecked checkboxes. We have an <input … type=”hidden” value=”false”> for each column to send a “false” value for the unchecked columns.

So we just need to assign checked_cols to show_cols in the socket. And Phoenix LiveView applies his magic to render the table with only the columns that are checked and all of this without writing any Javascript. This is SO awesome.

In the next parts we will see how we can add filters to columns with dropdown lists and how we can search data in the columns.

You can find the full Phoenix code on github. Please post a comment if you have any questions or any suggestions on my code.

Part 2 : How to filter columns with dropdown lists