Components question: table and card

I want to show a list of products in a table in my application. it’s strange that I didn’t find such a common component.

The card component that I see in Composer has a title and description by default. I want to use a card to show few fields from sales order e.g. order no., customer, amount, status. Do I need to build it from scratch using a container or there is a better option?

You can build your table quite easily with container and repeated row component

Apart from that option, is there any components exists that I may have missed?

Don’t think so. Note that you dont have to manually build the table. Just repeat the row component with your collection of saleOrders

I have first created data variable

then looks like you created appVariable but i don’t see any property “repeat with”

I used data variable, nothing is displayed

Would you please let me know what was the right properties of the app variable here?

The app variable is irrelevant. I just did that to demonstrate, sorry for the confusion.

The main point was that your row component has Repeat with property, on which you can bind any array of objects, for example your Products or whatever you want to render. It will automatically generate you a row component for each object in that array, populated with it’s own data.

I have used the row as suggested. wondering something is not right as it is not working:

I would appreciate your help.

Have you bound anything to the rows? You should bind something like currently repeated name or whatever properties you need to show.

And also make sure there are records saved in the database.

Records are saved as I can see them when I use List Item to display.
I do not have option to select fields from the table as I see you have selected.

This SalesOrderLines is a Collection entity. The reason could be I have selected “Data variable value” and “Currently repeated property value” is inactive.

Sorry for letting the response to this take so long – did you figure it out? The reason here is that the repeat has two steps to it – first, you choose the source array of objects to repeat with, and then you change the binding type for individual properties like Title to Currently repeated property value.

Ciao Harri,
I’ve tried to follow your tips but seems I cannot add any properties
Any idea why it is in grey? I’m trying to add it to rows
Let me know how to do it since I would repeat my data splitting them in 3 columns

Can anyone help me to create a table made by 3 columns with data coming from a collection?

I’d get started like so:

  • Have your data assigned to some variable (app / page / data) of type list or collection.
  • Place two row components with three cells on the canvas, and add components for the cell contents. The first one will be your column headers, and the second one will be your actual data.
  • Set the repeat with of the second row component to your data.
  • Now go to the cell content components, and change their properties from static values to property of data item in repeat. Make sure your types are compatible: e.g. for an image source you’ll need to have an image URL or local filesystem path; just a general string type won’t do (though you can force this using formulas if you really wanted).

Hopefully the new binding editor has made this clearer!