How to set column as clickable in UI Column Component Listing Magento 2?

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.

In your, UI_listing XML file, add column content as,

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,

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

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.

Leave a Reply