Tables. *cringe* We hate them, but we can’t live without them. They’re definitely handy for displaying a lot of listed data in an organized way, but at the same time they just feel… meh :expressionless:

Server information

Personally, I’ve designed so many tables over the years. You have all these different objects to resize, move, select and on and on! The worst part about them, is when it comes to resizing them for different views, screen sizes, etc., in what ever design app you’re using.

In this case, we’re talking about Sketch (obviously). Today though, we’re not just talking about any old version or feature in Sketch, but Sketch 39’s brand new and jaw dropping feature — Group Resizing . (At the time of writing this article, 39 is a beta version.)

Grab the beta version of Sketch here: http://www.sketchapp.com/beta/

Working With Tables

I’m going to be using a simple table I created to demonstrate and compare the old vs new resizing. Feel free to make your own, or use the file I created (which I’ll provide a link for at the end). Here’s how mine is currently setup:

As you can see, I’ve setup my text into columns. I’ve been doing this to easily adjust spacing between columns, so I can more easily move them for consistent spacing. In this particular example, I have a “padding” of 10px on the left and right for each cell/column.

The vertical dividers are in their own group, on top of the row backgrounds (rectangles). The table rows have an outer border, so they can overlap and not cause a 2px border between them. Lastly, the actual table itself has an outer border and is a mask to everything else. This way you don’t see the row borders outside the table. Now that you have a basic feel of what my setup is, let’s move on to the juicy stuff and main focus of this post…

Resizing Them

Okay! We’ve designed our table, got some data in them, and now we need to use it in some other screens and/or different sizes. Let’s go ahead and horizontally make our table wider:

Ew, look what it’s doing to my shapes

Wait, that is not how I want my objects to resize! :sob: You’ll notice that the cell dividers, sorting button in the header, and the star icon are stretching. Definitely no bueno. Another thing that is not resizing the way we want (but isn’t really visible in the GIF above), is the positioning of the text layers. At this point, I would have to grab my table border and background cells, resize those, then nudge over the text columns so they’re 10px away from the dividers again, etc. Very annoying and tedious.

Queue in 39’s Group Resizing

When selecting a layer/group within a group , there is now a new Resizing section in the Inspector panel:

Here is what each option means:

• Stretch (default) — Will float and resize the layer when group is resized.
• Pin to corner — Automatically pins the new layer to the nearest corner. Does not resize when group is resized.
• Resize object — Resizes the layer and maintain’s the layers original position when group is resized.
• Float in place — Layer does not resize, but its position’s percentage is maintained when group is resized.

There’s also some handy keyboard shortcuts you can use to change between each (Layer menu → Resizing):

control + 1 through 4

I’ll leave it up to you folks to play around with first-hand and see the difference in behaviors. You should get a good sense of each by the end of my walkthrough below.

Updating our table

We want a consistent 10px padding in each cell/column. What we can do is add a 10px wide rectangle on each side, representing the fixed padding. Select those rectangles, and change the Resizing property to Pin to corner . Do the same for the Sort button group as well.

Selecting Pin to corner

If we resize our root Table group now, you’ll see that the padding rectangles and the Sort button are sticking to the corners they are originally in, without changing size! Nice!

Psst! You don’t actually need the pinned layers visible! They’ll still work as intended.

Next, we need the divider/border between each column, to not stretch and become larger than 1px. We also need them to move according to the size of the group that it’s in. For this, we’re going to use Float in place .

Selecting Float in place

Resize the Table group again. You’ll see that the line is now following the size of the column group that it’s in! That’s because Float in place follows the position based on percentage of inside the group. Snazzy!

Let’s work on the text layers next. Select all the text layers in that column, and resize them horizontally, so they butt up right against the padding boxes:

This will establish the initial resizing and position of the text. Now change the resize property to Resize object . The key difference with Resize object vs Stretch is that it maintains its original position. With Stretch, the left edge will also move when resizing it. Ick! :fearful:

The last step in making our resizing table of awesomeness is updating the star icon property. For this, we don’t want any change in size. What we do want is for it to stay nice and centered as the column resizes. Can you take a guess as to which one we’ll use?

Float in place! If you didn’t guess right, don’t be sweat it. With a little hands-on practice, you’ll be able to know which to use in each case. :blush:

Okay! The moment of truth! Let’s resize our Table group now:

Woot! Perfect

We did it! High-five! :pray:

:star2: Bonus: If you want to take things a step further, I’ve added another example table (in my demo file) using a symbol for a row and having the padding and dividers within each row. This way you can even have the handy text overrides for each column within the row! :open_mouth:

Using rows instead of columns

I hope this will get your gears turning and helps you improve your work-flow and save you time in some tedious tasks (like working with tables). I’m looking forward to 3.9 hitting production and to what the clever team at Bohemian Coding comes up with next.

Here’s a link to download the file I created for this walkthrough.