Customize row layouts

Use row layouts to customize how row data is displayed in expanded rows, Detail view, and forms

Updated over a week ago

One of our most important building blocks - tables - become more powerful with row layouts.

Row layouts allow you to customize how you view information for a single row in a table, whether that's a row in a Detail display, an expanded row, or a new row being created via forms. You can hide and reorder columns. Or even emphasize what's important by using headers and other formatting. We’ll walk you through all of this below.

Within this article you’ll find...


Get started with row layouts

You can access the row layout feature any time you open or view a single row. Options include:

  1. Right-click a row and select Expand row

  2. Use the Opt + Space keyboard shortcut

  3. Hover over a row and click the expand icon (two opposing arrows) to the left of the row

  4. Convert your table to a Detail display (this display type shows you just one expanded row at a time)

  5. Create a form for your table (forms show one expanded row at a time)

Now you are viewing a single expanded row. The row layout determines how this row information is displayed. If you haven’t yet created any custom layouts in your doc, you’ll be seeing the Default layout. The default layout mirrors the table or view that you’re expanding from. So columns will show in the same order that they do in the underlying table or view. Default layouts cannot be edited, so if you want to display the row data differently, follow the steps in the following sections for creating and editing layouts.

You have three options for how you view expanded rows in your docs:

  • center (the default option)

  • right

  • fullscreen

To switch your viewing type, click on the screen icon in the upper right corner of the expanded row, then select from the options. Making this change will affect how you - and only you - view expanded rows from this table.

change to right row detail.gif

Note that when using the right side view of rows, you can even pin the expanded row to keep it open while editing the canvas.

Create a new row layout

If you want to customize the layout of your rows beyond the default layout, you’ll have to create a new one. To do so, just follow these steps:

  1. From an expanded row, select the three vertical dots in the upper right corner.

  2. Hover over Pick a different layout

  3. If other row layouts have been created for this table, you’ll see them in this list. To create a new layout, select + Create new.

create new row layout.gif

Now you have a new row layout, which you can customize as you see fit. Follow the steps in the next section to edit the layout.

Edit a row layout

To edit a row layout, follow these steps:

  1. From an expanded row (including a Detail display or a form display), select the three vertical dots in the upper right corner of the row

  2. If you want to edit the layout you’re currently viewing, select Edit layout

  3. If you want to edit a different layout, first hover over Pick a different layout, choose the layout from the options, then go follow step #2 above.

edit row layout.gif

Note: if Edit layout can’t be selected, this is likely because you’re using the Default layout, which isn’t editable. So instead, select the Pick a different layout option.

Basic customization

Once in the layout editor, you have a lot of options! You can...

  • select any of the Quick styles for a great starting point

  • hide or unhide columns via the panel on the right (just click the eye icon next to each column)

  • drag columns around within the layout to determine their order

  • drag columns side-by-side within the layout

  • use the sliders to adjust the width of each column

To adjust the display of a specific column, just click on the column within the layout builder. The panel on the right will change to show more column-specific controls. This includes the usual column settings, as well as options to display a column label, font size, and more. Different column types have some different options, so be sure to check this out.

edit row layout example.gif

Once you’re done editing, hit the Done button. If you like the layout you've created and want to reuse it elsewhere in your doc, you can name it by clicking on the layout name in the upper right.

Additional controls

While in the layout editor, you’ll also see some Controls towards the bottom of the right panel. These allow you to customize what else is visible in your row layout, including...

  • Hidden columns link: This Show hidden columns link will appear at the bottom of the row layout, and will allow viewers to click to reveal hidden columns

  • Comments: If the row has any comments, these will appear at the bottom of the layout

  • Column descriptions: If a column has a description, an i icon will appear next to the column title in the row layout. If viewers hover over this icon, they’ll see the column description.

By default, all three of these items will be shown in your row layout. To hide them, just click the eye icon next to each.

Create subtables

Layouts also let you work with your table references in a more dynamic way. If one of your columns is a relation column (in other words, it contains rows from another table), you'll be able to decide whether or not you’d like to see this data in it’s table form.

Within the row layout editor, follow these steps to convert a relation column to a subtable:

  1. Find the relation column you wish to convert to a subtable

  2. Hover over this column, and look for the Table toggle in the upper right

  3. Toggle this setting on

To learn more about subtables, check out this article.

FAQs

If I hide a column in the layout will this also hide the column in the table view?

No - if you’ve hidden a column in one of your row layouts, this won’t necessarily hide the column from the table view. The only exception is if your table is a detail display table, and you’re editing the same layout used by the detail display.

Can I set different layouts for different views of the same table?

Yes! You can set unique layouts for different views of the same table. You also have the option to use the same layout for different views.

Can I duplicate a layout?

Yes! You can duplicate a layout from the layout editor. Click on the three vertical dots in the upper right corner, then select Duplicate layout.

How can I delete a layout?

To delete a layout, first open the layout editor. Then click on the three vertical dots in the upper right corner, and select Delete layout.

1_1 (6).png


Related resources

Did this answer your question?