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: