Grid block

The grid block allows you to copy your Budibase DB and SQL tables as seen in the Data section into your apps for end-users.

It is the quickest, most direct way to provide your users with a CRUD interface.

Add a Grid block in a couple of clicks!

In the Design section, click Add component.
Under the Blocks category, click Grid block.

👍
You can also add a Grid block by searching for "Grid" and pressing the Enter key.

With the Grid block added, you will want to select a Table in the Settings Panel.

Configure columns

Grid block columns can be configured under the Columns section of the settings. Click the cog icon beside a column to change its label.

Click on Configure columns to determine which columns should be included in your grid view and to change their labels. The underlying database column name will still be shown above the label for reference.

Giving the 'Last Name' column the display label 'Surname'

Columns can be shown or hidden with the toggle switches, and the column order can be set by dragging and dropping columns.

📘
In-app column width and order
The initial width and order of your columns will match the grid in the Data section.
Users can use the mouse to drag columns to change their order, or drag edges to resize the width. These changes will only apply to the users' session.
Also note that the Display column will always be pinned.

Sorting

Select a Sort column and Sort order to set the initial default sorting; either ascending or descending. You can also set an initial sort on a column that is not being displayed.

A user can still override this sort by clicking the three dots beside a column. Text fields can be sorted alphabetically, whereas number fields will be sorted numerically.

Row settings

The Grid block offers a few row settings, including a mix of style and function.

Setting	Description
Row height	Set the height of the grid rows (Small, Medium and Large). The default is small.
High contrast	If checked, the Grid rows will be striped.
Add/Edit/Delete rows	Uncheck to prevent users from adding/editing/deleting rows.

If you want to increase the number of rows displayed on screen, simply increase the height of the grid block in the Styles tab.

Search

Search can be added to a Grid block through the use of Bindings and filtering Using a form and text input.

If you want to allow users to set their own Dynamic filters or want a more convenient way to add search fields, you may wish to explore the Table block.