Table

A quickstart on using Budibase tables to interact with your data.

The Table Component inside Budibase is great for displaying data to users. It's highly configurable, performant and customizable. Most apps built with Budibase involve displaying data within a table, and interacting with that data.

Getting data into a table

To get data into the Table, you need to have the table nested in a Data Provider.

👍

Table Block

Want to quickly load a table with data, plus add search and filter options? Use the Table Block instead, read more about that in the Blocks documentation.

In the Settings PanelSettings Panel - The Settings Panel is where you can configure every property of a design element. By default this is displayed, when clicking an element when you're in the Budibase Design Section, on the right. you will find a lot of options of customization for the Table component. You can find all the definitions below.

General

There are several general settings for Table, most of which are shared with other components as well.

Setting

Description

Name

The name of the table, which is not visible to the users, but visible in the structure sidebar

Data Provider

The provider of data for this table, this most likely is the wrapping component in your structure.

Row Count

The number of rows you want to have visible

Columns

Configure which columns you want to have displayed. See detailed explanation below

Size

Medium or Large font size

Quiet

Removes background-colour

Compact

Makes all the margins and paddings smaller, allowing for more data on screen at once.

Show auto-columns

Displays the auto-columns available in the data source, such as createdAt and updatedBy. See also Budibase DB

Allow row selection

Adds checkboxes in front of rows, allowing your users to select one or more rows

Link table rows

Adds the ability to the table to click a row

Open link screens in modal

Instead of opening the link defined inlink screen to be opened in the same window, it will open in a modal instead

Link screen

Define which link is clicked when link table rows is enabled. You can use Handlebars or JavaScript for this. Read more about this in Bindings.

This field also allows you to input external URLs

Configure Columns

When pressing the configure columns setting, you will be shown a modal where you can define which columns you want to display.

By default this screen is empty, but you can press Add all columns to automatically add all columns defined in the data.
If you wish to remove a column, press the X on the right hand side.

Changing column labels

After you've added columns to your table, you can customize the label displayed in the UI. This is great so you don't need to stick with the column name itself. Changing this will reflect in the UI preview as soon as you hit save.

Sorting columns

In front of every column you can see a small dotted icon, dragging this allows you to reposition the columns in every order you want.

Adding auto-columns

If you press the Add column button after you added all columns already, you can pick the auto-columns as well. This gives you a nice control over which columns you want, and which you don't.

Advanced Column Customization

Next we're going to look at advanced column customization. You can get to this through the gearwheel behind every column in the Configure Columns section.

Pressing this icon, you will be shown a new modal screen with all the advanced options.

Width

The width of every column can be customized here. There are different modes supported here.

Mode

empty

By default, when the field is left empty, the margins of all columns will automatically adjust to fit the window

auto

When typing auto into the screen, the width will adjust based on the widest value of the column

custom

A custom mode, which allows you to put any css supported width in here, such as 200px

Alignment

This setting allows you to align the text. By default left alignment is used, but now you can also select center and right.

Value

The value field allows you to override the value using Bindings. A great example of what you could do here is to convert a cents column to be displayed with currency symbol and decimals. So if you have 499 in your cents column, you could input this in the Value field

$ {{ divide Value 100 }}

Background and Text colour

Then there are the background and text colour fields. They of course go hand-in-hand. When clicking the circle behind the definition, you can pick from predefined colors, or input your own color

 

Add components to your table

Adding components, such as buttons and links, to your table rows is simple. Adding a button allows you to assign button actions to rows.

 

Advanced

Below General in the Settings PanelSettings Panel - The Settings Panel is where you can configure every property of a design element. By default this is displayed, when clicking an element when you're in the Budibase Design Section, on the right. is the advanced section. This section currently allows you to select a column that you want to append to the URL which you have defined in the Link Screen setting above. This allows you to make use of detail pages, or simply to know which item in the dataset was used.

Especially when you use an external URL in the link screen setting, like https://google.com/search?q=, then this can be useful for auto-filling the searchfield.


Did this page help you?