1 00:00:01,260 --> 00:00:04,380 ‫Next up, let's finally also bring 2 00:00:04,380 --> 00:00:07,293 ‫the bookings data into our application. 3 00:00:08,910 --> 00:00:11,940 ‫So, let's come back here to Supabase 4 00:00:11,940 --> 00:00:14,073 ‫and to the Table Editor. 5 00:00:15,390 --> 00:00:18,210 ‫So here, we now want to get our bookings 6 00:00:18,210 --> 00:00:19,920 ‫into the application, 7 00:00:19,920 --> 00:00:23,340 ‫but first of all, let's actually create a new booking 8 00:00:23,340 --> 00:00:26,520 ‫so that we have not just this one row here. 9 00:00:26,520 --> 00:00:30,750 ‫Now, for that, we actually also need another guest 10 00:00:30,750 --> 00:00:33,690 ‫because remember how a booking contains 11 00:00:33,690 --> 00:00:37,473 ‫both the ID of a cabin and of a guest. 12 00:00:38,760 --> 00:00:41,010 ‫So let's create one here quickly. 13 00:00:41,010 --> 00:00:44,733 ‫Let's say Steven Williams. 14 00:00:48,300 --> 00:00:50,553 ‫And here, all of this doesn't really matter. 15 00:00:55,320 --> 00:00:57,120 ‫Let's say Portugal. 16 00:00:57,120 --> 00:00:59,613 ‫And here again, this is not that important. 17 00:01:00,930 --> 00:01:05,043 ‫Let's just save so that then we can create another booking. 18 00:01:07,770 --> 00:01:12,770 ‫So the start date, let's say, is this one right here. 19 00:01:14,640 --> 00:01:17,310 ‫So 29, and then here finish, 20 00:01:17,310 --> 00:01:21,423 ‫which means two nights, four guests, 21 00:01:24,660 --> 00:01:26,373 ‫let's say 500 here, 22 00:01:27,600 --> 00:01:32,353 ‫and then unconfirmed. 23 00:01:36,930 --> 00:01:39,063 ‫True, and true. 24 00:01:40,680 --> 00:01:44,373 ‫And now again, we need to select the cabin and the guest. 25 00:01:45,630 --> 00:01:50,430 ‫So the cabin, let's say, is this one with the ID of 18. 26 00:01:50,430 --> 00:01:52,620 ‫So this is now the foreign key, 27 00:01:52,620 --> 00:01:55,800 ‫and then the guest ID is another foreign key. 28 00:01:55,800 --> 00:01:58,440 ‫And so that will be the ID number two 29 00:01:58,440 --> 00:02:00,723 ‫for the guest that we just created. 30 00:02:02,820 --> 00:02:03,720 ‫All right. 31 00:02:03,720 --> 00:02:07,533 ‫And so now, let's get back here into our application. 32 00:02:09,420 --> 00:02:13,200 ‫So first off, let's add a new service here 33 00:02:13,200 --> 00:02:17,280 ‫into this API bookings file that we already have. 34 00:02:17,280 --> 00:02:19,320 ‫So here we have Get Booking, 35 00:02:19,320 --> 00:02:22,020 ‫but that's only for one individual booking. 36 00:02:22,020 --> 00:02:26,463 ‫So let's now create Get Bookings for all of them. 37 00:02:30,420 --> 00:02:31,263 ‫So getBookings. 38 00:02:33,240 --> 00:02:37,653 ‫And this doesn't need any arguments, at least not for now. 39 00:02:39,240 --> 00:02:42,010 ‫And this time, let's actually write the query by hand 40 00:02:43,710 --> 00:02:47,643 ‫because we don't always have to copy paste. 41 00:02:49,230 --> 00:02:53,373 ‫So here we're going to await the Supabase, 42 00:02:55,437 --> 00:02:59,033 ‫and we want to select the bookings table. 43 00:03:00,690 --> 00:03:05,690 ‫And from there we want to select, for now, just everything. 44 00:03:10,230 --> 00:03:12,240 ‫Alright, and then here, 45 00:03:12,240 --> 00:03:17,240 ‫well maybe we can actually copy from the API cabins here. 46 00:03:21,300 --> 00:03:23,763 ‫So the rest here is exactly the same. 47 00:03:26,190 --> 00:03:28,743 ‫Let's just grab that here and here. 48 00:03:29,820 --> 00:03:32,703 ‫Bookings could not be loaded. 49 00:03:33,570 --> 00:03:36,930 ‫So we want to get this data right here 50 00:03:36,930 --> 00:03:38,790 ‫into a bookings table. 51 00:03:38,790 --> 00:03:43,350 ‫And that bookings table should be here on the bookings page. 52 00:03:43,350 --> 00:03:45,720 ‫So let's start with that one. 53 00:03:45,720 --> 00:03:48,753 ‫So here in pages we get to bookings, 54 00:03:49,710 --> 00:03:53,100 ‫and then in the bookings folder here, 55 00:03:53,100 --> 00:03:55,560 ‫we actually already have the table. 56 00:03:55,560 --> 00:03:58,203 ‫And so let's just include that here. 57 00:03:59,958 --> 00:04:01,291 ‫So BookingTable. 58 00:04:04,410 --> 00:04:06,990 ‫And here we don't need to wrap this into a row 59 00:04:06,990 --> 00:04:10,263 ‫because we don't need there to be anything else. 60 00:04:13,430 --> 00:04:14,763 ‫So BookingTable, 61 00:04:17,700 --> 00:04:19,233 ‫and here as well. 62 00:04:20,604 --> 00:04:23,763 ‫And then features, 63 00:04:26,250 --> 00:04:27,573 ‫just like this. 64 00:04:29,460 --> 00:04:30,810 ‫Now, right? 65 00:04:30,810 --> 00:04:35,810 ‫Then here of course, we need to now return a fragment. 66 00:04:38,670 --> 00:04:39,873 ‫And, there we go. 67 00:04:41,100 --> 00:04:44,793 ‫So this is our table, and so let's go check it out. 68 00:04:46,410 --> 00:04:49,380 ‫So here we have, for now, this empty bookings array 69 00:04:49,380 --> 00:04:53,397 ‫which is the reason why here it says, "No data to show." 70 00:04:55,020 --> 00:04:58,890 ‫Then here, we again are using the table component 71 00:04:58,890 --> 00:05:01,380 ‫that we created in the earlier section. 72 00:05:01,380 --> 00:05:05,610 ‫And then here, this time, we have the name of the cabin. 73 00:05:05,610 --> 00:05:07,920 ‫So the cabin that the booking belongs to. 74 00:05:07,920 --> 00:05:10,080 ‫We will have the guest, the dates, 75 00:05:10,080 --> 00:05:11,850 ‫the status of the booking, 76 00:05:11,850 --> 00:05:14,370 ‫and the amount that the user paid. 77 00:05:14,370 --> 00:05:18,390 ‫And then again here, one column for the operations. 78 00:05:18,390 --> 00:05:22,050 ‫And then we also have here the Table Body, 79 00:05:22,050 --> 00:05:25,353 ‫which will simply render the array of bookings. 80 00:05:27,000 --> 00:05:29,310 ‫And of course, the columns here are different 81 00:05:29,310 --> 00:05:30,750 ‫than what we had before, 82 00:05:30,750 --> 00:05:32,820 ‫but I just fine tuned them here 83 00:05:32,820 --> 00:05:34,470 ‫so that they fit the data 84 00:05:34,470 --> 00:05:36,453 ‫that we will want to display there. 85 00:05:37,410 --> 00:05:39,480 ‫Now, one thing I actually want to do here 86 00:05:39,480 --> 00:05:41,940 ‫which is that when there is no data, 87 00:05:41,940 --> 00:05:44,340 ‫then we want to not even show the table, 88 00:05:44,340 --> 00:05:48,303 ‫but this empty component that I have here. 89 00:05:50,190 --> 00:05:54,240 ‫So this one here, which takes in a resource name, 90 00:05:54,240 --> 00:05:57,030 ‫and then prints simply this string here. 91 00:05:57,030 --> 00:06:00,127 ‫Let's actually call this resourceName. 92 00:06:01,650 --> 00:06:06,650 ‫And then, well, now I closed the table apparently. 93 00:06:08,910 --> 00:06:13,910 ‫So here, let's just say if there is no bookings 94 00:06:14,580 --> 00:06:16,800 ‫because this can of course happen, 95 00:06:16,800 --> 00:06:19,600 ‫then return Empty 96 00:06:21,360 --> 00:06:24,100 ‫with the resource name 97 00:06:28,590 --> 00:06:29,853 ‫of bookings. 98 00:06:37,890 --> 00:06:38,723 ‫All right? 99 00:06:38,723 --> 00:06:43,290 ‫Now here, that needs to be bookings.length, of course. 100 00:06:43,290 --> 00:06:45,630 ‫And so, there we go. 101 00:06:45,630 --> 00:06:49,410 ‫We could have styled that a little bit better, 102 00:06:49,410 --> 00:06:50,850 ‫but that also works. 103 00:06:50,850 --> 00:06:53,340 ‫Now I just want to quickly add the same thing here 104 00:06:53,340 --> 00:06:54,933 ‫to the CabinTable. 105 00:06:59,250 --> 00:07:03,003 ‫So maybe here we can automatically import that. Yes. 106 00:07:05,460 --> 00:07:08,823 ‫And then, there we go. 107 00:07:10,830 --> 00:07:15,240 ‫Next up, we now need to basically connect this table here 108 00:07:15,240 --> 00:07:20,160 ‫with this getBookings function that we have, right? 109 00:07:20,160 --> 00:07:22,770 ‫And the way that we are going to do this, 110 00:07:22,770 --> 00:07:26,430 ‫so the way in which we are going to fetch these bookings 111 00:07:26,430 --> 00:07:29,073 ‫is, again, using React Query. 112 00:07:30,240 --> 00:07:35,240 ‫So let's grab this useCabin here, and just copy paste that. 113 00:07:36,750 --> 00:07:37,770 ‫So if you want it, 114 00:07:37,770 --> 00:07:41,760 ‫you can of course now, to practice React Query, 115 00:07:41,760 --> 00:07:46,760 ‫write this here on your own, but I will just keep this here, 116 00:07:47,220 --> 00:07:49,323 ‫and only change what I really need. 117 00:07:50,160 --> 00:07:55,140 ‫So here the data is gonna be called bookings, 118 00:07:55,140 --> 00:07:57,840 ‫the queryKey also. 119 00:07:57,840 --> 00:08:02,670 ‫So the name inside the React-Query cache. 120 00:08:02,670 --> 00:08:04,597 ‫And then here, getBookings. 121 00:08:06,930 --> 00:08:11,930 ‫Delete this. And here it's also bookings. 122 00:08:12,060 --> 00:08:13,093 ‫And, there we go. 123 00:08:15,177 --> 00:08:19,173 ‫And so now in here, we no longer need that, 124 00:08:20,100 --> 00:08:25,100 ‫but instead we will get bookings and isLoading state 125 00:08:27,750 --> 00:08:29,443 ‫from useBookings. 126 00:08:36,720 --> 00:08:39,813 ‫Okay? Then we also need to import that, apparently. 127 00:08:44,877 --> 00:08:49,050 ‫UseBookings, and here, this is a named export 128 00:08:49,050 --> 00:08:50,613 ‫since this is a React hook. 129 00:08:53,940 --> 00:08:57,810 ‫And then apparently, yeah, here we need to change this name 130 00:08:57,810 --> 00:08:59,043 ‫of course, as well. 131 00:09:00,267 --> 00:09:01,560 ‫UseBookings. 132 00:09:01,560 --> 00:09:04,830 ‫That's why the automatic import also didn't work earlier 133 00:09:04,830 --> 00:09:06,510 ‫on the table. 134 00:09:06,510 --> 00:09:08,760 ‫And now here, if this is loading, 135 00:09:08,760 --> 00:09:12,120 ‫we also need to return something else. 136 00:09:12,120 --> 00:09:17,023 ‫So if it is loading, then return the Spinner. 137 00:09:20,910 --> 00:09:24,030 ‫Now, that seems to be almost working already, 138 00:09:24,030 --> 00:09:26,163 ‫but here we will have some problems, 139 00:09:27,780 --> 00:09:30,720 ‫and the reason for that will be clear in a minute. 140 00:09:30,720 --> 00:09:35,270 ‫So for now, let's comment out this part here 141 00:09:35,270 --> 00:09:36,490 ‫of the table body 142 00:09:38,220 --> 00:09:40,680 ‫so we can actually take a look at our data 143 00:09:40,680 --> 00:09:43,383 ‫here in the React Query devtools. 144 00:09:44,490 --> 00:09:47,433 ‫And probably we won't have any data here yet, even, 145 00:09:49,080 --> 00:09:51,150 ‫or maybe we do. 146 00:09:51,150 --> 00:09:52,860 ‫Yeah, actually we have. 147 00:09:52,860 --> 00:09:54,360 ‫So I thought we didn't have 148 00:09:54,360 --> 00:09:58,530 ‫the role-level security policy enabled yet, 149 00:09:58,530 --> 00:10:00,480 ‫but apparently we do. 150 00:10:00,480 --> 00:10:03,000 ‫And so we do get here the two arrays 151 00:10:03,000 --> 00:10:06,033 ‫with the two bookings that we already have. 152 00:10:07,170 --> 00:10:09,060 ‫Now, the thing is that here we have 153 00:10:09,060 --> 00:10:11,605 ‫the cabin ID and the guest ID 154 00:10:11,605 --> 00:10:16,605 ‫exactly as we have them right here on Supabase, right? 155 00:10:17,130 --> 00:10:19,410 ‫However, here in our table, 156 00:10:19,410 --> 00:10:21,960 ‫we actually want to display some more information 157 00:10:21,960 --> 00:10:23,370 ‫about that guest. 158 00:10:23,370 --> 00:10:27,150 ‫So, of course, not the guest ID or the cabin ID, 159 00:10:27,150 --> 00:10:29,670 ‫but instead really the cabin name, 160 00:10:29,670 --> 00:10:32,640 ‫and here also the name of the guest, 161 00:10:32,640 --> 00:10:35,073 ‫and maybe even the email address. 162 00:10:36,300 --> 00:10:40,950 ‫So in other words, we don't just need these IDs here, 163 00:10:40,950 --> 00:10:44,790 ‫but really the data that belongs to this cabin ID 164 00:10:44,790 --> 00:10:49,790 ‫with this number and to the guest ID number two now, right? 165 00:10:50,610 --> 00:10:54,690 ‫So, we need to not only load the data about this booking, 166 00:10:54,690 --> 00:10:58,770 ‫but also about this cabin, and this guest. 167 00:10:58,770 --> 00:11:01,290 ‫So that sounds quite complicated, 168 00:11:01,290 --> 00:11:02,940 ‫but fortunately for us, 169 00:11:02,940 --> 00:11:06,360 ‫the Supabase API is really flexible 170 00:11:06,360 --> 00:11:08,673 ‫and can easily do all of that. 171 00:11:09,750 --> 00:11:12,480 ‫So right here where we select, 172 00:11:12,480 --> 00:11:15,660 ‫right now we are selecting everything, right? 173 00:11:15,660 --> 00:11:19,770 ‫But here we now need to actually add some more things. 174 00:11:19,770 --> 00:11:22,260 ‫So we need to add this comma here, 175 00:11:22,260 --> 00:11:24,360 ‫and all inside the string. 176 00:11:24,360 --> 00:11:27,300 ‫And then we need to use the name of the tables 177 00:11:27,300 --> 00:11:29,160 ‫that we are referencing. 178 00:11:29,160 --> 00:11:31,473 ‫So that's cabin and guests. 179 00:11:33,420 --> 00:11:37,320 ‫So here we have this cabin foreign table. 180 00:11:37,320 --> 00:11:38,430 ‫And so then here, 181 00:11:38,430 --> 00:11:41,850 ‫we want to select everything from that table. 182 00:11:41,850 --> 00:11:44,073 ‫And then, let's use another comma, 183 00:11:45,000 --> 00:11:50,000 ‫and then, let's select everything also from the guests. 184 00:11:50,850 --> 00:11:51,813 ‫Give it a save. 185 00:11:52,980 --> 00:11:57,980 ‫And as we try this again, we get some error again. 186 00:11:59,370 --> 00:12:02,103 ‫So here, search for a foreign key. 187 00:12:03,000 --> 00:12:06,150 ‫You mean cabins? Ah. Right. 188 00:12:06,150 --> 00:12:08,013 ‫So here, it's called cabins. 189 00:12:09,450 --> 00:12:12,123 ‫So let's force a reload here. 190 00:12:13,290 --> 00:12:17,130 ‫Then, let's see again. And, beautiful. 191 00:12:17,130 --> 00:12:20,130 ‫So now we no longer have just the IDs, 192 00:12:20,130 --> 00:12:22,653 ‫but really, also this data itself. 193 00:12:23,670 --> 00:12:25,170 ‫So now we get cabins, 194 00:12:25,170 --> 00:12:28,320 ‫and then exactly the data about that cabin, 195 00:12:28,320 --> 00:12:30,333 ‫and the same with the guest. 196 00:12:32,610 --> 00:12:35,820 ‫Great. However, to display the data 197 00:12:35,820 --> 00:12:37,410 ‫that we want here in the table, 198 00:12:37,410 --> 00:12:40,530 ‫we actually don't need all of this here. 199 00:12:40,530 --> 00:12:42,390 ‫So instead of grabbing everything, 200 00:12:42,390 --> 00:12:46,440 ‫we can really only take the fields that we actually need. 201 00:12:46,440 --> 00:12:50,160 ‫And so here, we can, instead of writing the star, 202 00:12:50,160 --> 00:12:54,060 ‫just write the fields, or the column name. 203 00:12:54,060 --> 00:12:57,240 ‫So for the cabins, we really only need the name. 204 00:12:57,240 --> 00:12:58,500 ‫And for the guests, 205 00:12:58,500 --> 00:13:03,500 ‫we only need the full name and the email address. 206 00:13:04,920 --> 00:13:07,710 ‫And so by doing this, we reduce the amount 207 00:13:07,710 --> 00:13:11,160 ‫of unnecessary data that needs to be downloaded. 208 00:13:11,160 --> 00:13:14,310 ‫So that might not be a huge problem in this case, 209 00:13:14,310 --> 00:13:16,680 ‫but if we were loading hundreds of rows 210 00:13:16,680 --> 00:13:18,240 ‫in some other application, 211 00:13:18,240 --> 00:13:19,680 ‫then it might be good to know 212 00:13:19,680 --> 00:13:24,060 ‫that here we can basically just limit the downloaded data 213 00:13:24,060 --> 00:13:25,800 ‫to what we actually need. 214 00:13:25,800 --> 00:13:28,200 ‫And here we can do the same thing. 215 00:13:28,200 --> 00:13:33,200 ‫So we can say we only need the ID, the created-at date. 216 00:13:34,500 --> 00:13:37,773 ‫We need the startDate, the endDate, 217 00:13:41,460 --> 00:13:46,460 ‫the number of nights, the number of guests, 218 00:13:51,150 --> 00:13:54,450 ‫the status, and the totalPrice. 219 00:13:54,450 --> 00:13:56,520 ‫And so you see that all of these here 220 00:13:56,520 --> 00:13:59,100 ‫are separated by these commas. 221 00:13:59,100 --> 00:14:02,853 ‫So that's why then later, we also have these commas here. 222 00:14:04,710 --> 00:14:07,830 ‫So here to then separate 223 00:14:07,830 --> 00:14:11,610 ‫between these fields and the cabins, and the guests. 224 00:14:11,610 --> 00:14:14,973 ‫So again, these two foreign tables right here. 225 00:14:15,840 --> 00:14:17,433 ‫So, let's see. 226 00:14:20,760 --> 00:14:24,000 ‫And indeed, this looks a lot shorter. 227 00:14:24,000 --> 00:14:26,310 ‫And here, indeed, we only get the name, 228 00:14:26,310 --> 00:14:30,663 ‫and then the user's, or the guest's, relevant data as well. 229 00:14:31,590 --> 00:14:35,310 ‫Beautiful. So, very important part right here 230 00:14:35,310 --> 00:14:36,963 ‫in working with Supabase. 231 00:14:38,826 --> 00:14:41,767 ‫Now, okay, now here in the booking row, 232 00:14:42,690 --> 00:14:45,693 ‫all we are doing is to then display the data. 233 00:14:46,590 --> 00:14:51,590 ‫So first off, here we get this booking prop, 234 00:14:51,900 --> 00:14:53,730 ‫which we are passing in right here. 235 00:14:53,730 --> 00:14:56,850 ‫So this booking row only takes this booking prop. 236 00:14:56,850 --> 00:14:57,750 ‫And so then here, 237 00:14:57,750 --> 00:15:02,130 ‫I'm actually immediately destructuring even that object. 238 00:15:02,130 --> 00:15:04,503 ‫So instead of creating this right here, 239 00:15:05,940 --> 00:15:09,900 ‫like const, startDate, and so on, and so forth, 240 00:15:09,900 --> 00:15:12,990 ‫I'm doing that, again, right here. 241 00:15:12,990 --> 00:15:16,650 ‫And then, I'm even destructuring already the guests. 242 00:15:16,650 --> 00:15:19,950 ‫And so then, basically, all these orange ones here 243 00:15:19,950 --> 00:15:24,183 ‫are the actual variable names that have been created. 244 00:15:25,350 --> 00:15:27,240 ‫Then this thing that I have here 245 00:15:27,240 --> 00:15:31,830 ‫is just to basically convert the status to a color. 246 00:15:31,830 --> 00:15:34,080 ‫So the unconfirmed status is blue, 247 00:15:34,080 --> 00:15:35,850 ‫the checked-in status is green, 248 00:15:35,850 --> 00:15:38,370 ‫and the checked-out status is silver 249 00:15:38,370 --> 00:15:40,050 ‫which will then become important 250 00:15:40,050 --> 00:15:42,570 ‫because for each of the bookings, 251 00:15:42,570 --> 00:15:46,350 ‫we have this tech component right here. 252 00:15:46,350 --> 00:15:48,573 ‫So I can just open that for you. 253 00:15:49,770 --> 00:15:52,260 ‫And so basically, these are dynamic 254 00:15:52,260 --> 00:15:54,180 ‫based on the received props. 255 00:15:54,180 --> 00:15:57,570 ‫So here we then use a CSS variable with the color 256 00:15:57,570 --> 00:16:02,280 ‫that has been passed in coming from the status to name. 257 00:16:02,280 --> 00:16:05,310 ‫So again, these blue, green, or silver colors 258 00:16:05,310 --> 00:16:06,933 ‫instead of hard-coding them. 259 00:16:09,390 --> 00:16:13,530 ‫Okay, so let's actually activate this. 260 00:16:13,530 --> 00:16:17,070 ‫And of course, all this pre-built code is necessary 261 00:16:17,070 --> 00:16:19,320 ‫so that we don't take a hundred hours 262 00:16:19,320 --> 00:16:20,793 ‫developing this project. 263 00:16:23,640 --> 00:16:27,810 ‫But anyway, now here is our beautiful table. 264 00:16:27,810 --> 00:16:32,100 ‫We cannot really see, yeah, but like this, 265 00:16:32,100 --> 00:16:35,550 ‫this is what the table is going to look like. 266 00:16:35,550 --> 00:16:38,940 ‫Let's maybe make one of these bookings here checked-in 267 00:16:38,940 --> 00:16:40,770 ‫so we see the different colors 268 00:16:40,770 --> 00:16:42,783 ‫that I was just talking about earlier. 269 00:16:44,340 --> 00:16:47,670 ‫So this is one of the three possible statuses. 270 00:16:47,670 --> 00:16:49,650 ‫And so, as we come back here, 271 00:16:49,650 --> 00:16:53,280 ‫React Query automatically refetches the data, 272 00:16:53,280 --> 00:16:54,477 ‫as we already know. 273 00:16:54,477 --> 00:16:57,900 ‫And then here, this tag becomes green. 274 00:16:57,900 --> 00:16:58,733 ‫And of course, 275 00:16:58,733 --> 00:17:02,190 ‫we still get all the other benefits of React Query 276 00:17:02,190 --> 00:17:04,680 ‫which is that if we move to another page, 277 00:17:04,680 --> 00:17:05,850 ‫and then come back, 278 00:17:05,850 --> 00:17:08,553 ‫all our data will still be here. 279 00:17:09,720 --> 00:17:12,180 ‫So with this, we quickly created 280 00:17:12,180 --> 00:17:15,240 ‫this really beautiful table right here. 281 00:17:15,240 --> 00:17:19,500 ‫And if all of that was a bit too quick for you, 282 00:17:19,500 --> 00:17:22,560 ‫then please feel free to check out all this code 283 00:17:22,560 --> 00:17:24,340 ‫that I had to pre-build here 284 00:17:25,410 --> 00:17:28,170 ‫including all of these functions here. 285 00:17:28,170 --> 00:17:30,870 ‫And yeah, again, maybe this tag. 286 00:17:30,870 --> 00:17:33,180 ‫And so, by then, it'll make sense 287 00:17:33,180 --> 00:17:35,553 ‫why the table looks this way. 288 00:17:37,890 --> 00:17:39,690 ‫Now, once you're done with that, 289 00:17:39,690 --> 00:17:42,360 ‫we then also want to implement, up here, 290 00:17:42,360 --> 00:17:45,330 ‫the filtering and sorting again. 291 00:17:45,330 --> 00:17:47,190 ‫But before we go do that, 292 00:17:47,190 --> 00:17:49,980 ‫let's actually first load some simple data 293 00:17:49,980 --> 00:17:51,480 ‫into our application 294 00:17:51,480 --> 00:17:54,150 ‫so that we have a bit more to work with 295 00:17:54,150 --> 00:17:56,163 ‫than just these two bookings.