Ask A Question

Notifications

You’re not receiving notifications from this thread.

Datatables From Scratch Using Hotwire Discussion

fantastic thanks

Reply

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!

Reply

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?

Reply

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

Reply

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"
Reply

TIL! Thanks!

Reply

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

Reply

@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

Reply

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?' } } %>
Reply

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.

Reply

What rails version / -js build are you using?

Reply

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

Reply

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.

Reply

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.

Reply

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

Reply

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"'

Reply

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.

Reply

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.

Reply

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

Reply

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

Reply

I fixed this by adding data: { turbo_permanent: true } to the search_field

Reply

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

Reply

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.

Reply

I had the same issue, this link cleared it up for me - https://www.lewisyoul.co.uk/posts/breaking-out-of-turbo-frames

Reply

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

@employees = @employees.search(params[: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?

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

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!

Reply

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.

Reply

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? https://mui.com/components/data-grid/

Reply

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.

Reply

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

Reply

Hi Chris, thanks for this episode, my index pages will never be the same.

I notice that on the first load, the sort_link_to helper doesn't know to change the name column's link to sort descending instead of ascending. That requires a user to click the name header twice if they want to sort by name descending. I'm looking for a clean way to make sure the sort_link_to helper knows the default sort column and order on the first page load.

What I have done that does work, but I'm not sure I'm comfortable with, is to have the controller method actually set params[:sort] if params doesn't have that key set already.

Do you have any thoughts on a better way?

Reply
Join the discussion
Create an account Log in

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

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

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