You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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: