Building a Datatable with Livewire 3

hi there welcome back to the channel in this video we're going to create a data table using live vir version 3 this is actually something that was requested in one of the previous videos so we're going to build that but did you notice already we suros 1,600 subscribers so thank you very much for that and well let's dive into it here we go all right so I created this larval project beforehand here uh there's nothing much in it at the moment I still need to add Live Wire to it um but I started out with changing the migration for the user I added uh the first name I also added an enim for the gender which includes female male and other um and I also used um a gender variable in the factory to generate a female or a male version um of the first name uh I didn't use something for other you could also do that but the others will also be a female name um I also included the gender that was generated and everything else is the basic Faker thing we're calling upon that in the Cedar we're using U the factory 2,000 times in a create function all right so that's actually it for the moment so we have a database um if I refresh here I should have uh my database here and in the users I have 2,000 users but we will receed this in a moment okay so first of all we're going to install uh laravel Livewire so that's live wire. lal.com and yeah we're going to copy this composure require Live Wire Live Wire so let's head over to warp um I'm quickly going to navigate to the project uh data table demo there we go um um and yeah that's just added so composure require Live Wire Live Wire and that should do the trick right there we go great so now we have live wi installed so we could actually start creating um components right now so to create a component we have done this in the previous video already PHP arent make Livewire and the name of the component that you want to make so let's do that PHP Artisan um make Live Wire and let's call it user list there we go so this created um actually a user list so app Livewire user list PHP resource views Livewire userlist blade. PHP so let's dive into the code here in the app directory um we have a new folder Livewire and this is actually our component code and in resources views Livewire user list we have yeah our blade template for our um yeah for our component okay so to speed up this video I create something beforehand to just copy paste into this here um let me just quickly grab it um there we go here we go all right so let's get rid of this so I have div um uh that actually uh beholds section and and some other things T when CSS does all the tricks here for us um and then uh we have a table right here with a name email gender and I have a table row with name email gender and as well and I also have a per page U togg thing and I also have a search so let's save that and we're going to call our um blade component right into the body of our um application so add Livewire and it's the user list component let's save that and let's refresh great and now I still need to um add Tailwind CSS C CDN so I'll also have this ready to copy paste so let's get rid of this here there we go all right so I didn't prepare a dark mode here so I'm quickly going to disable my dark mode uh dark mode just there we go all right so I have a search bar I have my table head I have one item in my list here and I have my toly for uh 10 items per page 20 or 50 so we're going to get this all up and running and working with Livewire in a bit but first of all we're going to populate the data all right great so let's um start off with populating so in our user list PHP in here I want uh to add an array here with the data that we want to show on the page so let's blow this up a bit um so you can see what I'm doing all right so in here I want uh users so users to be equal to user and let's import that model user there we go um and I want this to be for example all but we don't want that we want to paginate right so let's start off with the paginate um of 10 items all right let's save that and and refresh and I have an error here and what does the error say uh user paginate uh okay and indeed I don't need a semicolon over here so there we go refresh great we can't see anything because we didn't populate our um component blade file so let's dive in here again and actually in here we're going to add for each which takes the users so users as user and instead of name we're going to use user uh let's say name first all right and as a second one we're going to use the first name like that and let's say also email so whoops user email and also for uh the gender we're going to say user uh gender all right let's save that refresh here and now I have one user in here uh and that's because my it's taking the lost one so I need to add this um and put it in between the for each like that save that refresh and now I have 10 um yeah 10 users in my list great so what about the pagination right um we could um make it this ourselves but you know um Live Wire and actually LL has it out of the box so in here uh let's say in this is actually the footer right uh just after this so I want it to take place around here somewhere so um in here we're going to add the user whoops you users oh come on users links and that's a function so refresh and now I have yeah well actually we have the U the links that are provided for us by default in Livewire and LVL so we can easily navigate through them and and so on all right cool now now we can actually paginate through them I want to uh change this dynamically so if I go for 20 I want to see 20 of them all right um how we're going to do this well we're actually going to um create a property that changes throughout the time so if we go to our um user list PHP file again we're going to to add uh a public property so public um let's say per page like that well we're going to give it a capital P and we're going to start off with 10 right so because we started off with 10 also and we're going to use this value into our pagein eight here so per page and we're not going to call this like this we're going to say this who this per page let's save that refresh this is not going to work right um so we have an unexpected public because I forgot semicolon so this is not going to work right now because we don't have the well this isn't properly bound together so what we need to do here we need to change this into our um blades file here we need to tell um blades hey this is a wire component so wire um and it's actually um a model that needs to change so model and it needs to change live so Mo uh sorry uh wire model live and we're going to change the property of uh per page live so whenever this changes we're going to update um the amount of paginated items and we're going to regenerate all this here so well not this but we're going to regenerate the user um variable refresh um and we're going to select 20 boom now we have 20 of them if we select 10 again we have uh well 10 of them so that's the first thing that we made made live with Live Wire great so what about search right so when we want to search we also need a property that changes throughout uh the use of our component so we're also going to create a public um property for that so public and we're going to call it um well just call it search right and to start off this will be an empty um yeah an empty string all right um whenever we're searching um we could uh yeah update our uh query in here but what I like to do I like to do U this with um a scope in our model so we're going to go into user and uh let's say public function scope search and well it's actually the query that will be passed on here so query and let's say we have um uh well it's actually a value so value the value that we're searching upon and we're going to extend the query so where for example the name is like whoops like and in here we're going to like with percentages the value that we're trying to search and I also want to search on first name so orware and I'm quickly going to copy this like that the first name whoops first name like this and I also want an orware for the email so we're searching for name first name and email let's save that and head back to uh the user list and instead of uh writing it all in here we can easily say search because it's the Search scope and we're going to use this search because this is the public property that is going to be changed on our component blade file that we're going to do in just a second let's save that so we're going to search this and oh also Arrow paginate the result of that so into our user list um blade file here we have where is it uh right over here the search we have wire um model model live and something very interesting here we want to change this live but we want to um well whenever we're going to write something it will be live so we want to actually wait until we stop with um typing otherwise we will overload our server with a lot of requests so uh we're going to add a debounce here and I want a debounce of uh let's say 300 milliseconds that's a bit like the standard thing uh that we tend to use at our company so and I want to uh change the public property of search great so let's test this out this should work so we have a wire model live debound of 300 milliseconds for the public property search and in the user list um PHP uh the public property that is passed onto the model function which is actually a scope a scope search which extends the query for the name first name or email to be like the search value that we type all right hope this all works together right so let's refresh here and I made an error uh unexpected blah blah blah and it's somewhere in here okay so uh P I need a semicolon at the end refresh all right so we have Kane here right so I'm going to search for cane Kane all right I have one hit on cane and as you see this works live but with a debounce of 300 millisec so new and I have new will uh something uh let's search my own name Bert so Bert is in Ebert it's also in debert it's in in Berto here in Berta so this actually works right so um let's see I want jird and I have two hits on jailbird it's one in the email and one in the name great so this works next up I want to actually yeah um sort my columns all right so uh to do this we're going to uh do a few things first of all I want to add an a little arrow beside uh the uh yeah the the header here right so next to name email and gender I want arrows and I'm going to use a blade UI kit for this um this is something that is built by um D Fitz and the yeah Kiko is the the guy who made all the yeah artwork so two amazing guys um so we're going to get started here there we go um installation all right we're going to install it so well composer require um blade UI kit blade UI kit so let's over head over to warp um compos require this and I actually want um oh it's search icons that I needed here search icons and I want uh the up Arrow like this but I want this to be in a hero icon so hero icon where where where is hero icon hero hero icon all right so I want this uh this one here here so I also want uh the composure require blade hero icons just to be sure whoops and of course it's composure not composure there we go and then we can just use the component so let's copy this and um well uh we're going to add it right after name here let's save that and head back over here and take a look all right this is way too big right so we're going to add a CLA um this is just standard Tailwind um a width of uh six and a height of uh yeah also six so I have a square um and it's underneath name right now so I need to add Flex um uh item Center I think yeah all right so it's right next to it right now so next thing I want to actually be able to click it and it should sort um ascending and descending right so um let's head over to the user list PHP here and we're going to add a public property again um which will hold the direction of the um sorting that we're going to apply so I'm going to call it sort Direction and I'm going to start off with um ascending all right and whenever we click it I want it to actually um yeah do the Sorting magic so we're going to create a public function for that so and we're going to um call it do sort all right and I wanted to do sort on a specific spefic um column all right on a specific column so that also means that I want to besides the direction I also want to know which column we're sorting uh so uh column and I want to start off with the column Name by default so whenever we click email we're going to sort email whenever we click gender we're going to sort gender when we click name again we're going to sort the name and if you click name again we're going to switch the direction of the Sorting all right so let's open curly braces here um so whenever we click a column we're going to set the um the column that we're sorting to that column so sort column equal to colum like this right all right all right um whenever we click a column we change the Sorting order so we're going to add um a click event on to this also so uh we want to not only click the value but we also just do complete head right so wire um click and we're going to call on every click the do sort function that we just created so do sort and we're going to pass on the name because name is the name of our column that we want to sort we're going to copy this to here like this and we're going to add email in there and also here for the gender all right so whenever we click it we're going to do sort and voila all right so let's add this to our um little query we have over here um so uh like this and order by and we're going to order by the um yeah well the column that we have stored and I don't need um this here so sort sort uh sort column we don't need the dollar sign there we go and we also want the direction by default we will have ascending but we can also already use this this won't work at the moment dynamically but we're going to add it in a bit so Direction all right we don't need Salim col um all right so first thing we notice when we when we refresh um name is already sorted because we start off with default of name and ascending all right if we click email we're going to sort email if we hit gender we sort the gender if we click name again we also so sort uh the name and if I click again nothing happens we're going to change that right um let's also change the direction so whenever we click and the column is already the clicked column we want to actually change the direction so if um and we open curly braces if um this uh sort sort code colum is equal to the column that is clicked um we want to actually um set the uh sort Direction whoops this sorry this sort Direction um to the opposite of what the direction is at the current moment so let's um do this with an an if statement but a shorthand this time um sort Direction like this if it's equal to ascending make it descending if not make it ascending like that and well we don't need this code to run but I also want whenever we change the colod to be ascending again so by default we're going to repeat this and we're going to add an early return here so whenever we click it and it's the same column we switch the direction and we early return if it's not we change the column we set the sort Direction back to ascending and this needs to be this sort direction of course and then yeah well then it's default again so let's refresh here if I click we have descending ascending clicked on email it's default back to ascending descending if I click name again it's again to ascending and I can play around with this however I want so great that's very very nice to have but now I want to change yeah the arrow pointing up and I want to change it to down and if it's not clicked I want to have both of them up and down right so in order to um keep the codee in here a bit clean I'm going to extract this into well it will get heavy and ugly if we add a lot of noise to that because we're going to add some if statements uh to to change all this right okay so first of all I'm going to create a new blade component so in the views here um what you want to do is you add a new folder called components and in here I want um a new file called uh let's say data table item yeah item whoops item. blade. PHP all right and in here I actually start off with a div and I'm going to give it a class of flex item Center because um well simply because this here is going to disappear right just like that and what I want to do is I want to store this in here all right so the strange thing is I want to repeat this so I want to dynamically give the name as a property so I want this to be um for example column name right and in here I want an if statement saying if the um sort column and this is also a property that we're going to um pass on to this component later on column uh sorry column name so if it's not the same I want to um have the uh up and down arrow so up and down and we're going to replace this in a bit um all right if not I want an lse if I want if the sort direction direction like this and this is also something that we're going to pass on if this is uh set to uh ascending uh and let me briefly think here if it's uh also the else and the uh end if oh the end if is already there um if it's ascending then the arrow should be uh down yeah and else it will be up all right so the up is already here so Arrow up like this let's get get rid of this here and down is down and up and down is uh let me quickly take a sneak peek uh p is is it down and no is up and down not down up so up and uh down like this all right so that's it and we're going to pass on everything here so we're going to use an X for the blade component and we called it data table data table item all right and we're closing off with an yeah an u a short hand here and I want the um sort column the sort column to be so I'm using a uh a column sort column equal to the value sort column all right so actually we're passing on the sort column that is in our public property we're going to give it to the component as named value sort column so we can use it in here sort column all right we're going to do the same thing for the direction uh so uh sort Direction all right and without a column to pass on just a simple string is uh colum colum name so the the the col name that we want to use here is name all right let's save that and give it a try all right so it's not working okay let but I can click on it because it's yeah the the name is there and I have a little issue I think uh okay I didn't close this here so let's try again all right so now I have name and if I click it the arrow changes if I click away I have both arrows all right great so let's let's apply this to well if you can see all this if mumbo jumbo here it would be ugly if we have it all here right so let's copy this here and have it over here and also here and just change this to email whoops email and gender all right so so now we have the whole thing working so if I change this to bird I this is also working with bird only 41 results so now that's all wired up um if I click a link here it will actually fail because we didn't tell Livewire that we're using pagination so what we want to do is we want to tell Livewire that we're working with pagination here so we need to also use [Music] with uh pagination like that and let's um import that as well like this and if I refresh here oops okay and if I click now on the links well this still works all right so this works great so but what happens if um we're on the last page right and we change the items per page then we hit something weird um we're actually only having 100 pages instead of 200 and we don't get any results this is just plain ugly the same thing for example we are on page 91 and I search for Bert whoops Bert whoops Bert and I only have 41 results but since I'm on page 91 and we only have three pages this has some weird results so what I actually want is I want to have the um uh yeah the the the page that we're on be reseted to number one so we can actually fix this with something called life cycle hooks um and I'm going to add them uh right after uh well right before our render here so uh live cycle Hooks and that's public function awesome awesome this thing just flipped to 1,610 while we're recording this video great thank you guys let's continue all right so um where were we uh public function yeah public function and a life cycle Hook is actually updated and then the name of the property that is updated so update for example per page uh because our property is per page and it's camel cased per page um and whenever that happens I want this um reset page and reset page is actually something that is inside of the WID pagination it will actually um yeah reset the page that we're on so whenever we are on page five or or 10 or 20 it will reset to one and I'm going to copy this and I'm also going to have this applied with updated search whenever we search we with the life cycle hook of update hits we want to reset the page let's save that refresh here and for example we're on page 93 and I'm going to search for BT I am reset it to Page One how awesome is that so yeah we can change the items per page we can um Step between Pages um we can sort and yeah cool right and actually we're sort I was a little bit confused but we're sorting ascending and descending while we have bird in our search so it is it's actually looking kind of strange but it's it's still working so if I remove this I have a perfectly normal a toz uh sortation all right so that's actually it for this video um I hope you learned something from this uh I love live wire it's an amazing tool so um I will see you in one of the next videos take care bye-bye

Channel: Code with Burt

Views: 10,977

Keywords: Laravel, php, Datatable, Livewire, Livewire3

Id: Z_QQQdNopp4

Length: 35min 21sec (2121 seconds)

Published: Thu Oct 12 2023