Ui component grid with Column Component implements the basic column in the listing.
Listing use column to display a list of different entities for the specific entity collection.
If you want to clickable link column from the available columns in the grid, You can do it using applied bodyTmpl options.
You have created a custom listing for the admin panel and one of the columns is Order Id and you want to clickable this column, Its possible using a UI Listing.
Magento 2 Column Component with default bodyTmpl path is ui/grid/cells/text. This Template renders all the content in the cell as plain text but if you want to content as linkable, you need to change your column content to html.
bodyTmpl path will be ui/grid/cells/html
In your, UI_listing XML file, add column content as,
<column name="order_increment_id" class="Jesadiya\OrderListing\Ui\Component\Listing\Column\OrderId">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Order #</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>
If you want to display order id as plain, you don’t require to add bodyTmpl item argument in the column node.
New Argument will be,
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
Default Class path for each column component is, Magento\Ui\Component\Listing\Columns\Column
We need to change classpath to create a link as html content for the given column to class=” Jesadiya\OrderListing\Ui\Component\Listing\Column\OrderId”
Ui Component Class Path: app\code\Jesadiya\OrderListing\Ui\Component\Listing\Column\OrderId.php
<?php
namespace Jesadiya\OrderListing\Ui\Component\Listing\Column;
use Magento\Framework\UrlInterface;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
/**
* Class OrderId
* Modifies the column Order id
*/
class OrderId extends Column
{
/**
* @var UrlInterface
*/
private $urlBuilder;
/**
* Order Id constructor.
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param UrlInterface $urlBuilder
* @param string[] $components
* @param string[] $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = [],
array $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
if (isset($item['order_increment_id'])) {
$url = $this->urlBuilder->getUrl('sales/order/view', ['order_id' => $item['order_id']]);
$link = '<a href="' . $url . '"">' . $item['order_increment_id'] . '</a>';
$item['order_increment_id'] = $link;
}
}
}
return $dataSource;
}
}
You can set an anchor tag with your URL to the column as linkable and click on that column value redirect to a specific page.