How to show data on a page

In this tutorial, you’ll learn how to show data from your application on a Page Builder page.

Creating a static website within the page builder is quite easy to do! But the Page Builder really shines when you want to display data, in this tutorial we’ll show you how to display data on a page in the Page builder!


The DataTable component

There are different components that are able to display data on a page, but in this tutorial, we’ll be using the DataTable component since it has the most options to configure and can display multiple properties of a single model. If you would like to know more about the other data components as well, don’t worry, they are similar to each other, so feel free to check out the Page Builder Component Reference!

After selecting a model, you might want to limit the results collected. Apply a filter to the component to do so. Without one, all available records will be requested.

Click Create filter to start. A window appears, containing several options to build the filter. Choose one of the model’s properties, a predicate to compare it, and a value to compare it with. If done right, this should limit the results so only relevant records matching the criteria are collected. You can also combine multiple filter rows to make the filter more complex.


Select the model

Before we can select the properties that we want to display in our DataTable it is required to select a model first. Based on the chosen model we’ll be able to select its properties. I’ve selected the model: Product in this example.

After selecting a model, you might want to limit the results collected. Apply a filter to the component to do so. Without one, all available records will be requested.

Click Create filter to start. A box appears, containing several options to build the filter. Choose one of the model’s properties, a predicate to compare it, and a value to compare it with. If done right, this should limit the results so only relevant records matching the criteria are collected. You can also combine multiple filter rows to make the filter more complex.


Select the properties

Now that our model has been selected, we may select the properties for our DataTableColumns. If we select the DataTableColumn, we can select a property for it to display. For the left DataTableColumn I’ve selected the name property, and for the right; price. If you want to display more properties simply drag a DataTableColumn from the sidebar into the DataTable!



Compile the page

With our model and properties selected, we may now compile the page and check out the result. As you can see the products are shown inside the DataTable!

And that’s how you show data from your model on a page! If you want to know more about the DataTable or DataTableColumn component itself, as mentioned earlier, don’t hesitate to check out the Page Builder Component Reference. Or if you want to know more about the Page Builder itself, you can check out the Page Builder Reference!

In this tutorial