Creating a datatable with Laravel and InertiaJS

data tables are one of the most common components found in web applications no matter what the app does there's probably a data table somewhere used to display and filter some kind of records in this video we'll see how we can create one with laravel and the inertia.js as a starting point we have a contacts route that calls the index action on the contacts controller the action then paginates the records and renders the contacts view component in the view component we receive the contacts object as a prop and then we are using it to loop through the data and display the rows scrolling down we also have a pagination component that renders the pagination links all of that translates to this nice table what i want to do is to be able to sort the records by specific columns as well as using this search box we have here so let's start the first thing i'm going to do is to set up a v model for the search field so data return and since i know we'll have other parameters to send i'll group them under params objects so params search and the default value will be null let's set up the v model and then the next step is to set up a watcher that calls the contacts endpoint whenever the params change so we'll have params handler and set deep to true inside the handler we'll call the contacts endpoint using inertia passing the parameters and the following image options if we go back in the browser refresh and type in a search term we see that we are sending the search parameter to the server let's go inside the controller and update our query to make use of it and we'll have query equals contact query and if we receive a search term so if request search we'll apply the following where clause finally we need to replace contact with our new query if we go back in the browser and try the search again so let's say roxanne it surely works let's move on to making some of these columns sortable we can do that by passing two additional query parameters one parameter to specify the field and another one to specify the direction we want to sort the records so we'll have field and direction the next step is to add a method that changes the field we want to sort by and toggle the direction from ascending to descending so we'll have methods sort will pass the field name we'll update the params so this params.field equals the field we pass in and we'll toggle the direction so if this params direction equals equals ascending we'll set it to descending otherwise it will be ascending what we need to do now is to call this sort method whenever the user clicks on one of the fields we want to sort by so let's say we want to sort by name and city and click sort we'll pass the name the field and do the same for the city so what should happen now is whenever we click on name the sort method will be called which will update our params object and since we have a watcher setup it will cause this handler method to execute and send an inertia request to the server that will update our table with new data let's go in the browser refresh click the name field we can see the link changing so it works what we need to do now is to go inside our contacts controller and use the field and direction params to sort the records here we can say something like if request has field and direction query order by we pass in the field so request field and the direction request direction and this should work so let's say refresh and here it is we are filtering by the city and then by the name however there's a small problem we need to validate these parameters otherwise this happens or this and that's not good so let's set up some validation rules we can say request validate and we'll have direction which needs to be either ascending or descending and field needs to be city or let's say name or city now if we try to do the same it will simply redirect back let's also add some icons to highlight the direction we're sorting i'll paste in some svgs and save if params.field equals equals name and params that direction equals equals ascending we'll do the same thing for the descending except it will be disk here refresh the browser click on the name and here it is let's align the icons and we can do so with class inline flakes with full justify between and let's also grab the padding refresh again and here it is let's grab these and do the same for the city just say city as well here remove the padding and refresh the browser and here it is finally we have two more problems to solve if i type in charlie copy and paste this link in another tab the page loads the records are filtered but there is no search term here and also the icon is hidden the reason for that is that our component doesn't really know what filters we have applied we can fix that by sending the filters from our controller to our view component and set the initial value for the parameters so we can go to context controller and here we can save filters and request all and pass in the keys search field and direction now back to our component we need to define these filters and here we can set the initial value so this filters dot search this filters dot field and this filters that direction now if we go back in the browser and refresh we have charlie here and the direction here so let's say loop change the sorting direction and here it is loop and the direction the other problem is that if i delete the search string the search parameter still appears in the url and that's a bit awkward we can remove it here in the handler we can do let params equals this params and what we need to do now is to map through the object keys and delete those keys that are empty we can do that like so object.keys this will give us the keys of the object for each key and then if the key is empty we delete it and of course we need to pass in this new params object go back in the browser and refresh search for angela and if we delete the query string the search parameter is removed of course there's a more elegant way of doing this and that is by using lodash's pick by method and this does basically the same thing remove all this go back in the browser refresh type in a search term delete and the field is removed finally it would be a good idea to throttle our requests to avoid sending too many of them and we can do that with low dash as well throttle import passing function and let's say 150 milliseconds go back refresh everything is still working and that's how you can create a data table using larval and inertia.js if you enjoyed the video don't forget to like it subscribe click the bell button and all that stuff bye

Channel: Constantin Druc

Views: 6,922

Keywords: laravel, datatable, inertiajs, vue

Id: 8vBw_QmKf3c

Length: 10min 58sec (658 seconds)

Published: Sun Apr 25 2021

Reddit Comments

[u/lutovacnc]

Delightful. So gorgeous.

[u/iscottjs]

I’m actually just about to start building my own data tables and was just starting to research different ways to do it.

This couldn’t be better timing! Thanks :)

[u/Coclav]

This channel is a treasure trove!

[u/alabgn9]

Your content is so great man, i'm glad i discovered your channel, keep it up!