{"id":1200,"date":"2024-02-28T18:44:34","date_gmt":"2024-02-28T13:14:34","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1200"},"modified":"2025-01-11T21:15:21","modified_gmt":"2025-01-11T15:45:21","slug":"how-to-add-category-column-with-filter-to-the-admin-product-grid-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-category-column-with-filter-to-the-admin-product-grid-in-magento-2\/","title":{"rendered":"How To Add Category Column With Filter To The Admin Product Grid In Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add Category Columns with filters to the Admin Product Grid in Magento 2.<\/p>\n\n\n\n

By default Magento 2 Admin Product grid provides information about products such as name, price, SKU etc.<\/p>\n\n\n\n

Adding a category column with a filter improves the user experience.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Category Column with filter to the Admin Product Grid in Magento 2.<\/p>\n\n\n\n

STEPS FOR ADD CATEGORY COLUMN WITH FILTER TO THE ADMIN PRODUCT GRID IN MAGENTO 2<\/strong><\/p>\n\n\n\n

Step 1: Create file product_listing.xml<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component\/product_listing.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0" ?>\n\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<listingToolbar name="listing_top">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<filters name="listing_filters">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<filterSelect name="category_id" provider="${ $.parentName }" component="Magento_Ui\/js\/form\/element\/ui-select" template="ui\/grid\/filters\/elements\/ui-select">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<options class="Vendor\\Extension\\Model\\Category\\Categorylist"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<caption translate="true">Select...<\/caption>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label translate="true">Category<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<dataScope>category_id<\/dataScope>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/filterSelect>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/filters>\n\n\u00a0\u00a0\u00a0\u00a0<\/listingToolbar>\n\n\u00a0\u00a0\u00a0\u00a0<columns name="product_columns" class="Magento\\Catalog\\Ui\\Component\\Listing\\Columns">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<column name="category_id" class="Vendor\\Extension\\Ui\\Component\\Listing\\Column\\Category">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<argument name="data" xsi:type="array">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="options" xsi:type="object">Vendor\\Extension\\Model\\Category\\Category List<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="config" xsi:type="array">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="add_field" xsi:type="boolean">true<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="label" xsi:type="string" translate="true">Categories<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="sortOrder" xsi:type="number">75<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="dataType" xsi:type="string">select<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/argument>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/column>\n\n\u00a0\u00a0\u00a0\u00a0<\/columns>\n\n<\/listing>\n<\/pre><\/div>\n\n\n
Step 2: Create file Category.php<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Ui\/Component\/Listing\/Column\/Category.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Ui\\Component\\Listing\\Column;\n\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\n\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\n\nuse Magento\\Framework\\Api\\SearchCriteriaBuilder;\n\nuse Magento\\Framework\\UrlInterface;\n\nclass Category extends \\Magento\\Ui\\Component\\Listing\\Columns\\Column\n\n{\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* Constructor.\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param ContextInterface \u00a0 $context\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param UiComponentFactory $uiComponentFactory\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param SearchCriteriaBuilder $criteria\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param \\Magento\\Catalog\\Model\\ProductFactory $product\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param \\Magento\\Catalog\\Model\\CategoryFactory $category\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param\u00a0 UrlInterface $urlBuilder\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param array $data\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ContextInterface $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UiComponentFactory $uiComponentFactory,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SearchCriteriaBuilder $criteria,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Catalog\\Model\\ProductFactory $product,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Catalog\\Model\\CategoryFactory $category,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UrlInterface $urlBuilder,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $components = [],\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = [])\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->_urlBuilder = $urlBuilder;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->_searchCriteria = $criteria;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->product = $product;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->category = $category;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $uiComponentFactory, $components, $data);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function prepareDataSource(array $dataSource)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$fieldName = $this->getData('name');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset($dataSource['data']['items'])) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($dataSource['data']['items'] as & $item) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$productId = $item['entity_id'];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$product = $this->product->create()->load($productId);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$cats = $product->getCategoryIds();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$categories = [];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (count($cats)) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($cats as $cat) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$category = $this->category->create()->load($cat);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$categories[] = $category->getName();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$item[$fieldName] = implode(',', $categories);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $dataSource;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Create file Categorylist.php<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Model\/Category\/Categorylist.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Model\\Category;\n\nclass CategoryList implements \\Magento\\Framework\\Option\\ArrayInterface\n\n{\n\n\u00a0\u00a0\u00a0\u00a0private $categoryCollectionFactory;\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Catalog\\Model\\ResourceModel\\Category\\CollectionFactory $collectionFactory\n\n\u00a0\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->categoryCollectionFactory = $collectionFactory;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function toOptionArray($addEmpty = true)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$collection = $this->categoryCollectionFactory->create();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$collection->addAttributeToSelect("name");\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$options = [];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($addEmpty) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$options[] = ["label" => __('-- Please Select a Category --'), "value" => ''];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($collection as $category) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$options[] = ['label' => $category->getName(), 'value' => $category->getId()];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $options;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 4: Create file di.xml<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/etc\/di.xml<\/strong><\/p>\n\n\n
\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<preference for="Magento\\Catalog\\Ui\\DataProvider\\Product\\ProductDataProvider" type="Vendor\\Extension\\Ui\\DataProvider\\Product\\ProductDataProvider" \/>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 5: Create file ProductDataProvider.php<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Ui\/DataProvider\/Product\/ProductDataProvider.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Ui\\DataProvider\\Product;\n\nclass ProductDataProvider extends \\Magento\\Catalog\\Ui\\DataProvider\\Product\\ProductDataProvider\n\n{\n\n\u00a0\u00a0\u00a0\u00a0public function addFilter(\\Magento\\Framework\\Api\\Filter $filter)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($filter->getField() == 'category_id') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->getCollection()->addCategoriesFilter(['in' => $filter->getValue()]);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::addFilter($filter);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 6: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento setup:upgrade\n\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n

<\/strong>Step 7: Output:<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/p>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add Category Column with filter to the Admin Product Grid in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>