#148 DataTables without page refresh using Hotwire Turbo Frames

hotwire turbo frames datatables

In the previous episode we added Search, Sort, and Pagination to a data table.
Turbo Frames will help us make it work WITHOUT PAGE REFRESH!
However we will have to solve some potential problems (page refresh, URL, update, redirects).

Episode source code: https://github.com/corsego/147-datatables-ransack-pagy-search-sort-paginate/commit/8f4ed9a855cc626a8e71a428cbae714f82daf98b
Based on this blogpost: https://blog.corsego.com/turbo-hotwire-custom-search-without-page-refresh

0:00 initial state of data tables, search, pagination
1:50 search without page refresh
4:10 search as you type (without clicking submit)
4:36 update URL as you search (turbo-action advance)
5:25 autosubmit after selecting in a dropdown (without clicking submit)
6:09 update URL as you sort
6:55 break out of turbo frame
9:22 clean up and summary

Sign in to join the conversation