Grid Block

Learn how to use the Grid to display records on cards with images.

Patrick avatar
Written by Patrick
Updated over a week ago

Basics

Label

A simple visual label that displays at the top of your Block container. Also used for your internal reference in the page builder.

Spreadsheet

Select the spreadsheet to display in your Block.

Layout Position

If you've selected a Layout for your page, you will see the Layout Position select dropdown. This setting determines which 'slot' in your Layout the current Block is located in. As you change the Layout Position, you'll see your block move around into different Layout slots.

Alternatively, you can add a new block to a specific layout slot by clicking on the slot directly.


Card

The Grid block displays your spreadsheet data in white visual cards arranged in a Grid. You can customize this card using the settings described below:

Since Grid, Kanban and Calendar all share the same Card settings, please click here to view the full article on Card Settings


Filters

Visible Filters

Give users the ability to filter the data in your Table with select dropdowns and other input fields.

Hidden Filters

If you need to limit the data a user can see in your app based on who is logged in, you can create a Hidden Filter using custom user fields.

With this simple feature, you can build a dynamic application that shows different data to different users, while keeping all data in a single sheet.

Example: Your company has three distinct teams accessing the same page, but you want them to only view the records that relate to their team.

Show Search Bar

If on, a search bar will appear in the filters area in the top of your Block container, allowing users to easily filter through the records using a keyword search.


Actions

Record Click Action

Define the functionality for when a user clicks on a specific record (row) in your Table. There are 4 options: Default Detail View, Custom Detail View, Custom Action, and None (no action).

Custom Action
When you choose the 'Custom' Record Click Action, you will see the Custom Click Action setting, allowing you to define a custom action to be triggered when a specific record (row) in your Table is clicked.

Show Create Action

If enabled, a button will appear in the top right corner of your Block container, allowing users to trigger a 'Create New Record' view where they can add new records to the spreadsheet linked to this block. Newly created records will appear in the Block immediately once created.

Row Actions

Define multiple custom actions to appear in a dropdown menu in each Table row.


Styles

Show Background

Toggle on to allow a white background to underlay your cards. Great for creating more cohesion among your grid items.

Image Fills Card Width

Your card image will fill the card width parameters set by you under 'Card Width'.

Image Fit

Determine how your images are sized within the card dimensions you've prescribed. You can set them to Cover or Fill the card, or to keep the full proportions of the image Contained in the card with white space filling the uncovered edges.

Grid Mode

Determine whether the width of the card should fit the user's screen dynamically or keep fixed to its value statically.

Card Width

Choose within a set list of pixel values to configure the card's width.

Image Height

Choose within a set list of pixel values to configure the card image's height.


Other Settings

Results Per Page

Determine how many results should show in the Table before displaying the 'pages' navigation at the bottom of the container, which allows users to move through the multiple pages of results, if any.

Record Label

Provide a label in singular format ('Dog' vs 'Dogs') to use in various text labels around your Block and related features. By default, if this setting is not configured, the generic term 'Record' will be used as a placeholder.

Did this answer your question?