You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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