Building a Data Table with Laravel Livewire! [TUTORIAL]

Поділитися
Вставка
  • Опубліковано 2 жов 2024

КОМЕНТАРІ • 93

  • @DavidGrzyb
    @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/ ✨

  • @petaranastasov1179
    @petaranastasov1179 2 роки тому

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

  • @clawesable2176
    @clawesable2176 3 роки тому +3

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

  • @spyrosaba
    @spyrosaba 3 роки тому +4

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

    • @jessekingston8142
      @jessekingston8142 3 роки тому

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

    • @jaxsamir3252
      @jaxsamir3252 3 роки тому

      @Jesse Kingston flixportal

    • @jessekingston8142
      @jessekingston8142 3 роки тому

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

    • @jaxsamir3252
      @jaxsamir3252 3 роки тому

      @Jesse Kingston glad I could help =)

  • @jimburns7549
    @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!

  • @lyndonjohnv
    @lyndonjohnv 3 роки тому +3

    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.

  • @yt1526
    @yt1526 2 роки тому

    clear explanation! thanks David:)

  • @alimahdavi9775
    @alimahdavi9775 3 роки тому +2

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

    • @GerardoBelot
      @GerardoBelot 3 роки тому

      laravel Trix is a good choice!!

  • @bakarbsa
    @bakarbsa Рік тому

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

  • @KIM-df8bw
    @KIM-df8bw Рік тому

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

  • @canada_calling
    @canada_calling 3 роки тому +2

    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
      @DavidGrzyb  3 роки тому

      Thank you! I really appreciate the kind words 😁

  • @Admirul
    @Admirul 3 роки тому +1

    Thanks man, your video tutorial save my day

  • @mrfox7191
    @mrfox7191 Рік тому

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

  • @luisuran4050
    @luisuran4050 3 роки тому

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

  • @andreallen6823
    @andreallen6823 3 роки тому

    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
      @DavidGrzyb  3 роки тому

      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);

  • @mr_don_key
    @mr_don_key 3 роки тому

    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
      @DavidGrzyb  3 роки тому

      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 :)

  • @amrdiab857
    @amrdiab857 3 роки тому +1

    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!

  • @tatendawilson3057
    @tatendawilson3057 3 роки тому

    you are best of the best. thanks so much

  • @TahirBhai
    @TahirBhai 3 роки тому

    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!

  • @rafikta8381
    @rafikta8381 3 роки тому

    Excellent explanation, Thanks

  • @gdogmalone
    @gdogmalone 2 роки тому

    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!

  • @mustafadundarcelebi1974
    @mustafadundarcelebi1974 3 роки тому

    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

  • @NaomiMisora1000
    @NaomiMisora1000 3 роки тому

    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?

  • @jechekudzie
    @jechekudzie 3 роки тому +1

    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
      @DavidGrzyb  3 роки тому +1

      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
      @jechekudzie 3 роки тому

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

    • @jechekudzie
      @jechekudzie 3 роки тому

      @@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
      @latlov 3 роки тому

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

  • @grzesiekb9142
    @grzesiekb9142 2 роки тому

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

  • @vokalout
    @vokalout 3 роки тому

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

  • @oscaralejandrorodriguezsal9267
    @oscaralejandrorodriguezsal9267 3 роки тому

    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

  • @neerajsinghtangariya2587
    @neerajsinghtangariya2587 3 роки тому

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

  • @clawesable2176
    @clawesable2176 3 роки тому

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

  • @joanapaulasoliveira
    @joanapaulasoliveira 3 роки тому

    Awesome tutorial. Helped a lot. Thanks!!!

  • @m.zaldiadithya6291
    @m.zaldiadithya6291 3 роки тому

    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
      @DavidGrzyb  3 роки тому

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

  • @laplaces-demon
    @laplaces-demon 2 роки тому

    Thank you. This was easy to follow and understand.

  • @Dev_Jet
    @Dev_Jet 2 роки тому

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

  • @althafnawshad443
    @althafnawshad443 3 роки тому

    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
      @DavidGrzyb  3 роки тому

      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.

  • @EduardPantazi
    @EduardPantazi 3 роки тому

    Nice video, clear and exact. Just subscribed :D

  • @mvpopuk
    @mvpopuk 3 роки тому

    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
      @DavidGrzyb  3 роки тому +1

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

  • @lordneic
    @lordneic 3 роки тому

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

    • @DavidGrzyb
      @DavidGrzyb  3 роки тому +1

      Thanks! Sorry, no I don't

    • @lordneic
      @lordneic 3 роки тому

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

  • @Web_Creaciones
    @Web_Creaciones 3 роки тому

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

  • @AlexanderPopovIzmail
    @AlexanderPopovIzmail 3 роки тому

    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
      @DavidGrzyb  3 роки тому

      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
      @AlexanderPopovIzmail 3 роки тому +1

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

  • @jimburns7549
    @jimburns7549 3 роки тому

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

  • @miminghadoop
    @miminghadoop 3 роки тому

    thank you sir

  • @rickybarabba7866
    @rickybarabba7866 3 роки тому

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

  • @jamesdowie4628
    @jamesdowie4628 3 роки тому

    Great video and very helpful. 👍

  • @DionatanCazarotto
    @DionatanCazarotto 3 роки тому

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

  • @ChadwickHorn
    @ChadwickHorn 3 роки тому

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

  • @ravialdoimandaputra6742
    @ravialdoimandaputra6742 3 роки тому

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

    • @DavidGrzyb
      @DavidGrzyb  3 роки тому

      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 😁

  • @faraedwn.shaquli
    @faraedwn.shaquli 2 роки тому

    well done

  • @liliancarion957
    @liliancarion957 2 роки тому

    Thx

  • @overdice2776
    @overdice2776 3 роки тому

    is it possible to order randomly?

  • @nosiphoshezi825
    @nosiphoshezi825 3 роки тому

    Sub

  • @pironti091
    @pironti091 4 роки тому

    Nice maaan! Ive just subscribed!!!!

  • @AmeerHamza-cy6km
    @AmeerHamza-cy6km 3 роки тому

    beautifully done. thanks

  • @lokinewborn3696
    @lokinewborn3696 3 роки тому

    but is it responsive tho ?

  • @julzorinion
    @julzorinion 3 роки тому

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

    • @DavidGrzyb
      @DavidGrzyb  3 роки тому

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

    • @julzorinion
      @julzorinion 3 роки тому +1

      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 :-)

  • @jechekudzie
    @jechekudzie 3 роки тому

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

    • @DavidGrzyb
      @DavidGrzyb  3 роки тому +3

      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
      @jechekudzie 3 роки тому

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

  • @J-wd2cx
    @J-wd2cx 3 роки тому

    This video is gold! Thanks

  • @NandoPuretz
    @NandoPuretz 3 роки тому

    Muito bom, adoro livewire!!

  • @tezgaming8291
    @tezgaming8291 3 роки тому

    Great job

  • @AsankaRubasinghe
    @AsankaRubasinghe 3 роки тому

    Perfecto!! Thanks mate ;D

  • @seanfrankruyter4008
    @seanfrankruyter4008 4 роки тому

    Excellent tutorial!

  • @aliriomicaelamabilana7363
    @aliriomicaelamabilana7363 2 роки тому

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