Component Recipe: Data Table

[00:00:00]
>> So we kinda saw that with, we made the icon set, we put in our notification as well, we got a few more tricks. So that is good for swapping out one icon, right? But let's say you have a world where there's a table, right? And if various points, maybe it's like tweets, right?

[00:00:24]
Especially if it's the same data that you're just showing, a different lengths for different views, right? You might wanna say, okay, on mobile, we only wanna show this many on desktop, we wanna show this many, so on and so forth, right? Do you have to create it, cuz you can't remove components, Or layers inside of a component.

[00:00:46]
So what do you do if you wanna have a version of this that can be a really long version, a really short version, so on and so forth, right? How do you handle that? Do you have to make tables of all different sizes and just swap instances? Is that the way we wanna live?

[00:01:04]
I'm gonna argue no, there's another kinda trick, cuz even menus, right? If you have a different number of items, so on and so forth. We do know that we can change the height, I was changing the height of stickies and also stuff this entire time. And so there is a trick here that we can kinda do, which is, so we could take a version of our card component from before, and I'll do this kinda by hand, pull this out, right?

[00:01:28]
This is, I've changed offers, I have some pagination here, right? And so on and so forth. And what we could do is we can also take something like this and pop it in, Make it the full width. And we can make another one And, Let me put that in the right place.

[00:01:58]
Snap it in. All right, sweet, and we'll do one more just so I can do that command D trick cause I messed up the first time. Boom, and then, I'm basically put in way more than we could ever want. And you can see we've got clip content, right?

[00:02:13]
And so the default one, we grab it We'll kinda snap to the component. And so now what we could do is, Bring this in and like if we wanna have a bunch of these, we can bring one in. And we could say, all right, what I want you to do, you gonna be allowed to do these need to fill the content.

[00:02:43]
We. All right, so now the table will kinda stretch this way. And then we can also grab it, and we can have whatever size that we need for our UI, and just have it in place. Now, a bonus trick that we could do is, these are fixed. As you can see, I can't really do much to them.

[00:03:11]
I can change the text in them, but the overall structure is kinda in place. I can't even do that auto layout trick and move them around, all right? It just moves the whole thing. But theoretically, and you'd have to be really be dedicating this point because you have to switch a bunch of them.

[00:03:27]
If this was a component, you could swap it out with all the different tables and rows that you might see, right? So you could have this idea of a top bar that is a component, a bottom bar that's a component and all these rows, you would have to swap them all out, right?

[00:03:40]
But you could theoretically have a customizable and reusable table that you could have in your UI as well. And we're gonna use this for another trick in a little bit but yeah, one more way that you can have more flexible components instead of having to create all sorts of different things over and over again.