How to Add Category Column to Product Grid in Magento 2

Grids in Magento 2 are an easy way to list, sort, filter, edit, or update data. Earlier I posted the solution to create admin grid in Magento 2.

And taking it a notch up here’s the solution to add category column to product grid in Magento 2.

The default Magento 2 product grid allows adding columns of the product attribute. However, adding custom columns of category in the product grid in Magento 2 is not easy. You can also add action column in Magento 2 admin grid for enabling you to perform record specific actions such as deleting and editing.

You can use this solution to add category column which can be useful for better product management and optimized backend performance.

Method to Add Category Column to Product Grid in Magento 2:

Create app\code\Vendor\Extension\etc\di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider" type="Vendor\Extension\Ui\DataProvider\Product\ProductDataProvider" />
</config>

<?xml version="1.0"?>

</config>

Create app\code\Vendor\Extension\Model\Category\Categorylist.php

<?php

namespace Vendor\Extension\Model\Category;

class CategoryList implements \Magento\Framework\Option\ArrayInterface
{
    public function __construct(
        \Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $collectionFactory
    ) {
        $this->_categoryCollectionFactory = $collectionFactory;

    }
    public function toOptionArray($addEmpty = true)
    {

         $collection = $this->_categoryCollectionFactory->create();
        $collection->addAttributeToSelect('name');//->addRootLevelFilter()->load();
        $options = [];
        if ($addEmpty) {
            $options[] = ['label' => __('-- Please Select a Category --'), 'value' => ''];
        }
        foreach ($collection as $category) {
            $options[] = ['label' => $category->getName(), 'value' => $category->getId()];
        }
        return $options;
    }
}

<?php

namespace Vendor\Extension\Model\Category;

class CategoryList implements \Magento\Framework\Option\ArrayInterface

{

public function __construct(

\Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $collectionFactory

) {

$this->_categoryCollectionFactory = $collectionFactory;

}

public function toOptionArray($addEmpty = true)

{

$collection = $this->_categoryCollectionFactory->create();

$collection->addAttributeToSelect('name');//->addRootLevelFilter()->load();

$options = [];

if ($addEmpty) {

$options[] = ['label' => __('-- Please Select a Category --'), 'value' => ''];

}

foreach ($collection as $category) {

$options[] = ['label' => $category->getName(), 'value' => $category->getId()];

}

return $options;

}

Create app\code\Vendor\Extension\Ui\Component\Listing\Column\Category.php

<?php

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

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

class Category extends \Magento\Ui\Component\Listing\Columns\Column
{

    public function prepareDataSource(array $dataSource)
    {
        $fieldName = $this->getData('name');
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $productId = $item['entity_id'];

                $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $product = $objectManager->create('Magento\Catalog\Model\Product')->load($productId);
                $cats = $product->getCategoryIds();
                $categories = array();
                if (count($cats)) {
                    foreach ($cats as $cat) {
                        $category = $objectManager->create('Magento\Catalog\Model\Category')->load($cat);
                        $categories[] = $category->getName();
                    }
                }
                $item[$fieldName] = implode(',', $categories);
            }
        }
        return $dataSource;
    }
}

<?php

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

use Magento\Framework\View\Element\UiComponentFactory;

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

class Category extends \Magento\Ui\Component\Listing\Columns\Column

{

public function prepareDataSource(array $dataSource)

{

$fieldName = $this->getData('name');

if (isset($dataSource['data']['items'])) {

foreach ($dataSource['data']['items'] as & $item) {

$productId = $item['entity_id'];

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$product = $objectManager->create('Magento\Catalog\Model\Product')->load($productId);

$cats = $product->getCategoryIds();

$categories = array();

if (count($cats)) {

foreach ($cats as $cat) {

$category = $objectManager->create('Magento\Catalog\Model\Category')->load($cat);

$categories[] = $category->getName();

}

$item[$fieldName] = implode(',', $categories);

}

return $dataSource;

}

Create app\code\Vendor\Extension\Ui\DataProvider\Product\ProductDataProvider.php

<?php

namespace Vendor\Extension\Ui\DataProvider\Product;

class ProductDataProvider extends \Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider
{
    public function addFilter(\Magento\Framework\Api\Filter $filter)
    {
        if ($filter->getField() == 'category_id') {
            $this->getCollection()->addCategoriesFilter(array('in' => $filter->getValue()));
        } elseif (isset($this->addFilterStrategies[$filter->getField()])) {
            $this->addFilterStrategies[$filter->getField()]
                ->addFilter(
                    $this->getCollection(),
                    $filter->getField(),
                    [$filter->getConditionType() => $filter->getValue()]
                );
        } else {
            parent::addFilter($filter);
        }
    }
}

<?php

namespace Vendor\Extension\Ui\DataProvider\Product;

class ProductDataProvider extends \Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider

{

public function addFilter(\Magento\Framework\Api\Filter $filter)

{

if ($filter->getField() == 'category_id') {

$this->getCollection()->addCategoriesFilter(array('in' => $filter->getValue()));

} elseif (isset($this->addFilterStrategies[$filter->getField()])) {

$this->addFilterStrategies[$filter->getField()]

->addFilter(

$this->getCollection(),

$filter->getField(),

[$filter->getConditionType() => $filter->getValue()]

);

} else {

parent::addFilter($filter);

}

Create app\code\Vendor\Extension\view\adminhtml\ui_component\product_listing.xml

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
        <column name="category_id" class="Vendor\Extension\Ui\Component\Listing\Column\Category">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Vendor\Extension\Model\Category\Categorylist</item>
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="add_field" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string" translate="true">Categories</item>
                    <item name="sortOrder" xsi:type="number">75</item>
                    <item name="dataType" xsi:type="string">select</item>
                </item>
            </argument>
        </column>
        <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Created At</item>
                </item>
            </argument>
        </column>
        <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Updated At</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

<?xml version="1.0"?>

<item name="options" xsi:type="object">Vendor\Extension\Model\Category\Categorylist</item>

<item name="filter" xsi:type="string">select</item>

<item name="label" xsi:type="string" translate="true">Categories</item>

<item name="dataType" xsi:type="string">select</item>

</item>

</argument>

</column>

<item name="filter" xsi:type="string">dateRange</item>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>

<item name="label" xsi:type="string" translate="true">Created At</item>

</item>

</argument>

</column>

<item name="filter" xsi:type="string">dateRange</item>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>

<item name="label" xsi:type="string" translate="true">Updated At</item>

</item>

</argument>

</column>

</columns>

</listing>

That’s it.

If you want to directly download this extension from Github, check here.

Any doubts? Feel free to mention them in the Comments section below.

I’d be happy to help.

Please share the solution with fellow developers via social media.

Thank you.

Also Read:

How to Update Table Data in Magento 2

(based on 15 Reviews)

Jignesh Parmar

An expert in his field, Jignesh is the team leader at Meetanshi and a certified Magento developer. His passion for Magento has inspired others in the team too. Apart from work, he is a cricket lover.

How To Run Direct SQL Query In Magento 2

Our Guide to Run Direct SQL Query in Magento 2

How to Create Custom Customer Attribute in Magento 2

Solved – Display Product Title With Special Characters in Magento 2 Mini Cart

How to Configure Layered Navigation in Magento 2

4 Comments

Jason
March 4, 2022 at 1:14 am

Reply

Hi Jignesh,

Thank you so much for this tutorial!
Unluckily, it didn’t show the category column on Magento 2.4 .1 as well.
I also checked the dropdown button, but the category selection is not available there.
Would you mind me double-checking the steps after having these scripts in the directory and exploring potential reasons?
I ran “php bin/magento cache:clean” in the command line. Should I also run something else?

Many thanks,
Jason
- Sanjay Jethva
  March 9, 2022 at 3:22 pm
  
  Reply
  
  Hello Jason,
  Please check in the top right bar dropdown and check whether it’s checked or not.
  If it’s unchecked then check it.
  Thank You
Michel
February 17, 2021 at 7:16 pm

Reply

Hi Jignesh,
thanks for the post!
I tried to implement in my Magento, but unfortunately it does not work.
Nothing happens and the category column is not available. I also cleared Magento cache.
I use Magento 2.3.6. Di you have any idea?
Thanks & best regards,
Michel
- Sanjay Jethva
  February 19, 2021 at 1:01 pm
  
  Reply
  
  Hello Michel,
  Please check if the category column is enabled from here or not – https://drops.meetanshi.com/ADotnk
  I hope it helps.
  Thank you

How to Add Category Column to Product Grid in Magento 2

Method to Add Category Column to Product Grid in Magento 2:

Prev

Next

Solved – Display Product Title With Special Characters in Magento 2 Mini Cart

How to Configure Layered Navigation in Magento 2

4 Comments

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

How to Add Category Column to Product Grid in Magento 2

Method to Add Category Column to Product Grid in Magento 2:

Prev

Next

Solved – Display Product Title With Special Characters in Magento 2 Mini Cart

How to Configure Layered Navigation in Magento 2

4 Comments

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

Share

Copy short link