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?
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.
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.
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.
I had the same issue, this link cleared it up for me - https://www.lewisyoul.co.uk/posts/breaking-out-of-turbo-frames
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?
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? https://mui.com/components/data-grid/
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
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?