Application Builder - Table element

The Table element works exactly like the grid view. It displays the data from the data source in a table layout.

In this section, we’ll guide you through the process of setting up a table element and explaining each configuration option in detail.

Overview

For the table element, you can configure the element properties and style from the element settings.

To get started, you need to connect a pre-configured data source to fetch data from data sources and display it on the table.

As soon as you add a table element to the page, the element settings will become available and you can start setting it up.

Add and configure table elements

To add a table element, access the elements panel and select Table.

Once added, place the table wherever you want it on the page. Don’t worry if it’s not perfectly positioned initially; you can always move it later.

Learn more about how to add and remove an element from a page.

Now, you’ll configure the table’s properties to make it function and look the way you want. This involves settings related to table style.

Table data source

To list rows in the table, set the data source service type as List rows. Learn more about data sources and how to configure them.

After adding a table element to the page from Elements, you need to select the data source which you want to import your data from. This is done from the General tab of the element settings.

As soon as you select a Data source, you’ll see the Fields configuration appear below.

Table items per page

You can choose how many items appear in the list by default. The field must be an integer and must be less than or equal to 100.

If there are more items to display than the defined number, a Show More button will be added at the end of the list, allowing the user to expand the list and view the additional items.

Table fields

This is where you configure how the data will be mapped to a table to specify how exactly you want to display your data.

You can configure some additional parameters for the table element and map the element fields to the data source to specify what data needs to be displayed and how.

For each field, you can add a Name, Type, Value, and Link text. You can also configure the position of the fields.

Add a new field

You can add new fields using the Add field button. After adding the field, you need to specify its Name, Type, Value, and Link text.

Fields can have the following settings:

• Name – a title for the column
• Type
• Value
• Link text
• Navigate to
• Parameter

Field name

Here you set the title of the field. The name of the field can be modified as needed.

Field type

You can display the data as Text or a Link.

• Text – plain text
• Link – clickable button to open page.

Field value

If the Text type is selected, you can also set the value of the field.

You can enter a specific value for the selected field so that the rows display that value.

You can enter static text here. However, if you’ve connected to a data source, all the fields from the data source will also become available for your choice.

Field link text

If the Link type is selected, you can also set the link text of the field.

Similar to the text value, you can enter static text here. However, if you’ve connected to a data source, all the fields from the data source will also become available for your choice.

Navigate to

If the Link type is selected, you can also link to an internal page or custom URL through a button.

Link row to a details page

If the Link type is selected, you can link to an internal page through a button and set it to open a separate page within the Baserow application to view the details of a row.

In the detail page, you should link to the same data source that the table to which you want to connect the details is linked to.

For example, let’s say you have a list of projects in a table. When the user clicks on the link associated with a specific project, you want to display this project’s details.

You need to first add a parameter via :parameter . Path parameters can be used to load data, depending on the provided parameter dynamically. Then map the row ID in the data source configuration.

To link to a dynamic page, go to the element settings and open the General tab. From the Navigate to dropdown menu, set the detail page to which the table items are supposed to be linked.

That’s it. Now when the user clicks on a particular link associated with a row, they will be taken to the page with the details of the row.

The content for each row will be generated automatically on that page depending on which row the user has navigated to the detail page from.

You can also do the same for a Button element.

Delete a field

Button color

You can easily modify the color in the Application Builder.

The color of a button refers to the visual appearance of the button itself.

You can configure the color of the Show More button to show more items in the list.

Navigate to the page where you can edit the heading you want to modify and select the heading element within the editor. Change the color of a heading element using the property within a General tab.

Click on the color picker or input field next to the color option.

Set the desired color of the heading using one of these methods:

• Hexadecimal color code: Enter a six-digit code preceded by a hashtag (#), like #FF0000 for red.
• RGB value: Specify the red, green, and blue values (0-255) separated by commas, like RGB (255, 0, 0) for red.
• Opacity: Adjust the transparency of the chosen color using a value between 0 (fully transparent) and 1 (fully opaque).

Use a visual color picker tool to interactively choose a desired color.

Alternatively, you can inherit the default styles defined in the theme settings for a cohesive look.

Sort fields

You can manually reorder the fields with the drag-and-drop functionality.