Tailor - How do I access data from a field type: datatable?

I have created a datatable field with two columns ‘variant’ and ‘price’.

product_variants:
        label: Product Variants
        commentAbove: Set up different viarants that can be selected from a drop down menu.
        type: datatable
        adding: true
        deleting: true
        columns: 
            variant:
                type: string
                title: Product Variant
                width: 300px
   
            price:
                type: string
                title: Price
                width: 100px
                validation:
                    integer:
                        message: Please enter a number.
           
        recordsPerPage: false
        searching: false
        trigger:
            action: show
            field: use_variants
            condition: value[variant]
        tab: Pricing
        span: left

How can I access the data in the markup?

I tried the following snippet, but I figured it wouldn’t know which entry from the price column to give me…

<p>{{ item.product_variants.price }}</p>

I wanna know how I can access the first entry so that the first price from the datatable column shows up.
Also I need to find out how to loop through them and get access to all of them.
In general: How do I access the datatable?

I have been looking through the docs, but I couldn’t get it to work yet. :sweat_smile:
Maybe someone here can help me out.

Thank you very much and have a great day. :slightly_smiling_face:

Hi @Pandaboy

The data stored from a datatable type is stored as an array. So in this case, you would access the first item using the 0-based key:

<p>{{ item.product_variants[0].price }}</p>