Build Data Table with Livewire 3 for beginners

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:

Full project Code :

Free Livewire 3 Course Playlist :

Tailwind CDN :

Alpine JS :

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 :

Boostrap Documentation:

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)

[gregsanders]

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 !

[fabiorpittol]

Thank you very much for this whole Livewire 3 series.

[kouzokiodin]

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

[Naoufal]

This is awesome! Continue with the Livewire videos! 👍

[reihanboo]

You're a livesaver man. Much love

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

[nasrul-hazim]

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

[ab_azmi]

Clear and easy to understand tutorial. Great job 👍

[muhammedthansil]

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

[ashkaanizadi]

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

[oswaldosilva]

Excelente contenido, mejor .. imposible. Gracias por compartir. Saludos desde Venezuela

[dancyvybes]

You are extremely good at this. Amazing!!!

[finehandstechnologies]

Great video 👍, easy to follow and understand.

[helderneves]

just found this channel, really good stuff!

[kiransuresh]

Tailwind table is really beautiful
Can you do a dashboard

[rmoreira]

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

[sudhirsingh]

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

[metaversewallet]

Great video, thanks for all the wisdom sir!!

[ousssika]

thanks for the video man thanks a lot

[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?