Adobe Commerce 2.3 reached end of support in September 2022.

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: