Building a Data Table with Laravel Livewire! [TUTORIAL]

[@DavidGrzyb]

🚀 Dive into Laravel with my FREE 12-part email course! Perfect for beginners and tailored from years of experience - this is the guide I WISHED I had when starting out. 🔗 Enroll now: davidgrzyb.com/intro-to-laravel/ ✨

[@grzesiekb9142]

Dzięki Dawid. Jesteś pierwszą osobą z naszego pięknego kraju, która potrafi przekazywać wiedzę w necie (pierwszą, którą spotkałem). Do tej pory większość kursów prowadzonych przez naszych rodaków wołała o pomstę do nieba - nie dało się tego słuchać a już nauczyć się czegokolwiek... tragedia. Przywróciłeś mi wiarę w "swoich". Póki co obejrzałem tylko ten jeden film i sposób prowadzenia tego "kursu" to absolutny TOP. Dziękuję.

[@canada_calling]

Hey. I have been watching your videos recently and find them to be very informative. I am an OLD school PHP guy now doing the Laravel thing with more vanilla ES6. Your delivery is great and the instructions are very clear. I'm not sure what other comments you have received since I mainly watch on appleTV and can't see them but I hope the community appreciates your efforts. Keep up the good work!

[@DavidGrzyb]

Thank you! I really appreciate the kind words 😁

[@Dev_Jet]

Great tutorial! Direct to the point and concise explanation. Please do more videos about or related to the Laravel 🙏

[@jimburns7549]

Excellent work David! Lucid and straightforward explanation. Learnable pace.

[@amrdiab857]

Informative, clear, and to the point! that's what I like to watch. Would love more laravel content from you. You have earned a new subscriber!

[@clawesable2176]

Great tutorial. Well explained. Could you demonstrate how to add action buttons (Edit/Delete) to the datatable?

[@laplaces-demon]

Thank you. This was easy to follow and understand.

[@clawesable2176]

David, great tutorial. I was wondering if you can do a video on multi-step forms. Thanks.

[@spyrosaba]

Very nice and useful example. How could you use this to do the sorting (orderBy) on a relationship column?

[@jessekingston8142]

I guess it's kinda randomly asking but does anybody know a good website to watch new series online?

[@jaxsamir3252]

@Jesse Kingston flixportal

[@jessekingston8142]

@Jax Samir Thanks, I signed up and it seems like they got a lot of movies there :) I really appreciate it!!

[@jaxsamir3252]

@Jesse Kingston glad I could help =)

[@Web_Creaciones]

Great video. You explain very well, at the right speed and the topic you have covered is extremely useful. Thanks a lot

[@Admirul]

Thanks man, your video tutorial save my day

[@lyndonjohnv]

If you change input type="text" into type="search", you will have a nice x icon within your input box and you can press escape to reset.

[@DavidGrzyb]

Nice, thanks!

[@vokalout]

Thanks for the tutorial. Is the page number in the address bar supposed to show for livewire?

[@joanapaulasoliveira]

Awesome tutorial. Helped a lot. Thanks!!!

[@petaranastasov1179]

Thanks for this tutorial. It helps me very well :)

[@jechekudzie]

Also is possible to search concatenated fields for example, first_name and last_name at once

[@DavidGrzyb]

Another great question! For this I would just put the following into \App\Models\User::search(): ->orWhereRaw("CONCAT(first_name, ' ', last_name) LIKE ?", "%{$search}%") Let me know if this helps :)

[@jechekudzie]

Oh you put this in the User model, let me try it. Great videos and good support, keep it up.

[@mvpopuk]

A more realistic scenario will be to have a column for ‘first name’ and a column for ‘last name’ in your database even if you display them under “Name” in your table. So now the search query will be different when you type in the full name because it has to search in two columns for a match. Hope it makes sense.

[@DavidGrzyb]

Yes that absolutely is more realistic. I was just using the users table that ships with Laravel by default :)

[@gdogmalone]

Great tutorial, thanks. I've gone through and did it exactly as shown. It all worked and then I began experimenting! As a curious amateur, for what reason was a boolean and ternary used for asc/desc, please? I ask because I thought I'd find out why first! I set the option values in the view to asc and desc, then the public $orderAsc = "asc"; then set the ->orderBy($this->orderBy, $this->orderAsc) within the query and it still worked. Not sure if there's a knowledge gap on my part here that means my arse is going to get bitten! Thanks and great work!

[@KIM-df8bw]

How do you create a search when your joining multiple tables ?

[@yt1526]

clear explanation! thanks David:)

[@rafaelta47]

Excellent explanation, Thanks

[@DavidGrzyb]

Glad it was helpful!

[@NaomiMisora1000]

very nice tutorial but all of these functionalities don't work when I move to another page instead of the first page. How to fix this?

[@rickybarabba7866]

Wow. Clear explaination, fast coincise and clear. Thank you. P.S. Just subscribed + thumbs up ;-)

[@DavidGrzyb]

Thank you!

[@mrfox7191]

is it possible to create download options like csv, pdf with this?

[@J-wd2cx]

This video is gold! Thanks

[@AmeerHamza-cy6km]

beautifully done. thanks

[@andreallen6823]

Been trying for days trying to make a search feature for my Laravel 8 project. Most videos only concentrate on the Users table which I don't need since I have Voyager Admin Panel for that. Let's say I am building a medical app and have a table called diagnoses with types of diseases with columns: name, description, types, symptoms, treatments, and advice. How would I create that data table and view it on a user's dashboard (dashboard.blade.php)?

[@DavidGrzyb]

Hey, this is a general question and it's kind of hard to answer. You would query the diagnoses table instead of the users table. If you want to query for diagnoses of the logged in user, You'll have to store a user_id on the diagnoses table and query it with ->where('user_id', Auth::user()->id);

[@jamesdowie4628]

Great video and very helpful. 👍

[@seanfrankruyter4008]

Excellent tutorial!

[@bakarbsa]

Hello bro, why my default table theme is dark? how to change to light theme only?

[@TahirBhai]

Yesterday I subscribed your channel because of to the point tutorial, you are doing a very good job, hope you will continue your efforts to educate us. Can you please show us how to implement 'Processing...' or loading effect while we search/change order or sorting or paginating the datatable. So what I'm thinking it will be nice if you show us how to do it with overlay loader on whole table and keep disable the table with overlay div loading effect. I can do it with div and can show the loader in that div, but I can't do it with overlay effect on table. Thanks!

[@overdice2776]

is it possible to order randomly?

[@AlexanderPopovIzmail]

Great tutorial. I see issue though: when you change "Per page" value to the less number than default, then go to the last page (admin/pages?page=5 as example). If do refresh page data table becomes empty. Do you know how to fix it? Probably good to remove ?page=5 on page load. TY

[@DavidGrzyb]

There are some edge cases for sure, I actually think that Laravel's default pagination also does what you're describing. I agree though - would be best to fix that.

[@AlexanderPopovIzmail]

@@DavidGrzyb I could fix it. just use in mount() method $this->resetPage(); and on page reload it will reset pagination

[@tatendawilson3057]

you are best of the best. thanks so much

[@neerajsinghtangariya2587]

can you plz make video on bulk delete using livewire...?

[@oscaralejandrorodriguezsal9267]

la paginación no funciona cuando uso el trait WithPagination, ya lo intente en ambos casos usando el paginate y el simplepaginate y no funciona

[@althafnawshad443]

hey. I still use jquery datatables because of the responsiveness it gives(collapses on small devices enabling buttons to view each record individually). Is there anyway this sort of responsiveness can be achieved with using datatables with livewire ?

[@DavidGrzyb]

Hi! I think collapsing on small devices would just have to be done with Tailwind. You would have to specific which columns are visible for which viewport sizes. As for showing buttons and making it more interactive, I think that would also be a Tailwind thing. It would all just have to be set by viewport size.

[@DionatanCazarotto]

Thank you very much, clear and simple, one more subscriber on the channel!

[@pironti091]

Nice maaan! Ive just subscribed!!!!

[@jechekudzie]

Hey there, thanks so much this was very helpful. Straight forward and to the point. I do have a question maybe you will find it of value and can help a lot of people. Suppose i have a Users table and i do have another table called Profession, and these two have a relation where every user has a profession eg. Developer, technician etc. If i want to display in my data table, for example name email profession, and also want to be able to search by profession and also filter by profession, how best can we achieve that building on top of your wonderful example. in our blade we can have $user->profession->name i display but if one want to search by the profession and also filter by it. how can we do it.. Thank you so much!

[@DavidGrzyb]

Hey Jeche, this is a great question! I actually coded this up to make sure I'm not leading you down an incorrect path, and came up with adding to the query in the \App\Models\User::search() method. Since you have a relationship on User linking to Profession, we can use whereHas() to query into a relationship. Here is my code: public static function search($search) { return empty($search) ? static::query() : static::query() ->whereHas('profession', function ($query) use ($search) { $query->where('name', 'like', '%'.$search.'%'); }) ->orWhere('id', 'like', '%'.$search.'%') ->orWhere('name', 'like', '%'.$search.'%') ->orWhere('email', 'like', '%'.$search.'%'); } I hope this helps, happy coding! 😁

[@jechekudzie]

Hey David, this is so helpful i will implement it and advise on the outcome. Thank you so much!

[@jechekudzie]

@@DavidGrzyb in my question i also asked about filtering using the dropdown where name, email, and or profession if possible to filter with a relationship? Thank you!

[@latlov]

@@DavidGrzyb Thanks, I have tried this but no luck. In the blade component I then added: Profession And I got this error: ------------------------------------------------------------------------------------------------------------------------------------ General error: 20018 Invalid column name 'profession'. [20018] (severity 16) [select top 6 * from [users] order by [profession] asc] (SQL: select top 6 * from [users] order by [profession] asc) ------------------------------------------------------------------------------------------------------------------------------------ I also tried Profession And I got this error as well: ------------------------------------------------------------------------------------------------------------------------------------ SQLSTATE[HY000]: General error: 20018 The multi-part identifier "profession.name" could not be bound. [20018] (severity 16) [select top 6 * from [users] order by [profession].[name] asc] (SQL: select top 6 * from [users] order by [profession].[name] asc) ------------------------------------------------------------------------------------------------------------------------------------ What am I missing to make it work?

[@mustafadundarcelebi1974]

Hello David, It is very good and simply explained tutorial. I also followed it one to one and understood it. I have it at the User Table at 949 people Propiert, it is also fast, only I have what noticed that at simplePaginate representation if you want to show all records, runs without problems, but if you change from simplePaginate to paginat and show all data records, there is a problem, it shows the bottom right , but no records are displayed, if you press 1 button, they are displayed, That is, if we select paginate from 10 to 10000 in our selection window, ie. allee there is a problem, do you have maybe a solution if you have not noticed it. I can also make a screenshot and show it if you did not understand my question. Many greetings from Berlin

[@EduardPantazi]

Nice video, clear and exact. Just subscribed :D

[@tezgaming8291]

Great job

[@m.zaldiadithya6291]

Nice video & thank you very much, but i found some error here, actually i use only Paginate() not simplePaginate(), the error is when i choose the order or when after i type something in the search input then i click the pagination it's show this error : "The GET method is not supported for this route. Supported methods: POST. " i kinda new in laravel-livewire stuff so can you please help me to solve this problem ? once again thank you very much

[@DavidGrzyb]

Hey, are you using the Livewire pagination trait I add in the video? That is a weird problem

[@lordneic]

Tnx for that video very clean and healpfull. . do you have discord ?

[@DavidGrzyb]

Thanks! Sorry, no I don't

[@lordneic]

Do you have any example with apexchart and select input to refresh for different data output on same graph?

[@faraedwn.shaquli]

well done

[@jimburns7549]

Where there are two models, e.g. Patient and Treatment, with hasMany and belongsTo relationship methods ( Patient::treatments() & Treatment::patient() ) defined it their respective models, what is the query that returns data from the belongsTo model (Patient). For example, $treatments = App\Models\Treatment::query()->where('name', 'like', '%'.$search.'%') works with 'name' and every other column from the treatments table, BUT for any column in the patients table if fails. For example, ->where('email', 'like', '%'.$search.'%') throws an error: "Column not found: 1054 unknown column "email" in where clause." Any help is appreciated. My patient model includes first_name, last_name, and email fields, and I want to be able to search the treatments table by those fields. Any assistance would be great!

[@miminghadoop]

thank you sir

[@alimahdavi9775]

Hey this is good👌 Please learn about how to make a editable textarea like simple ckeditor or tinymce with livewire and alpinejs🙏

[@GerardoBelot]

laravel Trix is a good choice!!

[@AsankaRubasinghe]

Perfecto!! Thanks mate ;D

[@DavidGrzyb]

Glad it helped!

[@NandoPuretz]

Muito bom, adoro livewire!!

[@julzorinion]

i got error in "Trait 'App\Http\Livewire\WithPagination' not found "

[@DavidGrzyb]

Hi, make sure you import Livewire\WithPagination at the top of your component file 😊 use Livewire\WithPagination;

[@julzorinion]

I already fixed. Thanks... I hope you can make dynamic for that.. like if you changes some value in database then automatically changed also in datatable without refreshing :-)

[@lokinewborn3696]

but is it responsive tho ?

[@ravialdoimandaputra6742]

can you make this a package so it can be implemented in my project without needing to start all over again.

[@DavidGrzyb]

This would be tough to extract into a one size fits all package, but I have been thinking about it! I'll keep you posted 😁

[@luisuran4050]

When I did php artisan livewire:make TasksTable I got ArgumentCountError . Too few arguments to function... I solved it with php artisan optimize:clear

[@DavidGrzyb]

Nice!

[@liliancarion957]

Thx

[@ChadwickHorn]

Great video with a calm voice. Just gettinig my feet wet with Livewire, so a bit THANKS from your newest subscriber! :

[@DavidGrzyb]

Welcome aboard!

[@mr_don_key]

why don't you tell us how to do a search savely (with injection protection) ? You don't do this, because the where or OR escape already.. It would be wiser to use best practices instead of this way. Learning how to do it properly, yield better learning results for everyone. :)

[@DavidGrzyb]

You could use a scope, I went with Caleb Porzios method that he taught in a tutorial - he created Livewire so I went with his way. Thanks for watching :)

[@nosiphoshezi825]

Sub

[@aliriomicaelamabilana7363]

So thanks its save my day and i linked the content you whon new subscriber.