#148 DataTables without page refresh using Hotwire Turbo Frames

01/11/2023
Free
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

2
Sign in to join the conversation

Current playlist

#59 Hotwire Turbo Streams CRUD #60 Hotwire Turbo Streams Autocomplete Search #63 Hotwire Modals (the right way)
+28
Just enough Hotwire for Rails developers
#1

#59 Hotwire Turbo Streams CRUD

40:56
#2

#60 Hotwire Turbo Streams Autocomplete Search

27:28
#3

#63 Hotwire Modals (the right way)

21:15
#4

#65 Hotwire SPA: Flash Messages

27:34
#5

#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown

34:30
#6

#67 Streams: Infinite Scroll Pagination

18:06
#7

#68 Frames: Infinite Scroll Pagination

17:47
#8

#69 Frames + Streams: Infinite Scroll Pagination (Best approach)

08:40
#9

#70: Hotwire: Live form validations and previews

18:46
#10

#73 Hovercards with Hotwire Turbo Frames

14:03
#11

#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes

52:20
#12

#80 Dynamic Forms with Turbo (not JS approach)

18:23
#13

#81 StimulusJS: Conditionally display form fields based on selected value

08:21
#14

#82 Chained Select Fields in a form. Gem City-State

22:56
#15

#84 Cookies Consent Banner

10:10
#16

#98 Inline editing attributes with Hotwire

14:38
#17

#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

17:26
#18

#100 Browser tab title notifications

16:43
#19

#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts

24:13
#20

#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

13:59
#21

#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire

42:19
#22

#121 Turbo Broadcasts CRUD Demystified

24:20
#23

#143 Turbo Permanent: persist Audio Video and Search results while navigating pages

06:30
#24

#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?

09:17
#25

#148 DataTables without page refresh using Hotwire Turbo Frames

10:59
#26

#151 Advanced Hotwire modals

21:29
#27

#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

20:37
#28

#153 Refactoring Hotwire Modals

10:03
#29

#156 Turbo 8 Morphing in real life

32:58
#30

#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)

06:01
#31

#181 Search and Autocomplete French Company Information

00:00