Building a Data Table with Laravel Livewire! [TUTORIAL]

hey welcome back to another video in this video i'm going to be showing how to build a data table with layerable live wire level live wire is something that i use pretty frequently for dashboard applications pretty much exclusively for building data tables because it makes building them so much more kind of aligned with the way laravel works i used to use jquery tables and this is much a much nicer way to build data tables uh here's the final product of what i'm going to be building in this video it's it's a table of user records there's 50 of them taken from the database of this project we can search oops so only joe will come up search by name email and id and the search actually works on all three columns at once we can also filter by sorry order by specific columns so right now we're filtering ordering by uh email rather and we can reverse the ordering so it goes in reverse alphabetical order and we can choose how many records to show per page using laravel's built-in pagination so this is the final product here's a starting point to give you an idea here is the fresh level 8 project that i have created the only changes really are using the built-in user seeder to see the database with 50 users and i've created just a basic route with a basic controller that we're going to use to build what we saw in the final product to get started you're going to want to run composer require livewire livewire this is going to install live wire itself after this there's not really any setup steps because these packages are the parts of the package are auto discovered once that's installed in my case it is we now have access to a command called php artisan livewire make and then the name of the actual component you want to build in our case it's users table it says component created it's created an actual users table class and a users-table users-tableblade.php file we can see these by opening them up opening them up here users table and the users table template so the template has nothing in it other than a comment and the component itself only renders that template so right now it's very basic to show you what i've built so far we can go to the web file i have this one slash users route that we see right here it open it goes into the user's controller index method and basically just returns the users.index template which looks like this it's very simple all i've got is just tailwind and a google font that i thought looks good and this is basically the starting point we have from here on when uh when we have live wire installed in a common created all we have to do is basically just include live wire styles right above the closing head tag ideally and live wire script right above the closing body tag and then we can use live livewire's built-in tag to actually render out the component because if we refresh now we've added live wire into the into the template but there's no component being rendered so just to test let's add some text into the component template you can say users table here and if we refresh you can see that that text does not come out but if we use the built-in live wire tag colon and then users table this is the name of the component template save that refresh we can see that users table here actually comes out so at this point we have the component rendering on the page now it's just a matter of actually making the design work so i'm going to cheat a little bit for the purpose of this tutorial it would take too long to build this by hand and it's kind of outside the scope of this tutorial so i'm just going to copy and paste the basic html version of the final product in here this contains no livewire stuff and it only has just some blade file output stuff this actually won't even work because there's we're not looping over the users here we're just outputting users and so the first step to actually make this work is to add a for each users as user and for each saving this i'm going back here we're going to see that we get an error and that's because we're not actually passing this users we're looping over into the template file so this is very similar to passing stuff into blade files from regular controllers we're going to pass in an array into the second parameter of view and we're going to use the key users because that's what we're looping over and here we can pass in pretty much anything we want i'm just going to make a simple query get all users make sure this is imported save that refresh and we have the basic kind of starting point ready to actually build something with live wire as you can see there's no pagination which we'll fix next but it's showing all 50 records and none of this stuff works because it's not connected but we'll get that done in a second so how do we make pagination work well livewire has some issues with um with uh laravel's built-in pagination so they provide a trait i guess called with pagination that we just include at the top of the component here make sure that's imported save it and now instead of all we can just use simple paginate which is just a preference of mine you can use paginate too and let's say get 10 records per page while we refresh and we see 10 records but we don't see the buttons the pagination buttons and that's because in the actual template file we haven't rendered the links out so let's do that users collection arrow links save this file refresh we now have pagination links if i click next we're going to see records 11 to 20 then we'll see 21 to 30 and so on so forth this button will not work after 50 because those records don't exist and pagination officially works but how do we make this work here this is the simplest example i can give you of how livewire's going to handle this if we choose 25 we want 25 records to come up on the page so how do we how do we make that work well for starters we need to actually declare a property a public property we can call it per page let it default to 10 and we could put that in here this arrow per page so now we're paginating over the value in here per page which is defaulted to 10. if we refresh nothing changes because this selector is actually not bound or binded to this property or model i'm not sure what the terminology is with livewire but the way we fix this is by going into the template and finding the selector that actually controls this value and all we have to do this is very simple is just define wire colon model and per page is the name of the model we want to control if we refresh defaults to 10 we can choose 25 and it works we can go to page 2 and it's showing the next 25 after that this link no longer works because there's only 50 records in the table if we want to choose all 50 it'll show 50 and if we choose 100 it'll still show 50 because there's only 50 records so this is exactly what we're looking for and that's how easy it is to to bind stuff so um just including wire coil and model equals per page linked these values to per page here which when changed will change the value put into simple page name very simple um next i think we can actually make search work now that we know the basic example of how this works when we type in here let's say we typed in the col we would want nicole to only come up unless there was another nicole by name or a nicole within the emails here so let's make this work first let's start by declaring a search property and set that to default to an empty string because the search should be empty by default next the way we're going to query this is by creating a search method on the user model this is a little bit tricky if you're not familiar with layervolt but i'll explain it as i go and within search we're going to pass in this arrow search of course this method doesn't actually exist on the user model so we'll build that now right below here public static function search and we're going to accept a search parameter and within here basically we need to test if search is empty because there's going to be times where the search query is actually empty and we don't want the um this method to break if there's no search value so the first thing we're going to do is return we're going to use a ternary operator we're going to check if search is empty if search is empty we're going to return a static query which is just means an empty query we're not going to do anything with the data or search or anything if it's not empty we're going to return a static query with a where an or where and another or where here we're going to query if the id is like the search for those of you wondering if this is going to make us susceptible to sql injection typically i'd say to avoid doing this this way but where and or where actually escape the values so we should be okay so we're going to search if search is like id or if search is like name username and if search is like the email value the reason we use these is because we don't want the string to be strictly matched to the entire name if we type in if someone's name is nicholas and we type in nick we want the record to still come up and it will so if we save this file go back into here our search is uh now it's we're querying with that search method we're passing in the search property value the only thing left to do is actually make sure that this is actually connected to change that search value as we search so the way we do this is what using wire model search exactly as we did below save this refresh and if we type in nicole nicole comes up if we typed in lockman this record should still come up it's not going to be searching on nicole but it will find this email and to give you an example of why we used like if i typed n.a in only this email come up because it is finding this cool so that works great there's just one issue whoops there's just one issue here every time we type a letter in or make a keystroke it's going to query the database and that can get very very expensive the way to get around this is to use in to use livewire's built-in debounce functionality so if we type in debounce here and then specify 300 milliseconds it will only search every 300 milliseconds and so every 300 milliseconds at the absolute maximum is how many queries are going to be made to the database and it still feels fast to the user so that's great and that that should be used on any text field input because arguably um a user will not be changing any of these selectors fast enough to to uh word using this moving on we have the last piece of the puzzle we need to make this work so we want to order by this column and we want to uh order by with the direction chosen here how we do this is by first of all uh declaring the column names within the selector here so if we want to search by id or order by id we use id name email and sign update is just a pretty name for created at and here if we want to sort in ascending or or descending we actually want to declare one or zero so this would denote true or false if we were had a property here let's declare them actually public order by we want this to default to id and public order ascending is equal to true because by default we want to sort in a cen order by an ascending since this accepts a boolean value we need to use 1 and 0 here so that when we end up using wire model order by and wire model order ascending these will actually be passing in as booleans now that we have these set up and the interface will actually update these values we can just pass in an order by here so order by now we'll specify this order by but you'll notice here if you're familiar with the layerable queries order by will not accept a boolean as the order direction and so what we can do here is use this order ascending whoops and if this order ascending is true we want to return ascending if it's false we'll return descending and this eliminates that boolean issue and still doesn't look horrible sometimes these queries get really messy and it's good to refactor now if we refresh the page we can search for records with n in them oops there's a lot of records so ni in them so it'll search in here and in here these are all the records that come up we can sort the emails or sort by emails this is an alphabetical order we can reverse the sort so it's it's in reverse alphabetical and if there was more than 10 records we can change how many come up and use pagination as of right now this is actually the final product it works exactly as expected this code will be in the description below for you to take a look at if you're interested i'm very interested in creating more videos so if you have any idea um on what you'd like to see tailwind level i'm a full stack developer so any career stuff please do let me know i hope you enjoyed it consider subscribing because i will be creating more videos and i hope to see you in the next one thank you

Channel: David Grzyb

Views: 15,401

Keywords: datatables laravel, livewire datatables, datatables tutorial, laravel, livewire, datatables, data tables, datatables tutorial laravel

Id: 3B_BOQcghyA

Length: 16min 3sec (963 seconds)

Published: Sat Oct 17 2020