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.

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

Integration

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

<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: