Let's Build with Hotwire and Rails - Quick Data Filtering

Welcome to another edition of my Hotwire and Rails series, where I take you through a journey of creating old conventions that used to require JavaScript and bringing them to life using Hotwire and Rails.

This guide is a simple one aimed at showing foundational principles for using Hotwire. We'll build a simple database of quotes from the movie Dumb and Dumber and present simple filters to cycle through that data.

The filters toggle the order of different types of data related to a Quote model and then, upon click, will instantly sort themselves in ascending or descending fashion.

It's important to note that this functionality is completely possible with legacy Rails applications. Still, the main difference lies in the request cycle when a user might click a sortable link.

Additionally, we can now embed forms that render in place to edit specific quotes on the fly.

Hotwire brings us a lot of power which is very exciting to see as you begin to construct applications that used to take loads of JavaScript, JSON, and third-party libraries to get the job done.

Hi, I am Andy Leverenz, and I am a product designer and developer. For fun, I design, code, and write. Check out my blog, Web-Crunch https://web-crunch.com, where I publish design and development tutorials with the occasional vlog.

🎨 Check out my latest project: Rails UI https://railsui.com

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/hotwire-and-rails-data-filtering

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=ThDpy4c0GdI