PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

ThumbnailColumn component

The ThumbnailColumn component implements a column containing images associated with records of the table. Each field of this column contains an image preview. When a user click on the preview, a pop up window with the detailed view opens.

Configuration options

Option Description Type Default
bodyTmpl Path to the template used for rendering a column’s fields in the table body. String ui/grid/cells/thumbnail
fieldClass Additional CSS classes appended to the column’s field elements. {[name: string]: boolean} {'data-grid-thumbnail-cell': true}

Examples

Integrate the ThumbnailColumn component with the Listing component

This sample shows how the thumbnail column is added into the Product Listing component:

1
2
3
4
5
6
7
8
9
10
<columns>
    <column name="thumbnail" component="Magento_Ui/js/grid/columns/thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
        <settings>
            <hasPreview>1</hasPreview>
            <addField>true</addField>
            <label translate="true">Thumbnail</label>
            <sortable>false</sortable>
        </settings>
    </column>
</columns>

Result

Thumbnail UiComponent

Source files

Extends Column: