PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

LinkColumn component

Overview

The LinkColumn component implements a column that can display anchor elements instead of plain text.

Constructor: app/code/Magento/Ui/view/base/web/js/grid/columns/link.js

LinkColumn configuration

Option Description Type Default
link The key in a field’s record object that contains the link value. String link
bodyTmpl Path to the template that is used to render a column’s field in the table body. String ui/grid/cells/link

Source files

Extends Column component

Examples

Integrate the LinkColumn component with the Listing component

This example integrates the LinkColumn component with the Listing component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<listing>
    <columns>
        <column name="id" component="Magento_Ui/js/grid/columns/link" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="link" xsi:type="string">link</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Link</label>
                <sortable>false</sortable>
            </settings>
        </column>
    </columns>
</listing>

Data Provider for this listing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php

namespace Vendor\Module\Ui\Component\Listing;

use Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider;

/**
 * Class Actions
 */
class CustomDataProvider extends DataProvider
{
    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
     return [
         'items' => [
           [
            'id' => 1,
            'link' => 'https://magento.local/path/to/controller/id/1'
           ],
           [
            'id' => 2,
            'link' => 'https://magento.local/path/to/controller/id/2'
          ],
          ],
          'totalRecords' => 2
        ];
    }
}

Result

LinkColumn Component example