/phoenix_live_view_tablefilter

Table Filter with Phoenix LiveView

Primary LanguageElixir

Demo with a Table Filter

  • Select Columns to be visible on the table (Part 1)
  • Filter Columns with dropdown list (Part 2)
  • Search Columns with >,>=,<,<= for numbers and query for strings (Part 3 in the next days)
  • Sort by column

To start your Phoenix server:

  • Add {:filtrex, "~> 0.4.3"} in your mix.exs file in the deps
  • Install dependencies with mix deps.get
  • Create and migrate your database with mix ecto.create && mix ecto.migrate
  • Install Node.js dependencies with cd assets && npm install && cd ..
  • Import Data (test data in a CSV file in the data folder) or use the data from your tables
  • Start Phoenix endpoint with mix phx.server

To use your data from your tables:

  • Add in your context file the following functions from lib/demo/companies/companies.ex:
    • filter_config - more information for this function on Filtrex
    • filter_yourtable (from filter_customers)
  • Update the functions in lib/demo_web/live/filtrex.ex:
    • get_filter_list, get_search_list, get_cols
    • get_rows, get_filter_rows
    • replace form value in the function mount

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Learn more