This is archived documentation for Magento v2.2 and is no longer supported. Go to the latest documentation.

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