Save 36% for Black Friday! Learn more

All threads / Datatables From Scratch Using Hotwire Discussion
Ask A Question


You’re not receiving notifications from this thread.

Datatables From Scratch Using Hotwire Discussion


Wow this is awesome! I was just searching yesterday trying to find a datatables alternative. This is great! Would love to see the csv, excel, pdf download buttons worked in. You should package this up as a gem or something!


Great, I'm currently working on a complex datatable and this is a great inspiration.
Any idea on how to implement a multi column sort?


Hi chris, so the ajax is deprecaated?
thanks for advance


presence_in can be nice to quiet down those ternaries and avoid the double params[:sort] which makes the line busy:

params[:sort].presence_in(%w{ name position office age start_date }) || "name"

This was a really good episode, lots of great info for making my searches more streamlined. Thanks!


@Chris, did you have some example for data-turbo-confirm, I still don't know how to use it. I tried to add in destroy method: turbo_stream.remove @project , but still the pop up doesn't show. I'm using rails 7rc3. thanks in advance

I just used it for the first time yesterday on a button_to.

<%= button_to 'Delete', @resource, method: :delete, form: { data: { turbo_confirm: 'Are you sure?' } } %>

not sure why is not working with me. I tried also button_to, and the same approach you did, form: {data: {turbo_confirm: "test"}} but does not work. I did not see any error in inspect. weird.

What rails version / -js build are you using?

I'm using rails 7.0.0.alpha2, and gem "jsbundling-rails", "~> 0.1.0"


How do you get Pagy to update the URL bar and history etc? I tried applying link_extra: 'data-turbo-frame="employees" data-turbo-action="advance"' to pagy but that doesn't work.


Chris, I second @Dan Tappin's question.

By the way, have you tried navigating back and forwards using the browser button? The results appear correctly, but they go out of sync with the form's inputs.


Chris, how would you implement a "loading" indicator in the form while the request is on the fly?


In case you also want to add the current page to the url you can add this link_extra part to the pagy line in the employees controller:
@pagy, @employees = pagy @employees.reorder(sort_column => sort_direction), items: params.fetch(:count, 10), link_extra: 'data-turbo-frame="listings" data-turbo-action="advance"'


Not sure what changed - as I type turbo is updating the results and then the search field loses focus as I type and I lose the odd key stroke.

Hmmm - very weird. I managed to add a second turbo frame like this: data: { turbo_frame: "employees employees_index", turbo_action: "advance" }. I suspect I was thinking this was a stimulus target etc. Removed the second frame and it's back to normal. Interesting that turbo still worked.

Suddenly, I'm having the same issue, I'm not sure why. It was normal until last week.

Did you guys ever solve this problem? I'm having the same issue.


anyone know how to add autocomplete search feature in the search box?


When I added a link_to on the records to link to the show page, clicking on that link simply blanks the results out and doesn't display the show page. I had to add a data: { tube: false } to clear the page which isn't ideal. Any idea what might be happening? The tutorial removed the link to the individual records so I wasn't able to use it as an example.


Say I wanted to add multiple separate search scopes instead of just one. For example

@employees =[:query]) if params[:query].present?
@employees = @employees.start_date(params[:start_date]) if params[:start_date].present?
@employees = @employees.created_at(params[:created_at]) if params[:created_at].present?

How could I simplify and clean up this logic? Is there a way to iterate through these?

param, value = { search: params[:query], start_date: params[:start_date], created_at: params[:created_at] }.compact.first
@employees = @employees.send(param, value)

Hello all. I'm curious...the tutorial uses divs instead of a table. Is there a reason for this? I have it working very well, but now am working to style it, and most of the tailwind examples I see for datagrids are using tables instead of divs.

As a backend developer, it would really help me to understand why divs were used in this case, and if there's an advantage to sticking with them. Thanks in advance!

Tables are very strict in their layout and so you can't do certain things like make a clickable row. That's why divs are more useful often times.

Thanks for your response Chris! Have you seen any guides/tutorials re: how to style a set of divs with Tailwind to look as robust as the commercial grid shown here?

I felt the same way at first then realized (as Chris mentioned) the table html is very restrictive. I have div tables that look like tables on the desktop and then switch to a 'card' like view on mobile. You could never do that with a standard table. For example my tr class is:

grid grid-cols-3 block border border-gray-200 md:border-0 md:table-row md:table-row p-3 md:p-10 space-y-0 md:space-y-3 hover:bg-gray-100 bg-white rounded

BY default on mobile I get a business card looking record then the md breakpoints switch to a div table on larger screens.


Great episode, thanks! I added this information to the piggy bank of my experience,) it inspired me

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 67,819+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.