Tables

Tables are used in blocks and collections, and they can also be linked to resources. However, here we will look at an example of implementing a table for blocks.

We have a Slider block that should have fields: title, description, and slides (an array of data for the slider). Slides should contain fields: image and title.

Step 1. Create table

Go to the Tables tab on our component's page and click Create.

Move to the "Table columns" tab to specify which fields we will display in the columns of this table. For the Image field, we specify the "renderImage" renderer so that an image is displayed in the column, and we leave the column width at 0, so the column will be aligned automatically. For the Title field, we leave the renderer empty.

Step 2. Create Slides block

Add fields title, descriptions (make this field optional) and slides (link this field to the required table). Also, go to the "Availability" tab and specify that this block will only be available for resources with the "BaseTemplate" template. You can add multiple templates or specify other conditions: parents and resources. In these conditions, we specify the IDs of the resources, separated by commas.

Step 3. Add the block to the page.

Step 4. Create slides chunk

<section class="slides">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>{$title}</h2>
                {if $description}
                    <p>{$description}</p>
                {/if}
                <div class="slides">
                    {foreach $slides as $slide}
                        <div class="slide">
                            <h3>{$slide.title}</h3>
                            <img loading="lazy" 
                                 src="{$slide.image.url}" 
                                 width="{$slide.image.width}" 
                                 height="{$slide.image.height}" 
                                 alt="{$slide.image.title}">
                        </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
</section>

Since the 'description' field is optional, we perform a check for it.

{if $description}
    <p>{$description}</p>
{/if}

The 'slides' field is a table for us, where the data is stored as an array, so we use a foreach loop for iteration.

{foreach $slides as $slide}
    <div class="slide">
        <h3>{$slide.title}</h3>
        <img loading="lazy" 
             src="{$slide.image.url}" 
             width="{$slide.image.width}" 
             height="{$slide.image.height}" 
             alt="{$slide.image.title}">
    </div>
{/foreach}