Это видео недоступно.
Сожалеем об этом.
Build Data Table with Livewire 3 for beginners
HTML-код
- Опубликовано: 17 авг 2024
- Welcome to our livewire 3 course, in this course we will cover all the basis needed to build dynamic front end components using livewire. Today we cover how to build a a data table from scratch with search, filters, ability to change items per page, url query params, delete functionality and sorting.
Time Stamps:
-----------------------------
00:00 - Demo
02:15 - Setup Template
05:00 - Create Component
06:40 - Display Users
09:35 - Per Page
12:00 - Search
15:15 - Role Filter
18:20 - Delete User
23:34 - Sorting
HTML table template file:
gist.github.co...
Full project Code :
github.com/yel...
Free Livewire 3 Course Playlist :
• Laravel Livewire 3 Cou...
Tailwind CDN :
tailwindcss.co...
Alpine JS :
alpinejs.dev/e...
Through out the course we will cover:
- how to make components
- Actions
- Properties
- Form Submission and Validation
- Flash Messages
- Tables and Pagination
- File Uploads
- Inline Components
- Full page Components and Layouts
- Events
- Offline States
- URL Query Parameters
- Nesting Components
- Navigate
- Loading states, Lazy loading and placeholders
- Modals
- Alpine JS
And more
Livewire 3 website :
livewire.larav...
Boostrap Documentation:
getbootstrap.c...
If you would like me to make more livewire videos, please let me know by liking the video and commenting what you like to learn next.
What is livewire:
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. (Taken from Livewire Documentation)
![[Live-coding] Laravel Livewire: Parent-Child Form Example](http://i.ytimg.com/vi/iuIEqOcQi6g/mqdefault.jpg)
I wish more videos that dealt with coding were as clearly explained and (even more importantly) as easy to read as this. Professionally prepared and delivered. Great stuff !
I totally agree!
This is the best livewire video ever thank u so muuch Mr. Matin!
Thank you very much for this whole Livewire 3 series.
Thank you for the super thanks.
This is awesome! Continue with the Livewire videos! 👍
Thanks for watching! Will do!
Thanks, this clarified much doubt that I have...
Hi Martin. absolutely awesome video and content. Datatables are a really useful part of dashboards. It would be great if you continued on this topic in future, like some Excel and PDF export, some kind of dropdown with checkboxes to enable/disable columns, but also you can do more advanced next steps with refactoring code etc. Really enjoying your content, You should have some kind of "by me a coffee" or so, at least to show some appreciation for your time and effort and so on. Hope you will continue with your amazing Laravel / Livewire/ Tailwind content.
Hi Miroslav, Thank you for watching, I'm really glad you're enjoying the videos.
Will definitely be looking into expanding on this topic, specially now that I seen there is high interest .
Currently I'm looking into potential ways for supporting the channel and what other successful channels have done, since it's quite common for dev youtubers to quit after a while, I don't want that to happen to this channel. Will hopefully add something in the coming weeks. Thank you
nice. a good example of the data table with Livewire 3.
Glad you liked the video. Thank you for watching.
Clear and easy to understand tutorial. Great job 👍
Thanks for watching
You are extremely good at this. Amazing!!!
Thank you.
Nothing to say, absolutely awesome video man. Great content 👍
Glad you enjoyed it. Thanks for watching.
You're a livesaver man. Much love
mamnoon Matin jan. lezat bordam az filme amoozeshit. mersi 👍
Mersi Ashkan jan. Lotf darid.
Great video 👍, easy to follow and understand.
Glad it was helpful!
Hi Martin its great video
Please make on exporting in csv Excel pdf ❤
Thanks for watching.
Will try making a part 2 with csv export🙏.
Tailwind table is really beautiful
Can you do a dashboard
just found this channel, really good stuff!
Welcome to the channel, Thanks for watching.
very good
Thank you for watching Majid.
I have seen all your videos related to livewire and I can boldly say that it was one of the most effective videos. I have been working with PHP for 12 years and I have been working with Laravel for almost 5 years. You are also quick in explaining and You can also describe the content well, I hope you won't be upset if I make a new video of your content on my channel in Persian language so that the people of Iran can also use it.@@yelocode
Indeed, those voices like BOOM that you say in the video make it more attractive, it's very good@@yelocode
Great Video, Thanks Yelo Code
Great video, thanks for all the wisdom sir!!
Really love it. I just made it.
Thanks for watching. Glad to hear that.
Indeed an amazing video.
Thank you
Thank you a lot for your amazing work
Thanks for watching.
ممكن تعمل حلقة كامل بتشرح فيها Livewire🥺
Hello, great video.
I have a question, can this example be created in Livewire/volt?
Thanks
very important video. Cool again
Glad you think so. Thank you for watching.
Livewire has turned PHP into what many long-time developers think, "Messy code", an incredible number of methods to achieve things that would be more efficient with a Front written in JavaScript (React, Vue, Angular...). In addition to consuming the server in a very inefficient way to render HTML from the server, in the end they will need to learn JS and when they face tests with tools like JMeter they will realize that this is not a solution to even consider.
Great content
Thank you
Thank you sir ❤
Thank you for the idea suggestion.
This is amazing as usual ..
But one question, do livewire and the datatable js cdn conflict?
So we can't use the default pagination that comes from datatable cdn ?
I gave it a like before even I watch
Same here,
This should be an amazing one
haha same here :)
Haha, Thanks guys :)
Thank you ☺
Thanks for watching
This is great, thanks a lot
Thanks for watching
This is awesome.
Thank you for watching.
thanks for the videos man
Fantastic Tutorial! Thank you so much! Can you show how to do it with sweetAlert modals? Would be nice as a security feature that on record delete it would check if the user deleting it is an admin and confirm it with password. Just in case of an admin stolen session. Thank you so much again for sharing your knowledge with us
Thank you for watching. Great Idea, Will try to cover that in up coming videos hopefully.
sir martin good day wherever you are... im a fan of your vids, but i have some issue lately
I cannot recall where you discussed it, but I require a solution wherein when you load the same URL on another tab (let's say we have tab 1 and 2), and you delete a user on tab 1, of course, tab 2 needs to reload so that the same user won't be deleted. However, it does not occur for me. Can you assist me?
this is awesome, thank you sir
Glad to hear that. Thank you for watching.
@@yelocode this is a bit much but could you please make inline editing on this datatable aswell please 🙂
thanks for the video man thanks a lot
Glad to help
Is it responsive? I find that's the problem with datatables... but i found ine for livewire is called "Power Grid" that have some kind of "reactiveness". Can someone point a good one out?
How do you handle bulk actions for paginated tables?
Very nice tutorial, thank you
Thank you for watching.
Great videos mate! Could you do one on wrapping a JS component in a Livewire component? I'd like to be able to use things like Flatpickr or TinyMCE in my Livewire forms
Thanks for watching. Great suggestion. I will add it to list of livewire videos to make.
very nice video
Thanks
Great tutorial! It would be good to validate the field before sending the request, right?
Thanks for watching. Yes, you want to validate the data, specially before storing them in the database.
Even to check what data the user enters in the search field? Have you planned a tutorial for this?@@yelocode
For the search field, it's not required, unless you want to force the search query to be more than a specific number of characters.
I do have a video planned for covering, how to validate properties like the search incase you need to validate them.
💪💪💪💪💪 great!
Thanks
The pagination links seems to break on sorting or searching....any idea why?
This is awesome. But I got one question is about can Livewire3 work with the Flowbite. Because I try doing the wire:navigate on in dropdown menu but the dropdown is cannot open. If I remove wire:navigate it's work
For me it works on first page render, after I change the page, it stops working.
This is because wire:navigate does not re run the js files to make the experience faster so since your html elements are changed your menu stops working. 2 possible solutions are, 1 : you wrap your navigation menu with something like @persist('nav), this makes it so it's not re-rendered. 2. you can use the livewire hooks to rerun the dropdown initialisation when the page changes.
For pages that have same layout I just wrap it with persist and seems to work well so far.
@yelocode okay thanks you bro. 🙂
What I need to do to have a page parameter in the url? It's not showing in the query string
Love this series! Can you list which VS Code extensions you use on it?
Thanks for watching.
These are all the Laravel related extensions I'm using at the moment:
- Monokai Pro theme
- PHP Intelephense
- Laravel Blade
- Laravel Blade Snippets
- Laravel Blade formatter
- Livewire Language Support
- Vetur
- Tailwind CSS IntelliSen
this is awesome can u do charts plssss
Sure thing, Will add that to the list of videos ideas to cover
Hi Martin.....Thanks for this video.. You are awesome. Subscribed
Thank you. Glad the videos are helpful. Welcome to the channel.
Hi martin...just curious.....Can livewire be run with jquery? jquery chart for example, or jquery datatable maybe? so we don't have to make it yourself from scratch? is it possible? considering that there are many paid templates, all of the libraries use jquery
Yes, You can, livewire won't cause any issues, but still you will need to write a php api to provide the data for those data tables unless it comes with laravel backend code as well.
If you want an easy to use databale with livewire you can check out filament table builder : filamentphp.com/docs/3.x/tables/installation
Hi @@yelocode What if I don't use tailwind but use bootstrap? I usually use jquery datatable with bootstrap in all my projects and when I try in livewire 3, I get an error Uncaught ReferenceError: $ is not defined, when the page is refreshed manually instead of by moving the page using "nav-link"
@@yelocode I've used wire:ignore (didn't know it's still useful in version 3) for ignore table from livewire. cmiiw
Its awesome bro... Can you please have something like cropping image while uploading it in livewire?
Thank you for watching. Will add that to list of videos ideas to make.
Hello, are you using server side?
Yes, everything is loaded server side.
So this was just for learning to understand how what we have learnt so far can be applied?? There are already packages which have gat all this figured out
It would be awesome if you create a video about the filament table package.
I will do that this coming week. Great Idea Shahzad.
How about Chart with livewire ?
Will try to make a video on charts as well. There is a package for building charts as well if you want something out the boxgithub.com/asantibanez/livewire-charts
Is this serverside datatable with yajra? i have problem handling big number of data using datatable
No, not using yajra. It's all livewire and laravel code.
@@yelocodesorry, any idea to improve speed on datatable.? I have table with 10k but it's slowly 😅
@@ilhamlutfi5815 You should look into adding indexes to your table on columns that are searchable and also sortable. That should greatly improve the performance. If you are also displaying relationships in your table, make sure you are eager loading them, this can be a big performance hit as well.
If above don't improve it enough, you can use laravel debug bar, to see all the queries laravel is generating and pin point the slow queries. Hope this can help solve your issue. If you also try some other methods and get good results. Let me know so I can inform other viewers if they have similar issues.
any recommendation forserver side datatable for livewire@@yelocode
@@gofarperdana2659 why do you even needed datatable for livewire? you can create your own table like what in this video.
Is wire:key still necessary with Livewire 3? Caleb seemed to indicate it wasn't in this part of his launch video: ruclips.net/video/U-N8Qqq02b0/видео.htmlfeature=shared&t=193
For normal elements or conditional parts of your view, no.
But for loops it's still required, specially if you have pagination.
livewire.laravel.com/docs/components#adding-wirekey-to-foreach-loops
Please make a video of the data table livewire package🥲☺
I will be releasing that video soon. Hopefully by end of this week
@Yelo Code
hellow i am facing some issue
when i install livewire 3 in my project its run fine but when i use this project any other pc its not work.
i also done Route clear, livewire vendor publish everey thing but its not work
This link video help you to more understand
www.loom.com/share/f76d05f7bffb49e79b5bfaa382147001?sid=d7439881-5ff5-4501-beee-94a726236302
whenever i click on pagination bar or somthing search in search or select row i get this "request url not found" and also get error in my network tab"localhost/livewire/update
"404 not found
can you please help me out to fix it