[00:00] Hello guys, in this video I want to demonstrate to you a package called LaraBrit, Laravel and Livewire table like Excel. So this was showed to me by the author Vikas on Twitter.
[00:13] So he made it first as raw Laravel code, probably for internal project, but then made it as a package with Fable. So yeah, AI helps with that, and this is pretty impressive actually. So you can have just a table with filters, but also you can have excel sheets to enter
[00:29] the data. So let me show you both with a demo. First, there's official demo at grid.laravelcloud, where you can see the table and the booking entry form, and see the code and play around with it, but I've made my own demo.
[00:43] So this is the table of data, and there's also a form for new order inside of Laravel's South Turkey LiveWire version, because LaraGrid is well powered by LiveWire. And let me show you
[00:55] how it works, but before I do that, personal news, I will attend Laravel Live Denmark in a month, I didn't plan that, but I negotiated those two days with my wife, actually, so this is personal good news,
[01:07] it's not a sponsorship or anything, but I advise you, if you want to meet me and other people like these, so impressive list of speakers for Taylor, Otwell and DHH on stage, probably for the first time ever, at Laracons, and then also they announced recently Aaron Francis will be there, so yeah, the list of
[01:24] not even speakers, you can actually talk to all those people in the hallway, which is probably my favorite part of the conference, so yeah, I think tickets are still available, so I will be in Copenhagen in a month and I hope I will see you there Now let get back to Laragrid So this is kind of a typical data table with typical things like you can filter by text with customer then status for example confirmed Also you can save the views
[01:51] So this is not really something extraordinary, but it just works as a data table. Also, you can export the data to CSV, Excel, and PDF. But data tables existed since like forever.
[02:04] So I would not call it the strength of LaraGrid, but I will still show you the code briefly. So this is LiveLar component. So you have with LaraGrid and then you build your, well, grid like this. Grid make, query, then authorize, and then all the typical keywords, kind of similar even to filament in a way.
[02:23] So filters, columns, and for each column there's a class, text column, there's also computer column and other types of columns. You can read about those in the docs. I don't want to stop on the syntax too much. I want to show the functionality.
[02:36] Then there's action make. it does actually remind me of filament quite a lot. But generally there are a lot of things to customize, as you can see, so theme, strats, header and stuff like that. And also, of course, you can offload some logic to private functions
[02:50] inside of the same library component, so status badge and orders query are used inside of here, so this status badge in computed column and order query should be here on top like this.
[03:04] And then you render the blade like in a typical Livewire component, and inside of that index blade you call x lara grid. Again, a lot of things under the hood in syntax, you can leave them in the docs, but you get
[03:17] the idea. It's kinda cool. But what is even cooler is this one. Let's add a new order. Let choose from customer let leave the nodes empty and now let start typing I click on a product and then start typing A and then Enter And look what happens here
[03:35] Automatically completed. Does feel like Excel or Google Sheets. I click right arrow. I hit 2. Enter. And it's updated. So keyboard navigation is one of the powerful features here.
[03:49] So I can navigate to put on discount, for example, right, right. Discount 10%. percent and this is again recalculated. DAT for example also 10 percent. So yeah it's all dynamic and this is the calculated column and calculated at the bottom the total amount. So let's add
[04:05] another product. Click here. Start typing A again and let's add some other quantity like 3. Enter and what if I made some mistake? I hit ctrl z. C is back. So there's even undo with a typical
[04:20] keyboard combination. And there are more keyboard shortcuts, again you can read them in the docs, but it does feel like Excel sheet. I like the feeling, the emotion basically. So that may be impressive for your customers, for your
[04:33] users, if you add that package to your projects like e-commerce or something like that. And the code for that form is another LiveLar component. Create in the same folder, extends LiveLar component and again with Lara grid. But in this
[04:47] case the syntax is a bit different so there's a function we will get to that in a minute but this is grids grid make and we have default rows you saw four empty rows then new rows using so
[05:00] default values for the new row and then columns and this is where the logic is more complicated search select columns you saw that i started typing and then it started searching for the And then probably the most interesting part is formula column the last column which makes the calculations And this is how you write that formula like this
[05:22] in just plain language, basically, with column names. And there's also footer aggregation of all the values of that line total in formula column. And then again, you render live wire
[05:34] component, there's a private function for product options, and inside of that blade file, in addition to typical tailwind and live wire and flux components with starter kit there's wire submit save and again i will show you that in a minute but the main thing with rendering data grid is
[05:51] the same thing x lara grid is just we need to add rows lines to save those lines in the create component lines should be a private property like this or public property and not private and now
[06:05] saving part comes with that wire submit so this is outside of that grid but wire submit save and then it accepts the grid rows of lines then we validate those lines with typical variable
[06:18] validator in this case it wasn't form request and then we have action class create order to well get the lines into the database like this so if i now hit create order on the bottom right
[06:31] our order should be in the table. This is the one on top. It's in the database. So yeah, very cool data table plus data form excel sheet, whatever you call it, packaged with Laravel and Livewire.
[06:43] I advise you to at least try it out if you have that use case. This was very impressive, but maybe I missed something. We can discuss in the comments below what other alternatives you have for such use case or what other packages would you use instead. That's it for this time and see you guys
[06:58] in other videos.