In this HowTo you'll learn how you can use the Data table component. The example used in this article is derived from the order management front end article found here.
After reading this article you will know:
- How to show an overview of records from a model
- How to link the Data table to other pages with Row Link
- How to link the Data table to other pages with a Button
Start by creating a new UI builder page with the layout you like to use for this page. In this tutorial we will use "/orders" as the path for this page.
The easiest way to create an overview of all orders is by simply drag and drop the Data table component on your page and follow the guide.
First you select the model you wish to show the data. In this case that will be the model Order. Next up you select the properties you wish to show in the table. For now we'll select the id, order_number, status and total_price. You can add them by clicking the small + icon or by double clicking on the property. It's also possible to click + Add all properties to add them all at once. If you want to change the order of the properties, just click, hold and drag them in the desired order.
Now you can press finish and your Data table will be generated and look something like this:
When you open the URL of the page, the Data table will be filled with the data you have in your backoffice grid and will look something like this:
Now you have your page with a Data table showing all the records from your model.
In most cases, records contain more information than you are showing in your Data table. To make the Data table more interactive and show more detailed information about the record, you have two options: use a button in the table or you can use the Row Link option. First the Row Link is explained. To create a Row Link, select the whole Data table and set the Row Link option to the page which is going to show the detailed information. In this case we'll use the "/order/:order_id" page and set the input variable to var:collection_item.id. How to create a page with an input variable in the url is explained in this article.
The other option is to add a button to the Data table. To add the button to the Data table, first add a column of the Data table. Select this column and you can set the property to var:collection_item.id in data settings. Go to the component settings at the pencil button, set Item Type to button and choose a Button Label. Select the Button Link to "/order/:order_id" and select the input variable like you did for the Row Link. At last, set Hide Title checkbox to true and the Data table will now have column like this:
This example contains the use case of records that represent orders, but obviously you can do this with many other cases.