Laravel Splade - Table Component (DataTables auto-fill, search, sorting, pagination, and more!)

hey everybody today i want to show you the next version of laravel's plate that has a new table component i've got a fresh larafell application with splayed so we can start right away what you see here is just the standard laravel splayed home page and in the menu i've added a link to the users page and this page is still empty let me show you the routes file here in the editor you can see the home page the documentation page and now also the user page we've got a user controller and that just returns the index view here you can see the dots that i'm going to replace with the actual table i've seeded the database with 100 users and i will fetch them now from the database so users equal user get and let's dump it for now go back to the browser hit refresh and here are my 100 models so instead of dumping it of course i want to show it in a table so after the view i'm gonna pass in the data which will be a user's key and then i'm gonna use a splat table for the users then i need to define my columns which will be the name the email and a language code then finally we need to render this table so let's go back to our blade view and replace the dots with a splayed table component don't forget the users and let's go to the browser so there it is the table component with the name column the email column and the language code this is all generated automatically so you can see all the models right here and at the bottom what i want to add is some pagination so let's go back to the controller and instead of the get method we're going to use the paginate method let's refresh the browser and now there are only 15 users so i can adjust the pagination and i can go to page 2 for example and now at the top right you can see right here the reset button so this will take me back to the first page now i want to sort the users by their name or maybe by their email address so let's do that the column method takes an additional argument the sortable argument and we're just going to set it to true and this will render sort buttons in the head of the table so after a refresh we've got those little icons next to the header but it doesn't work yet we have to apply it to our query so let's reset the table for now and of course we could build this manually but there's a great package by sparzi called laravel query builder that does this all for you so let's go to the terminal and install this package composer requires party laravel query builder and then we can use this package in our controller so instead of directly paginating the user model we're going to use the query builder class from the package so query builder for the user class and then call paginate on that query builder now we can define a default sort which will be name and then we need to define what columns may be sorted so that will be name and email and then lastly we need to define the default sort on display table as well so again default sort name let's go back to the browser and hit refresh and now the eloquent models are sorted by name so this works great we can sort by name if we click on it it sorts in descending order we can order by email but there's one thing that doesn't work we are now sorting by email but when i go to the second page that sword is lost it's sorted by name again luckily there's an easy fix for this so let's go back to our controller and then after the paginate method we're going to use with query string let's reset the page and sort by email let's go again to page two and now it works now we've got both the page and the sort in the query string all right what i want to show you next is how to add search inputs to the table this will allow us to search by name or by email and this is all quite easy to do with the query builder package so just like allowed sort there's also allowed filters and we gonna give it that same name and email and then in the column method just like the sortable argument there is also a searchable argument now we have this little search icon at the top right and when i click on it i can choose name and then i can start searching for a name for example weber and there it is let's check out if the email field also works let's see maybe ford and that seems to work as well of course you can also combine these two fields but maybe you want to search them at once so search for name and email and we can do that with a global search so let's add it to the table with global search and this will add a search input above the table here it is and we still need to implement this on the query builder site so in the allowed filters method we're going to add a custom global search and sparzi has great documentation on how to implement this but there's also an example in display documentation i'm going to use that one for now so let's grab it and paste it into the controller import the classes and this essentially gives you a way of defining your own search constraints so it loops over the words you type in and then it adds an orwear constraint to the query builder with a wildcard for name and email so let's go back to the browser and let's see if this works go back to our demo application and let's go for ford again and you can see it has found a user with ford in the email address and with ford in the name so this works great now you might have already seen let's reset the table you might have seen this little i button at the top right and with this button you can toggle the columns so for example i can hide the language code or maybe hide the email address and while this is great you might want to always show the name of the user and that's quite easy to do there is a can be hidden argument which we can set to false and then the name toggle will disappear from the drop down so we've got search inputs for the name the email address and a global search but what if we want to filter on language code we could use a select filter for this let's see at the end of my split table code i'm going to add a select filter for the language code and i will give it two options english and dutch and of course we should not forget to add the language code to the allowed filters now when we refresh the page there will be a filter icon at the top left and now i can filter the models based on their language code and of course we can combine this with other search constraints for example i could still use the global search and i could still use the column toggles i could add an additional search constraint or the name well you get the id this all works out of the box let's reset the table and show you another great thing it's very easy to make a row clickable for example if i click on a user i want to navigate to a user's edit page and we can do that with the row link method this takes a callable argument which takes a user model and here you can define the link for each user to save some time i've already built this show user controller so let's import it into a route file users slash user and then the show user controller and let's give it the name of users.show so back in the rolling method let's return that route route users.show with the user back in the browser now each row is clickable so for example if i click on able here we are at the users.showroute let's try another one maybe arch and there is arch now instead of making the whole row clickable you might want to have a separate column for your actions for example to navigate to an edit page i'm gonna remove that rolling method again and replace it with an action column and of course action doesn't exist on the user model so for each row the action column will be empty but here's the cool thing in our blade view in the use dot index blade view we can define how that action cell should be rendered so for this we're going to use the cell directive for the action column and just like the row link method we can use the user model and let's render a link so link to that same show users controller so user slash the user id let's name this link edit and close the tag use the end cell directive to mark the end of this custom cell and you know what let's make this link bold and give it a nice color maybe a nice indigo 600 and here it is now each row has an action column and if we click on it yeah it goes to that same route so it still works let's check out one other user cool the last thing i want to show you is just a little tiny feature we can add a striped attribute to our table and now it has a striped layout so that's it for the table component in the next release we will add form components so thanks for watching and i'll see you soon bye

Channel: Pascal Baljet

Views: 13,135

Keywords: Laravel, PHP, Vue, VueJs, Splade, Blade, Laravel Blade

Id: FPYNvO7GyoM

Length: 11min 11sec (671 seconds)

Published: Fri Aug 19 2022