Edit in GitHubLog an issue

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

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

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>

Result

Thumbnail UiComponent

Source files

Extends Column:

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.