first, you need a class render. here is a sample code.
Code path : Vendor/Module/Ui/Component/Listing/Column/Product.php
class code :
<?php
namespace Vendor\Module\Ui\Component\Listing\Column;
use Magento\Catalog\Model\ProductRepository;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
/**
* Class ProductRender
*
* @api
* @since 100.0.2
*/
class Product extends Column
{
/**
* @var UrlInterface
*/
protected $urlBuilder;
private ProductRepository $productRepository;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param UrlInterface $urlBuilder
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
ProductRepository $productRepository,
array $components = [],
array $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
$this->productRepository = $productRepository;
}
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items']))
{
// column name for which this class is specified
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as &$item)
{
if (isset($item[$fieldName]))
{
$product = $this->productRepository->getById($item[$fieldName]);
$editLink = $this->urlBuilder->getUrl('catalog/product/edit', ['id' => $item[$fieldName]]);
$item[$fieldName] = "<a target='_blank' href='".$editLink."'>".$product->getName()."</a>";
}
}
}
return $dataSource;
}
}
find your grid UI file :
it should be in this path : Vendor/Module/view/adminhtml/ui_component/--_listing.xml
append this code between columns tag:
<column name="product_id" class="Vendor\Module\Ui\Component\Listing\Column\Product">
<settings>
<filter>text</filter>
<label translate="true">product</label>
<bodyTmpl>ui/grid/cells/html</bodyTmpl>
<editor>
<editorType>text</editorType>
<validation>
<rule name="required-entry" xsi:type="boolean">false</rule>
</validation>
</editor>
</settings>
</column>
This column will pass a product id. so you can find the product in your render class.bodyTmpl
tag helps you to show the content as HTML not simple text