Build Data Table with Livewire 3 for beginners

[@gregsanders9585]

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 !

[@nascoli2008]

I totally agree!

[@fabiorpittol]

Thank you very much for this whole Livewire 3 series.

[@yelocode]

Thank you for the super thanks.

[@kouzokiodin3623]

This is the best livewire video ever thank u so muuch Mr. Matin!

[@Naoufal933]

This is awesome! Continue with the Livewire videos! 👍

[@yelocode]

Thanks for watching! Will do!

[@MiroslavCada]

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.

[@yelocode]

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

[@ab_azmi5584]

Clear and easy to understand tutorial. Great job 👍

[@yelocode]

Thanks for watching

[@muhammedthansil]

Nothing to say, absolutely awesome video man. Great content 👍

[@yelocode]

Glad you enjoyed it. Thanks for watching.

[@ashkaanizadi]

mamnoon Matin jan. lezat bordam az filme amoozeshit. mersi 👍

[@yelocode]

Mersi Ashkan jan. Lotf darid.

[@nasrul-hazim]

nice. a good example of the data table with Livewire 3.

[@yelocode]

Glad you liked the video. Thank you for watching.

[@reihanboo]

You're a livesaver man. Much love

[@dancyvybes]

You are extremely good at this. Amazing!!!

[@yelocode]

Thank you.

[@finehandstechnologies4883]

Great video 👍, easy to follow and understand.

[@yelocode]

Glad it was helpful!

[@helderneves91]

just found this channel, really good stuff!

[@yelocode]

Welcome to the channel, Thanks for watching.

[@rmoreira8433]

Thanks, this clarified much doubt that I have...

[@metaversewallet]

Great video, thanks for all the wisdom sir!!

[@ifetmartinovic]

Great Video, Thanks Yelo Code

[@nazgyl]

Indeed an amazing video.

[@yelocode]

Thank you

[@taslimsuman]

Really love it. I just made it.

[@yelocode]

Thanks for watching. Glad to hear that.

[@scientist.entity6609]

Thank you a lot for your amazing work

[@yelocode]

Thanks for watching.

[@mahdimiad]

I gave it a like before even I watch

[@nazgyl]

Same here,

[@nazgyl]

This should be an amazing one

[@MiroslavCada]

haha same here :)

[@yelocode]

Haha, Thanks guys :)

[@sudhirsingh1459]

Hi Martin its great video Please make on exporting in csv Excel pdf ❤

[@yelocode]

Thanks for watching. Will try making a part 2 with csv export🙏.

[@onnewf9288]

this is awesome, thank you sir

[@yelocode]

Glad to hear that. Thank you for watching.

[@onnewf9288]

@@yelocode this is a bit much but could you please make inline editing on this datatable aswell please 🙂

[@majidmohammadian]

very good

[@yelocode]

Thank you for watching Majid.

[@majidmohammadian]

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

[@majidmohammadian]

Indeed, those voices like BOOM that you say in the video make it more attractive, it's very good@@yelocode

[@ousssika5359]

thanks for the videos man

[@narheben]

This is great, thanks a lot

[@yelocode]

Thanks for watching

[@wmafendi]

very important video. Cool again

[@yelocode]

Glad you think so. Thank you for watching.

[@kiransuresh9542]

Tailwind table is really beautiful Can you do a dashboard

[@md.mizanurrahman5852]

Great content

[@yelocode]

Thank you

[@eramitgupta271]

Thank you sir ❤

[@yelocode]

Thank you for the idea suggestion.

[@StingyyDZN]

How do you handle bulk actions for paginated tables?

[@HamadAbdulla_7]

Thank you ☺

[@yelocode]

Thanks for watching

[@PrébagaraneLFox1968]

Very nice tutorial, thank you

[@yelocode]

Thank you for watching.

[@julianlugod]

This is awesome.

[@yelocode]

Thank you for watching.

[@diogocarlos9898]

Hello, great video. I have a question, can this example be created in Livewire/volt? Thanks

[@ousssika5359]

thanks for the video man thanks a lot

[@yelocode]

Glad to help

[@clnhancale]

very nice video

[@yelocode]

Thanks

[@berthojoris]

Hi Martin.....Thanks for this video.. You are awesome. Subscribed

[@yelocode]

Thank you. Glad the videos are helpful. Welcome to the channel.

[@berthojoris]

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

[@yelocode]

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

[@berthojoris]

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"

[@berthojoris]

@@yelocode I've used wire:ignore (didn't know it's still useful in version 3) for ignore table from livewire. cmiiw

[@tetianakulieshova1479]

What I need to do to have a page parameter in the url? It's not showing in the query string

[@real.silencewench]

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?

[@yifanisme]

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

[@yelocode]

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.

[@yifanisme]

@yelocode okay thanks you bro. 🙂

[@angelfireful]

💪💪💪💪💪 great!

[@yelocode]

Thanks

[@mibrahim4245]

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 ?

[@mahdimiad]

How about Chart with livewire ?

[@yelocode]

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

[@ClementLanot]

Great tutorial! It would be good to validate the field before sending the request, right?

[@yelocode]

Thanks for watching. Yes, you want to validate the data, specially before storing them in the database.

[@ClementLanot]

Even to check what data the user enters in the search field? Have you planned a tutorial for this?@@yelocode

[@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.

[@yelocode]

I do have a video planned for covering, how to validate properties like the search incase you need to validate them.

[@chaitanyamhatre234]

how we can create table component (with livewire search and sort functionality) that we can use in entire application.

[@adriancarrion14]

Hello, are you using server side?

[@yelocode]

Yes, everything is loaded server side.

[@jaisuigeneris]

The pagination links seems to break on sorting or searching....any idea why?

[@ismailbouaichi1834]

this is awesome can u do charts plssss

[@yelocode]

Sure thing, Will add that to the list of videos ideas to cover

[@NFM-nb7dl]

Great video ,Pls make a video of adding alpine.js to take this datatbale to the next level. by manipulite dom from client side. soory if my english is not good

[@DR9Freelancer]

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

[@yelocode]

Thank you for watching. Great Idea, Will try to cover that in up coming videos hopefully.

[@NeilWiddowson-g6u]

Love this series! Can you list which VS Code extensions you use on it?

[@yelocode]

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

[@gofarperdana2659]

Is this serverside datatable with yajra? i have problem handling big number of data using datatable

[@yelocode]

No, not using yajra. It's all livewire and laravel code.

[@ilhamlutfi5815]

​@@yelocodesorry, any idea to improve speed on datatable.? I have table with 10k but it's slowly 😅

[@yelocode]

@@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.

[@gofarperdana2659]

any recommendation forserver side datatable for livewire@@yelocode

[@ilahazs]

@@gofarperdana2659 why do you even needed datatable for livewire? you can create your own table like what in this video.

[@binaryfire]

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

[@yelocode]

Thanks for watching. Great suggestion. I will add it to list of livewire videos to make.

[@joaocouto90]

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?

[@ripon59]

Cleansheet

[@ENG.AhmedMohamed]

ممكن تعمل حلقة كامل بتشرح فيها Livewire🥺

[@agastyasutra]

Its awesome bro... Can you please have something like cropping image while uploading it in livewire?

[@yelocode]

Thank you for watching. Will add that to list of videos ideas to make.

[@RaulMauricioUñateCastro]

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.

[@binaryfire]

Is wire:key still necessary with Livewire 3? Caleb seemed to indicate it wasn't in this part of his launch video: kzbin.info/www/bejne/i16xaYSnppVlmJIfeature=shared&t=193

[@yelocode]

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

[@shahzadwaris7193]

It would be awesome if you create a video about the filament table package.

[@yelocode]

I will do that this coming week. Great Idea Shahzad.

[@davidmutua6971]

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

[@dm._.315]

Please make a video of the data table livewire package🥲☺

[@yelocode]

I will be releasing that video soon. Hopefully by end of this week

[@maanbashir-z8e]

@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

[@kurtulusbeylan]

you are great. thanks for these series