1 00:00:01,170 --> 00:00:04,680 ‫Now it's time to leave the modal window behind 2 00:00:04,680 --> 00:00:08,970 ‫and have some more fun with the compound component pattern 3 00:00:08,970 --> 00:00:12,663 ‫by building a reusable table component. 4 00:00:14,190 --> 00:00:19,190 ‫But first off, let's fix a small buck in our cabin row. 5 00:00:19,410 --> 00:00:24,410 ‫So here we forgot to name the window and the open button. 6 00:00:25,110 --> 00:00:27,820 ‫So here this one is called delete 7 00:00:28,830 --> 00:00:32,370 ‫and the other one then opens delete. 8 00:00:32,370 --> 00:00:35,493 ‫Now this didn't change the functionality at all, 9 00:00:36,450 --> 00:00:38,700 ‫but just for the sake of completion, 10 00:00:38,700 --> 00:00:40,410 ‫let's leave it like this. 11 00:00:40,410 --> 00:00:44,490 ‫So if we had another modal window without these props, 12 00:00:44,490 --> 00:00:46,800 ‫then they both wouldn't work, 13 00:00:46,800 --> 00:00:49,500 ‫but if it's only one without anything, 14 00:00:49,500 --> 00:00:52,743 ‫then the name basically just gets undefined. 15 00:00:54,150 --> 00:00:56,580 ‫All right, so let's close this 16 00:00:56,580 --> 00:01:00,513 ‫and let's turn our attention to the cabin table. 17 00:01:02,070 --> 00:01:07,070 ‫So basically, right now, this table is really not reusable, 18 00:01:07,740 --> 00:01:09,660 ‫like we have, for example, 19 00:01:09,660 --> 00:01:14,660 ‫like, these grid columns hardcoded right in the header, 20 00:01:14,700 --> 00:01:18,420 ‫and I guess also in the row. 21 00:01:18,420 --> 00:01:21,360 ‫So, but we just closed. 22 00:01:21,360 --> 00:01:26,360 ‫So here we have the exact same columns again, 23 00:01:26,580 --> 00:01:30,510 ‫so in both places and they are really this hardcoded. 24 00:01:30,510 --> 00:01:34,470 ‫So this is going to make it really hard to reuse this table 25 00:01:34,470 --> 00:01:35,790 ‫for something else. 26 00:01:35,790 --> 00:01:38,700 ‫For example, for the bookings. 27 00:01:38,700 --> 00:01:42,120 ‫So instead of having this table here, 28 00:01:42,120 --> 00:01:44,160 ‫instead it would be really nice 29 00:01:44,160 --> 00:01:47,520 ‫to simply pass the column definition 30 00:01:47,520 --> 00:01:49,740 ‫like this one into the table, 31 00:01:49,740 --> 00:01:52,020 ‫and then all of the rows in there, 32 00:01:52,020 --> 00:01:55,590 ‫and also the header would automatically get access 33 00:01:55,590 --> 00:01:58,320 ‫to the size of the columns. 34 00:01:58,320 --> 00:02:01,590 ‫So how could we do something like this? 35 00:02:01,590 --> 00:02:06,590 ‫Well, we can actually once again use a compound component. 36 00:02:06,960 --> 00:02:09,300 ‫So as I have mentioned earlier, 37 00:02:09,300 --> 00:02:11,460 ‫once you know about this pattern, 38 00:02:11,460 --> 00:02:15,240 ‫you will start seeing use cases for it everywhere. 39 00:02:15,240 --> 00:02:19,233 ‫So let's do another one here with this table. 40 00:02:20,430 --> 00:02:25,430 ‫Now we already have our styled written in our table.JSX. 41 00:02:28,350 --> 00:02:32,730 ‫So we have already the styled table itself. 42 00:02:32,730 --> 00:02:35,790 ‫Then we have a styled header and the styled row, 43 00:02:35,790 --> 00:02:40,790 ‫which are basically based on this common row component here. 44 00:02:41,040 --> 00:02:42,810 ‫So that's what we have there, 45 00:02:42,810 --> 00:02:45,330 ‫and we have a styled body, footer, 46 00:02:45,330 --> 00:02:48,450 ‫and even an empty element, and so here 47 00:02:48,450 --> 00:02:52,173 ‫is where we will now build our compound component. 48 00:02:53,040 --> 00:02:58,040 ‫So that is going to be called just table. 49 00:02:59,880 --> 00:03:00,960 ‫And in the end, 50 00:03:00,960 --> 00:03:05,463 ‫let's then also immediately export default debt. 51 00:03:07,890 --> 00:03:11,400 ‫So let's come back here to our cabin table. 52 00:03:11,400 --> 00:03:15,540 ‫Let's actually close this and once again duplicate it, 53 00:03:15,540 --> 00:03:19,383 ‫'cause we will do quite some changes here again. 54 00:03:20,790 --> 00:03:25,380 ‫So version 2, and we will work then on this one, 55 00:03:25,380 --> 00:03:29,490 ‫and so now here we want to replace this table that we have 56 00:03:29,490 --> 00:03:32,313 ‫with the one that we are building right here. 57 00:03:33,810 --> 00:03:37,180 ‫So we can get rid of this one 58 00:03:38,430 --> 00:03:41,403 ‫and instead use that other table. 59 00:03:44,820 --> 00:03:46,890 ‫Now, this will, of course, break everything 60 00:03:46,890 --> 00:03:49,860 ‫because that table doesn't do anything yet, 61 00:03:49,860 --> 00:03:51,423 ‫but that's no problem. 62 00:03:52,680 --> 00:03:56,250 ‫So the role we can also get rid of for now, 63 00:03:56,250 --> 00:03:58,680 ‫and so what we were saying in the beginning 64 00:03:58,680 --> 00:04:01,050 ‫is that what we want is to pass 65 00:04:01,050 --> 00:04:04,650 ‫in the column definition right into this table 66 00:04:04,650 --> 00:04:09,120 ‫so that then we can use that on all the child components. 67 00:04:09,120 --> 00:04:11,520 ‫So let's do that. 68 00:04:11,520 --> 00:04:14,130 ‫Let's call that prop columns, 69 00:04:14,130 --> 00:04:16,470 ‫and then let's just make it a string, 70 00:04:16,470 --> 00:04:18,813 ‫and exactly this one right here. 71 00:04:21,120 --> 00:04:23,550 ‫So basically we're gonna take advantage 72 00:04:23,550 --> 00:04:26,820 ‫of the way that CSS grid represents columns 73 00:04:26,820 --> 00:04:28,113 ‫and use that here. 74 00:04:30,322 --> 00:04:34,407 ‫And so then here we will want to use a table.header. 75 00:04:39,120 --> 00:04:42,510 ‫Then here, for now, let's leave it like this, 76 00:04:42,510 --> 00:04:47,193 ‫and in the cabin row we will want to use then a table.row. 77 00:04:48,150 --> 00:04:51,570 ‫So right here, 78 00:04:51,570 --> 00:04:53,103 ‫get rid of all of this. 79 00:04:54,780 --> 00:04:59,553 ‫So importing the table and then again table.row, 80 00:05:01,500 --> 00:05:02,670 ‫just like this, 81 00:05:02,670 --> 00:05:05,913 ‫and then we can get rid of the one that we already have. 82 00:05:07,140 --> 00:05:09,030 ‫So let's just comment this out, 83 00:05:09,030 --> 00:05:13,530 ‫and so with this, we then duplicate this duplicate logic 84 00:05:13,530 --> 00:05:15,720 ‫of defining the columns. 85 00:05:15,720 --> 00:05:18,750 ‫So we have that now in one central place, 86 00:05:18,750 --> 00:05:20,460 ‫which is in this table, 87 00:05:20,460 --> 00:05:25,140 ‫and so let's go there and actually accept that. 88 00:05:25,140 --> 00:05:29,490 ‫So the columns and, of course, also the children, 89 00:05:29,490 --> 00:05:32,913 ‫'cause otherwise we can then not display them. 90 00:05:34,560 --> 00:05:38,550 ‫So we're gonna have a child component called header, 91 00:05:38,550 --> 00:05:39,873 ‫as we already saw. 92 00:05:40,710 --> 00:05:43,800 ‫So this one also needs to take in the children. 93 00:05:43,800 --> 00:05:48,800 ‫Then we will have a row, 94 00:05:48,990 --> 00:05:52,770 ‫and also a body, 95 00:05:52,770 --> 00:05:56,883 ‫and even a footer, but a footer, let's do it differently. 96 00:05:58,020 --> 00:06:01,710 ‫So then let's also again define them right here. 97 00:06:01,710 --> 00:06:06,647 ‫So table.header is the headertable.body 98 00:06:10,710 --> 00:06:14,533 ‫is the body component, table.row 99 00:06:17,580 --> 00:06:22,023 ‫is our row component. 100 00:06:22,860 --> 00:06:26,350 ‫And finally, table.footer can be 101 00:06:27,780 --> 00:06:30,810 ‫just the footer component that we have here. 102 00:06:30,810 --> 00:06:32,970 ‫So just the styled component 103 00:06:32,970 --> 00:06:36,450 ‫because we don't need to add any logic to this one. 104 00:06:36,450 --> 00:06:38,643 ‫So the footer has no columns. 105 00:06:39,900 --> 00:06:44,130 ‫So the ones that do have columns is the header and the row, 106 00:06:44,130 --> 00:06:47,340 ‫and so now we need to give these two components here 107 00:06:47,340 --> 00:06:49,380 ‫access to these columns, 108 00:06:49,380 --> 00:06:52,770 ‫and so, since we are using a compound component, 109 00:06:52,770 --> 00:06:55,533 ‫you already know how that's gonna work. 110 00:06:56,550 --> 00:07:01,530 ‫So we will create a table context here. 111 00:07:04,380 --> 00:07:07,503 ‫So create context. 112 00:07:09,870 --> 00:07:13,563 ‫And then here, all we will do is to return that, 113 00:07:14,760 --> 00:07:18,540 ‫so tablecontext.provider, 114 00:07:18,540 --> 00:07:22,380 ‫where the value is simply going to be an object 115 00:07:22,380 --> 00:07:23,523 ‫with these columns, 116 00:07:25,410 --> 00:07:29,373 ‫and then here we return the styled table. 117 00:07:32,220 --> 00:07:36,003 ‫And then in there is where all the children will live. 118 00:07:37,800 --> 00:07:42,120 ‫So this style table we, of course, already have here, 119 00:07:42,120 --> 00:07:44,193 ‫and so it simply gives a few, 120 00:07:45,180 --> 00:07:47,577 ‫actually it's not even that one, so it's here 121 00:07:47,577 --> 00:07:52,577 ‫and it gives, yeah, just some base styles there. 122 00:07:54,120 --> 00:07:59,120 ‫So here, let's then also give it the role of the table, 123 00:08:00,480 --> 00:08:04,740 ‫so for accessibility reasons, as we discussed earlier, 124 00:08:04,740 --> 00:08:09,450 ‫and then here we can give this access to the columns 125 00:08:09,450 --> 00:08:12,120 ‫through the use context hook. 126 00:08:12,120 --> 00:08:17,120 ‫So const, columns, use, context, 127 00:08:17,610 --> 00:08:21,000 ‫and then table, context, 128 00:08:21,000 --> 00:08:25,380 ‫and then here all we do is to return 129 00:08:25,380 --> 00:08:29,220 ‫the styled header component that we already have, 130 00:08:29,220 --> 00:08:33,420 ‫then here we also give it the role of a row, 131 00:08:33,420 --> 00:08:37,923 ‫and most importantly, then here we pass in the columns prop. 132 00:08:42,660 --> 00:08:47,660 ‫All right, and then we pass the children. 133 00:08:48,630 --> 00:08:52,710 ‫So the important part here is this column's prop. 134 00:08:52,710 --> 00:08:55,200 ‫So let's go to the styled header 135 00:08:55,200 --> 00:08:57,243 ‫and see what that actually does. 136 00:08:59,610 --> 00:09:01,290 ‫And here we are. 137 00:09:01,290 --> 00:09:05,010 ‫So this is built based on the common row. 138 00:09:05,010 --> 00:09:07,200 ‫Let's go there, and so indeed, 139 00:09:07,200 --> 00:09:10,680 ‫here is where the grid template rows are defined, 140 00:09:10,680 --> 00:09:14,400 ‫and so they will come from props.columns. 141 00:09:14,400 --> 00:09:19,400 ‫So it's going to be that string that we pass here, 142 00:09:19,560 --> 00:09:22,440 ‫so we pass this into the table, 143 00:09:22,440 --> 00:09:25,770 ‫then that table receives it as the prop 144 00:09:25,770 --> 00:09:28,170 ‫and passes it into the context, 145 00:09:28,170 --> 00:09:31,560 ‫so then all the child elements can read that value 146 00:09:31,560 --> 00:09:33,810 ‫from the context and then pass it 147 00:09:33,810 --> 00:09:35,913 ‫into their styled component. 148 00:09:38,790 --> 00:09:41,760 ‫Okay, so hopefully that makes sense. 149 00:09:41,760 --> 00:09:44,760 ‫And so with this, we can do exactly the same thing 150 00:09:44,760 --> 00:09:47,730 ‫with the row, with the difference that here, 151 00:09:47,730 --> 00:09:50,043 ‫it is the styled row, 152 00:09:51,270 --> 00:09:56,270 ‫then the body, let's leave for later, and then let's reload 153 00:09:56,580 --> 00:09:59,340 ‫and see what kind of error we got there. 154 00:09:59,340 --> 00:10:02,610 ‫And well, apparently no error at all. 155 00:10:02,610 --> 00:10:06,390 ‫So it is already working apparently. 156 00:10:06,390 --> 00:10:08,910 ‫Let's just check out the markup here, 157 00:10:08,910 --> 00:10:13,053 ‫just to see if we actually have the correct roles set up. 158 00:10:16,590 --> 00:10:19,680 ‫And indeed the whole thing here is a table, 159 00:10:19,680 --> 00:10:21,720 ‫then this header is a row, 160 00:10:21,720 --> 00:10:25,350 ‫and then the other ones are also rows. 161 00:10:25,350 --> 00:10:30,210 ‫Great. Now maybe we can make this here as a header. 162 00:10:30,210 --> 00:10:32,730 ‫So let's try that. 163 00:10:32,730 --> 00:10:34,740 ‫I'm not even sure if that's gonna work, 164 00:10:34,740 --> 00:10:37,533 ‫but we can use the S prop, remember. 165 00:10:38,430 --> 00:10:42,240 ‫So here we can then change the HTML element. 166 00:10:42,240 --> 00:10:43,073 ‫So let's see. 167 00:10:45,240 --> 00:10:49,803 ‫So now that's gone again for some reason. 168 00:10:51,030 --> 00:10:53,940 ‫And indeed, now that became a header. 169 00:10:53,940 --> 00:10:56,160 ‫So that's then a bit more semantic again, 170 00:10:56,160 --> 00:11:00,240 ‫so making this here the header of the table. 171 00:11:00,240 --> 00:11:02,103 ‫So just as a nice experiment. 172 00:11:03,090 --> 00:11:08,090 ‫All right, and so this is working just great, 173 00:11:08,670 --> 00:11:12,660 ‫and it's ready to be reused in other tables as well. 174 00:11:12,660 --> 00:11:15,600 ‫Let's just do some experiment here. 175 00:11:15,600 --> 00:11:18,840 ‫So if we change this, then indeed, 176 00:11:18,840 --> 00:11:21,843 ‫this last column here gets a lot more space. 177 00:11:22,830 --> 00:11:27,360 ‫So exactly like we wanted, it changes both in the header 178 00:11:27,360 --> 00:11:30,333 ‫and in each individual table row as well. 179 00:11:31,770 --> 00:11:34,140 ‫Now the only thing that's left to do 180 00:11:34,140 --> 00:11:36,030 ‫is the actual table row, 181 00:11:36,030 --> 00:11:39,330 ‫which will basically sit right here. 182 00:11:39,330 --> 00:11:42,723 ‫And so let's actually leave that for the next lecture.