PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We
strongly recommend 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
Source files
Extends Column: