Table

The table 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 table in a couple of clicks!

1. In the Design section, click Add component.
2. Under the Blocks category, click table.

👍

You can also add a table by searching for "Table" and pressing the Enter key.

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

Configure columns

Table 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 table view and to change their labels. The underlying database column name will still be shown above the label for reference.

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 table 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.

On row click

Click Define actions to run Actions on click of a row.

You will be able to use the {{ Clicked row }} Binding to access the object data of the clicked row.

If you wanted to access a property of the clicked row, for example the _id, then you would write your binding like so: {{ Clicked row._id }}

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 table offers a few row settings, including a mix of style and function.

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

Search

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

Selected rows binding

If your table has the Allow row selection checkbox ticked, then you will be able to make use of the Selected Rows Binding.

This can be found underneath your table within the bindings drawer:

When using this binding, an array of the selected row data will be made available:

This binding can be used to Delete the selected rows:

You could also pluck a field from the selected rows, such as an ID, to show which rows have been selected in a readable way: {{ pluck Table Block 1.Selected Rows 'id' }}

Furthermore, you can combine pluck with sum to count a total, such as the kilogram weight of the selected items: {{ toFixed (sum (pluck Table Block 1.Selected Rows 'KGS')) 2 }} KG.

toFixed in this case ensures there are always two decimals points in the printed value.

Deprecation - Selected row ids

Prior to v2.19.2, the selected rows binding provided a list of Row _ids only. This binding has been kept for backwards compatibility, however in future it will be removed. This change has been made because the new binding is more useful, allowing you to do the calculations outlined above.

Advanced settings

If you need more out of your table such as footers, resizeable and searchable columns, and conditional cell UI, you can check out the community Super Table.

Read more about Custom plugins.

Table Block deprecation

If you still have access to the table block component you can view relevant documentation associated with it here.