How to make clickable link on admin grid in Magento 2
You need to add bodyTmpl path will be ui/grid/cells/html. This line of code is responsible for to act like as a html.
Two ways to do :
1) : bodyTmpl to add via column
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
Full code of below to get an example of how you can add bodyTml in you ui component xml file.
<column name="store_name" class="Magesan\Extension\Ui\Component\Listing\Column\StoreName">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Store Name</item>
<item name="sortOrder" xsi:type="number">20</item>
<item name="filter" xsi:type="string">text</item>
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
</item>
</argument>
</column>
2) : bodyTmpl to add via column settings
<bodyTmpl>ui/grid/cells/html</bodyTmpl>
Full code of below to get an example of how you can add bodyTml in you ui component xml file.
<column name="store_name" class="Magesan\Extension\Ui\Component\Listing\Column\StoreName" sortOrder="3">
<settings>
<filter>text</filter>
<bodyTmpl>ui/grid/cells/html</bodyTmpl>
<label translate="true">Store Name</label>
</settings>
</column>
In the class Magesan\Extension\Ui\Component\Listing\Column\StoreName
StoreName.php
<?php
namespace Magesan\Extension\Ui\Component\Listing\Column;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
class StoreName extends Column
{
/**
* __construct
*
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
array $components = [],
array $data = []
) {
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as &$item) {
$link = "magesan.com";
if ($link) {
$item[$fieldName] = "<a target='_blank' href='" . $link . "'>" . $item["store_name"] . "</a>";
} else {
$item[$fieldName] = "<a href='javascript:void(0)'>" . $item["store_name"] . "</a>";
}
}
}
return $dataSource;
}
}
This is how it will look in grid.

Note : You can remove target=’_blank’ from anchor if you don’t want to redirect to new tab.
Happy Coding…