Before we start, we will need some data. We’ve prepared the following tasks to show you how this works:

In our use case to Show a single task, we used a data container component to fetch 1 record from the database.

In this example, we will show you how to get a list of records from the database.

In this example, we will use the data table component. We also offer a data list component that kind of acts like the data container with the difference that it will repeat all components you drag into it, for every record that matches your model and filter.

When you drag a data table component on the page, a modal will appear in which you can select the model that you want to represent and the properties you want to see in the table columns.

Step 1: Select model:

Step 2: Select the properties from the chosen model:

Step 3: Press Save and your table will be created:

Notice for selecting a property from the web user, we have to press the arrow right next to it and select a property in the next view. This is because for this example there is a belongs to relation between tasks and web users. This means a task can be assigned to only one web user. The other way around, a web user can have multiple tasks which are assigned to him/her.

Your data table will look like this:

When you select the data table, you can see its options. In there, you will see the selected model. Where we saw Update filter in our data container component from the case Show a single task we now see the following:

A model is selected, but there is no filter yet. Which is OK. We will now see all records of this tasks model. With default pagination for 5 records per page. You can change that into anything you like.

When we press play, we will see the following:

We can see here that the date in the Planned column is not user-friendly. You can change the formatting of this date to your liking.

By going back to the page and selecting the data table column for Planned.

The options are shown and we just press the purple button (not the x) and we can see our property selector. We can navigate to the Planned property and re-select it. This time we get an extra modal in which we can define what our output for the date should look like:

Let’s select the second one from the top (11/15/2021), English notation. When we have selected this property and its format, we press play again.

Your table will now look like this:

There was no filter involved here, so we will just see all records available in our Tasks data model.

In the use cases next up we will cover some of the most-used filter settings based on this table.

➝ Next article: Showing a list of tasks belonging to a user