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>
Copied to your clipboard
<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>