Build a Livewire CSV Importer/Exporter
This episode is for members only

Sign up to access "Build a Livewire CSV Importer/Exporter" right now.

Get started
Already a member? Sign in to continue
Playing
04. Building a basic datatable

Episodes

0%
Your progress
  • Total: 2h 18m
  • Played: 0m
  • Remaining: 2h 18m
Join or sign in to track your progress

Transcript

00:00
We're now going to build out a very basic data table component so we can of course view
00:04
transactions and select them. You might already be using your own data table which is absolutely fine you can just use the selected IDs to go ahead and export them or you might not be using a data table at all and just want to export all records from your database and import to fill it. Either way this course is going to cover what you need but I'm just going to build out something basic
00:27
here so we've got a nice starting point. Okay so we will just create out a live wire component to deal with this, let's call this transactions table and we're just going to dump this over on the dashboard just to keep things simple. So let's get rid of this container and let's say live wire transactions table and let's head over to the blade file and we're going to paste in
00:51
some pre-made markup for this entire table and we'll fill this in as we go. So at the moment this is what it looks like we would have seen this from the introduction. So we've got an import button obviously that's going to click to launch a modal and allow us to select a file, we've got export but we've also got export selected whenever we either individually select records on any of
01:14
the pages that we have or if we select an entire page which will select everything on the page that we're currently on. So pretty straightforward let's go ahead and fill this in so we can see some of the transactions that we seeded earlier. So over in the transaction table component we are not just going to directly pass these transactions down because we're going to need them in a computed
01:36
property to do stuff with elsewhere. So let's go ahead and create out a method in here called transactions and this will be our query builder for this but this is going to be a computed property so we can make use of it multiple times and that value will be cached across each life cycle. So let's say transaction query and we want to order this by the date that's the import date
02:03
in descending order and really importantly we want to paginate this as well. So this is actually a paginated collection which is fine because we can still extract the items out of it if we need to. Okay so when we render this we're going to pass an initial set of transactions down so let's reference the transactions computed property that we've just created and let's come over to the
02:26
transactions table and start to iterate through this. So we've got our head just here which we can kind of ignore for now and here we've got a commented out section where this will show when we have selected so we'll come back to this a little bit later. We've got the input here the check box for each of the records so really we just need to iterate over each of these rows.
02:50
So let's go ahead and do a for each here and let's take this end pop it here and let's say for each transactions as transaction. For the row record itself what we would like to do here just because as we update this and select things we need each of these to change and make sure we have a unique reference to each of these mainly for the input but things could change later so we're just going
03:18
to say the key is the transaction id behind the scenes that kind of makes sense. Okay so let's ignore the check box for now we'll figure that out in a second let's just fill in each of the bits of data that we need here. So we have a transaction transaction id which we stored as a separate string and let's add in here just so we can see what's going on the actual transaction id
03:47
itself so let's say transaction id and for the next one this is going to be the descriptor so let's say transaction descriptor we'll output the amount although this isn't formatted yet we're going to do that in the next episode so let's output the amount and we'll do the same for the date here as well which again we haven't cast just yet. So let's go over to the browser and you can
04:13
see yeah sure enough we've got all of this data in here. Okay so let's focus on individually selected ids so basically when I select any of these I want to push them to an array to say that they've been selected. If nothing is selected we're going to do an import on everything so we're just going to allow ids to be selected or not if they're not we're going to assume everything is going to be
04:39
exported. So how do we do this? Well really easily with the check box what we can do is just wire this up to an array inside of our component so the value of this of course needs to be unique and we're just going to set that to the transaction id from the database. Now what we can do is say wire model really importantly we're going to say live because we want this to always update
05:03
as we click these we don't want these to be updated only when we send a subsequent request through and let's just hook this up to something like selected ids property which is going to be an array. So over in the transactions table let's go up to the top here and let's create out a array of selected ids and we'll set that to an empty array by default so that should be enough to get
05:31
this working now. Let's go over to our transactions table and at the top here let's just dump this out so I'm just going to use var dump here it doesn't really matter what we do on selected ids and let's see what we get. Okay great so let's just select this one and see what happens there we go that's been pushed to that same again for each of these. So next up now that we can pretty much do this so
05:56
when I click export now this should just export these three and of course if I had selected none and I click export that should export every single transaction from here now we need to figure out this page thing just here just before we do that let's change around the state of this export export selected button so to do this let's just keep the selected ids in here what do we need to
06:21
do just here well if we have some selected ids we want to say selected and then we want to count them so really all we need to do here is say selected ids well if that's the case then I'll put selected so that will then say export selected and then in here we can go ahead and just count them out so let's say count and selected ids and we should be good that's pretty much all we need to do let's
06:46
just end that ternary off there okay so now we get export but then as we start to select these it will tell us how many we're exporting great okay so the harder part about this is clicking this to select all of these items on the page there's a couple of ways that we can do this let's just go for the most basic because we're not building out a full data table we'll have
07:11
another course on that let's go ahead and say keep an array of each page that has been selected now what this allows us to do is keep track of how to render each page as we click through it so rather than just pushing all of these selected ids we keep a track of which page has been selected as we go through so we have a similar thing here we have an array called select page
07:41
and we just set that to an empty array so if we've selected page one this will hold the value one if we've selected page one and two it will say one and two and so on and so forth what this then allows us to do is hook into this and this is just the easiest way i've found to do this we can hook in to the select page property and within the life cycle hook we can actually check this in here
08:08
then we can go ahead and extract all of the transactions from the current page that we are viewing if we click if we add this and then we can push them in let's do that in a second let's just hook everything up inside of our transactions table for now so where do we do this well it's in this table row just here formatting's gone a bit funny but that's fine so we need to hook this up
08:31
to that specific property that we've just created so we're going to do exactly the same thing here and assign this a value but what is the value of this overall check box that we have here well it's just gone because we've just added an empty output here but you get the point well this is going to be the current transactions that we're dealing with and the current page so obviously
08:57
at any point that we're viewing this on any page we haven't even added pagination links yet but we'll do that in a second when we click on this we always know we're on the current page that we're clicking this for so that will just push the current page now that we've done this we can do exactly the same thing again with the wire model and we can set this to live because we always want this
09:17
to send a request down and this is going to be for select page we also need a wire key in here because when we go back to a previous page we need to uniquely identify each of these inputs or it's not going to be able to render this properly and it's going to think it's the same thing for every page we basically want this to be unique so the key that we're going to give to this is just the
09:40
current page let's change this around a little bit just to keep them two together and i think we're good okay so we've not even added pagination links just yet so let's go ahead and add these just down here now so that's going to be transactions and links and let's go over to our transactions table and just make sure we use with pagination in here and we should be good so we should now
10:06
be able to navigate to multiple pages and let's just check out what happens when we select one of these so back over to our transactions table let's do exactly the same thing and we'll var dump out select page and let's just take a look so if i select page one we have selected page one so that will eventually re-render let's do this for two and you can see that we've now selected page one
10:33
and two and this just helps us figure out which ones we need to select so now that we've done that let's implement the logic over in the update lifecycle hook here for select page to actually add these in now this is a lot more complex but of course we'd go ahead and refactor this later so the first thing that we want to check is if the current page that we are on is within that array
11:00
now basically all that means is are we on page one two three whatever and has the user clicked it that's pretty much all we need to know so if the user has clicked that we can say something like in array this transactions this is why we set transactions as a computed property so we don't keep accessing it and rerunning a query and we're going to say current page so is the
11:24
current page within this select page so we've pushed to that array if that's the case then user has checked entire page otherwise what's happened well user has unchecked entire page so let's just die dump here and say checked page just so we know that this is working we're on page let's have a look here one at the moment let's click that there we go check page
11:55
so we know that at this point the page has been added to this list we're currently on that page so now what we need to do is just push a bunch of selected ids to the selected ids array now bear in mind this is one thing we need to be careful of here if your user goes to page one selects everything goes to page two selects everything and does that for every single page in here up to
12:21
10,000 they're going to end up with an array of 100,000 ids representing every single record we have in the database now what that is going to do is completely make your Livewire application unrenderable because there'll be too much data going down the wire so it's not the ideal solution but it's good enough for now and it's unlikely that your user is going to want to go through
12:45
every single page individually and select every single page for that they could just select nothing click export okay so in here what do we need to do well we need to set this selected ids to the new set of selected ids which is everything is on the current page we are selecting now with Livewire this won't react unless we use something like array values so the first thing i'm going to
13:07
do is wrap the merge inside of array values to reset the keys so we get a rerender next up we're going to use array unique to wrap this because we want to select these just in case we get any unique values so we're going to do that as well then finally and the most important part is the array merge so we're going to take and again i'm going to pull this down just for readability
13:31
the current selected ids and we're going to merge in the current page of transaction ids so for that we're just going to say this transactions which again gives us the current page data we're going to pluck out the id from each of the transactions on that current page and we can map through these taking each of the ids and we're really importantly going to cast them to a string otherwise we're
13:55
going to see problems with reactivity and Livewire choosing stuff so we're going to say to array at the end of here so let's just check this out and see what happens so i'm going to go ahead and select page one and yeah there we go all of them get plucked out cast to a string added to the selected ids and you can see this is now completely selected let's go to page two and it looks like
14:19
some of these are already selected so let's just see what we're doing here so let's go over to page one here so that's all of these let's go to page two and yeah it looks like some of these are hanging around let's just take a look at what we're doing here the wire key and yeah i'm pretty sure let's just have a look at the date yeah it's not being ordered properly just because for some reason the
14:43
date is the same for every record you might have noticed that okay let's think about what we're doing here so over in our transactions factory i've probably just done this incorrectly let's just take a look at the date method here and yeah the first argument is format and the max is the last so we can actually get away with saying ymd we can even add the hours minutes and seconds if
15:09
we want to and then we could say max now okay great so let's just leave it at that let's try and reseed this and this should be fine so we've got all of our data here in the database let's go ahead and truncate this and let's go over and just reseed this with tinker so let's go ahead and reseed in 100 000 of these and we should if we hop over to the database while this is running in
15:32
get a different date now created for each one which we do now so we shouldn't now see an issue with duplicates on the second third fourth and so on pages so let's just wait for this to fully seed every single one of these records and there we go so let's go over to our app again we will start on page one let's select multiple here let's go to page two and yeah there we go
16:00
each of these now are unique because we're ordering by something that differs okay so now that we have got that sorted over in the transactions table what do we need to do here well this will be whether the user has unchecked the entire page so back to where we were before when we're on page one we can now select page one we can select page two and for
16:27
example we could select page three when we go back to page two now you can see they're all selected same with page one as well and page three so this state here is being kept up to date based on these values and the selected ids are being kept up to date based on the selected ids that we have and of course there's now nothing stopping us from going in and selecting say just two on the fourth
16:49
page for example so this is working nicely but let's go back to page one click on this and then uncheck this now at this point we want that else to kick in and get rid of these so we basically want to filter out all of the items that are on that page to do this we're going to go ahead and reset the selected ids to again array values so livewire can actually update itself and we're
17:14
going to use array filter here there are other ways to do this with laravel collections but we'll just keep this simple since we're working with a primitive id a primitive array so let's go ahead and create our closure here and for each of these we will get an id and what do we want to do to get rid of them well the condition is that they are not within the current page so the id
17:39
is not within the list of transactions that we're on the current page for and that will just remove each of them so we can say this transactions for example and again we'll just have to pluck the id out here and cast that to an array properly and we should be good so let's go over and try this out i'm going to select everything on page one then i'm going to unselect everything on page
18:02
one you can see that because we are filtering by only the things that are on this current page when we unselect this we are getting rid of them from the list so for example i could select all on page one all on page two but then i could go back to page one and unselect all on page one and then when we go back over to page two they are all selected so everything is looking good in terms
18:23
of this functionality the last thing i want to do is over on the actual transactions table itself i want to show this if any transactions have been selected so it's really easy for the user to see what's been selected so let's go ahead and bring in this new table row inside of here and this looks something like this we just now need to count up and as long as we actually do have some items
18:45
selected and display how many have been selected here to do this is pretty straightforward let's go ahead and just create an if statement around this and we can just use a native count on these selected ids in the if around this and then just dump out the count inside of here so we can pretty much just grab that entire count dump it out on there and of course we could also use a plural
19:11
in here as well if we wanted to so let's use plural transaction and again count on selected ids let's go and have a look at this so let's select one one transaction selected let's select all of them 10 transactions selected and now we can clearly see how many are getting selected so 20 from the first two pages and then one from the third page and we have 21 transactions
19:39
selected great okay i think we're pretty much done here obviously this is just a really simple data table that allows us to not do really too much else other than just select records but at least we now have a nice visual of all of the transactions we can browse them we can choose to export a certain selection of records as well if we want to

Episode summary

In this episode, we build a basic yet functional data table component for viewing and managing transactions. We start by whipping up a Livewire component for our transactions table, using some handy pre-made markup to give ourselves a fresh starting point. This table includes an import button, export options (including "export selected"), and will eventually allow us to select individual records or entire pages of records for batch actions.

The episode covers how to structure and query data for pagination, ensuring our transactions are ordered and can be browsed page by page. We then dig into how to manage the selection state for each transaction—whether picking individual records via checkboxes or selecting all items on a page at once.

You'll see how we track selected IDs, how that interacts with Livewire updates, and even how to show users how many records they've picked. Along the way, we troubleshoot some fun quirks (like duplicate dates causing issues with selection) and sew it all up with pagination and clear selection/indicator logic so you always know what's picked for export.

By the end, you've got a clean (and extensible) data table setup: you can browse transactions, select a handful or everything on a page, and see exactly what you'll be exporting. It's a simple implementation but perfectly sets the stage for more advanced features down the line.

Episode discussion

No comments, yet. Be the first!