How to render a custom class in Ui component - Magesan

How to render a custom class in Ui component

How to render a custom class in Ui component

Rendering a class in UI component is essential part in the magento 2 grid because, if you want to display the store view names instead of the store view ids then the solution is render a custom class and convert the store view ids as store view names.

Let’s assume that you have already created grid with data and your data has store_id as well.

Ui component grid path can be :- Magesan/Extension/view/adminhtml/ui_component/magesan_extension_listing.xml

<column name="store_id" class="Magesan\Extension\Ui\Component\Listing\Column\StoreViews">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Store view</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">select</item>

As you can see above i rendering a class named Magesan\Extension\Ui\Component\Listing\Column\StoreViews

which can convert the store view ids to the store view names


namespace Magesan\Extension\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Store\Model\StoreManagerInterface;

class StoreViews extends \Magento\Ui\Component\Listing\Columns\Column
    protected $_storeManager;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        $this->_storeManager = $storeManager;
        parent::__construct($context, $uiComponentFactory,     $components, $data);

    public function prepareDataSource(array $dataSource)
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                if (isset($item['store_id']) && $item['store_id']) {
                    $storeId          = $item['store_id'];
                    $storeViewName    = $this->_storeManager->getStore($storeId)->getName();
                    $item['store_id'] = $storeViewName;

        return $dataSource;

Leave a Reply

Your email address will not be published. Required fields are marked *.

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>