‫Now it's time to leave the modal window behind
‫and have some more fun with the compound component pattern
‫by building a reusable table component.
‫But first off, let's fix a small buck in our cabin row.
‫So here we forgot to name the window and the open button.
‫So here this one is called delete
‫and the other one then opens delete.
‫Now this didn't change the functionality at all,
‫but just for the sake of completion,
‫let's leave it like this.
‫So if we had another modal window without these props,
‫then they both wouldn't work,
‫but if it's only one without anything,
‫then the name basically just gets undefined.
‫All right, so let's close this
‫and let's turn our attention to the cabin table.
‫So basically, right now, this table is really not reusable,
‫like we have, for example,
‫like, these grid columns hardcoded right in the header,
‫and I guess also in the row.
‫So, but we just closed.
‫So here we have the exact same columns again,
‫so in both places and they are really this hardcoded.
‫So this is going to make it really hard to reuse this table
‫for something else.
‫For example, for the bookings.
‫So instead of having this table here,
‫instead it would be really nice
‫to simply pass the column definition
‫like this one into the table,
‫and then all of the rows in there,
‫and also the header would automatically get access
‫to the size of the columns.
‫So how could we do something like this?
‫Well, we can actually once again use a compound component.
‫So as I have mentioned earlier,
‫once you know about this pattern,
‫you will start seeing use cases for it everywhere.
‫So let's do another one here with this table.
‫Now we already have our styled written in our table.JSX.
‫So we have already the styled table itself.
‫Then we have a styled header and the styled row,
‫which are basically based on this common row component here.
‫So that's what we have there,
‫and we have a styled body, footer,
‫and even an empty element, and so here
‫is where we will now build our compound component.
‫So that is going to be called just table.
‫And in the end,
‫let's then also immediately export default debt.
‫So let's come back here to our cabin table.
‫Let's actually close this and once again duplicate it,
‫'cause we will do quite some changes here again.
‫So version 2, and we will work then on this one,
‫and so now here we want to replace this table that we have
‫with the one that we are building right here.
‫So we can get rid of this one
‫and instead use that other table.
‫Now, this will, of course, break everything
‫because that table doesn't do anything yet,
‫but that's no problem.
‫So the role we can also get rid of for now,
‫and so what we were saying in the beginning
‫is that what we want is to pass
‫in the column definition right into this table
‫so that then we can use that on all the child components.
‫So let's do that.
‫Let's call that prop columns,
‫and then let's just make it a string,
‫and exactly this one right here.
‫So basically we're gonna take advantage
‫of the way that CSS grid represents columns
‫and use that here.
‫And so then here we will want to use a table.header.
‫Then here, for now, let's leave it like this,
‫and in the cabin row we will want to use then a table.row.
‫So right here,
‫get rid of all of this.
‫So importing the table and then again table.row,
‫just like this,
‫and then we can get rid of the one that we already have.
‫So let's just comment this out,
‫and so with this, we then duplicate this duplicate logic
‫of defining the columns.
‫So we have that now in one central place,
‫which is in this table,
‫and so let's go there and actually accept that.
‫So the columns and, of course, also the children,
‫'cause otherwise we can then not display them.
‫So we're gonna have a child component called header,
‫as we already saw.
‫So this one also needs to take in the children.
‫Then we will have a row,
‫and also a body,
‫and even a footer, but a footer, let's do it differently.
‫So then let's also again define them right here.
‫So table.header is the headertable.body
‫is the body component, table.row
‫is our row component.
‫And finally, table.footer can be
‫just the footer component that we have here.
‫So just the styled component
‫because we don't need to add any logic to this one.
‫So the footer has no columns.
‫So the ones that do have columns is the header and the row,
‫and so now we need to give these two components here
‫access to these columns,
‫and so, since we are using a compound component,
‫you already know how that's gonna work.
‫So we will create a table context here.
‫So create context.
‫And then here, all we will do is to return that,
‫so tablecontext.provider,
‫where the value is simply going to be an object
‫with these columns,
‫and then here we return the styled table.
‫And then in there is where all the children will live.
‫So this style table we, of course, already have here,
‫and so it simply gives a few,
‫actually it's not even that one, so it's here
‫and it gives, yeah, just some base styles there.
‫So here, let's then also give it the role of the table,
‫so for accessibility reasons, as we discussed earlier,
‫and then here we can give this access to the columns
‫through the use context hook.
‫So const, columns, use, context,
‫and then table, context,
‫and then here all we do is to return
‫the styled header component that we already have,
‫then here we also give it the role of a row,
‫and most importantly, then here we pass in the columns prop.
‫All right, and then we pass the children.
‫So the important part here is this column's prop.
‫So let's go to the styled header
‫and see what that actually does.
‫And here we are.
‫So this is built based on the common row.
‫Let's go there, and so indeed,
‫here is where the grid template rows are defined,
‫and so they will come from props.columns.
‫So it's going to be that string that we pass here,
‫so we pass this into the table,
‫then that table receives it as the prop
‫and passes it into the context,
‫so then all the child elements can read that value
‫from the context and then pass it
‫into their styled component.
‫Okay, so hopefully that makes sense.
‫And so with this, we can do exactly the same thing
‫with the row, with the difference that here,
‫it is the styled row,
‫then the body, let's leave for later, and then let's reload
‫and see what kind of error we got there.
‫And well, apparently no error at all.
‫So it is already working apparently.
‫Let's just check out the markup here,
‫just to see if we actually have the correct roles set up.
‫And indeed the whole thing here is a table,
‫then this header is a row,
‫and then the other ones are also rows.
‫Great. Now maybe we can make this here as a header.
‫So let's try that.
‫I'm not even sure if that's gonna work,
‫but we can use the S prop, remember.
‫So here we can then change the HTML element.
‫So let's see.
‫So now that's gone again for some reason.
‫And indeed, now that became a header.
‫So that's then a bit more semantic again,
‫so making this here the header of the table.
‫So just as a nice experiment.
‫All right, and so this is working just great,
‫and it's ready to be reused in other tables as well.
‫Let's just do some experiment here.
‫So if we change this, then indeed,
‫this last column here gets a lot more space.
‫So exactly like we wanted, it changes both in the header
‫and in each individual table row as well.
‫Now the only thing that's left to do
‫is the actual table row,
‫which will basically sit right here.
‫And so let's actually leave that for the next lecture.