Data component reference

Build tables and lists based on specific properties contained in one or more models from your data model.

Using data components, you can present information from one or more models in the table or list formats. This section includes:

• Data container

• Data list

• Datatable

• Datatable column

• Detail view

• Filter

• List with data

The data container component is used to display details and items within one record. For instance, it can be applied when you need to create a detail page to display the contents of one record from the data table. As the data container gets added, you will have to configure it by choosing where the data will be coming from (another page, this page, or a logged-in user) and selecting the model.

You can drag components yourself inside a data list to form what you need. It's blank but you can fill it out yourself, can display data any way you like.

 

Used for basically the same use cases, the list with data shows columns that need to be defined before being dropped to the canvas.

The data table has columns and rows that contain specific values taken from a particular model. After you've selected a model, you are able to select the columns to be displayed within your table. Sometimes you'll have to add a data table column in case it's required to extend a table for some more items.

Use the detail view component to create a detail view page easily. After selecting a model and number of columns, drop a data container and select the filter path ID to assign a number to each separate detail page in your application. When you need to extend your detail view page, employ the detail view child and select the additional property you would like to be displayed.

The filter component is used with a data list or data table to enable an easy way to look through your data more specifically by finding and filtering the needed items. This feature will come in handy for those who deal with a large number of products in a list.

Displaying data from models

You can use the various data components to create lists or tables based on data from one or more models in your data model. Configure the details of the properties you want to present either during the dialog when creating the data element, or using the options tab.

Reconfiguring options

As you add components to your page, you may want to change something without deleting and starting from scratch. There are a few options for these cases: reconfiguring and adding a child column.

The new Reconfigure and Add Column options are added to the following list of UI components that belong to the Betty Blocks default no-code toolkit:

• Datatable

• List

• Menu

• Breadcrumb

• Stepper

• Tabs

• Subview

Reconfigure

The reconfigure option shows an overview of all 'direct children' available inside an existing component on the canvas. In this example, we have a data table with five columns. These five columns are the direct children of the data table.

When you press the 'Reconfigure' button on the top of the data table's options menu, the reconfigure menu will appear. Employing it, you are able to do basic CRUD operations instead of knowing your entire way out in the page builder's sidebar, which components to click on, and what options to select, this Reconfigure option is more straightforward in terms of UX. For the data table, this means:

• Create new columns for the data table

• Read the available columns present already

• Update:

  • The ordering of columns (the indexing).

  • Options of an existing column.

• Delete columns from the data table

Currently, the scope of this overview only consists of the read and delete parts, with also the ability to drag components, changing their order. Updating is on its way soon, as well as the creation of a new child from this overview. However, creating a new child (new column to the data table) is already available as a singular option in the component sidebar.

Add child column

The adding child option is meant to create a new component inside of an already existing one on the canvas. In our example, we took the data table. The direct child structure of a data table is its columns. And that is exactly what you are able to add when using this option.

Fetch policy

The advanced option fetch policy allows you to target either one or several data components within your page. Let's say you are working with a re-fetch interaction while having two data containers that share the same model and filter. When try to re-fetch data from one of these containers, you see that both of these containers get re-rendered. But you don't always need that to happen, right?

Therefore, you need to open an odd data container's options (the right one in our case) and press Advanced options> Fetch policy, and activate the No cache button.

Only render children when data is present is used when your nested components are depending on data (or its filtering) from the parent container. For instance, in some nested components inside the data container, you have a filter on the User record. Then you can choose to render the inner component only when the container itself has loaded the data first.

Now only the left data container gets re-rendered as a result of pressing its re-fetch button. The other data container is left as it is and can only be re-rendered using its own re-fetch button.

Setting permissions for a model