Reading list Switch to dark mode

    Add custom columns along with filters to Product Grid in Admin Magento 2

    Updated 22 February 2024

    Today, we will learn how to add your custom columns to Product Grid with there filters.

    Firstly, we will create Product listing UI component instance. The original file for rendering the Product Grid is Magento_Catalog/view/adminhtml/ui_component/product_listing.xml

    Create a file with same name and path in your module.


    <?xml version="1.0" encoding="UTF-8"?>
    <listing xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
            <column name="custom_column" sortOrder="76">
                    <label translate="true">Custom Column Title</label>

    New step will be to add this custom column field to the Product Collection.

    Searching for an experienced
    Magento 2 Company ?
    Find out More


    namespace [Vendor]\[Module_Name]\Ui\DataProvider\Product;
    class CustomColumnField implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface 
        public function addField(
            \Magento\Framework\Data\Collection $collection,
            $alias = null

    In above code the joinField method parameters are explained below –

    ‘custom_column’ -> field name given in product_listing.xml
    ‘table_name’ -> table name of the field from which data is required.
    ‘custom_column’ -> the actual column name in the table.
    ‘customfield_id = entity_id’ -> the condition of Join
    ‘null’ -> this is the where condition
    ‘left’ -> type of join

    Now we will add the Filter to this field if someone filters the filed


    namespace [Vendor]\[Module_Name]\Ui\DataProvider\Product; 
    class CustomColumnFilter implements \Magento\Ui\DataProvider\AddFilterToCollectionInterface 
        public function addFilter(
            \Magento\Framework\Data\Collection $collection,
            $condition = null
            if (isset($condition['like'])) 
                $collection->addFieldToFilter($field, $condition); 

    Final step is to add the custom column field and filter to the product_listing data provider.


    <?xml version="1.0"?>
    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider"> 
                <argument name="addFieldStrategies" xsi:type="array"> 
                    <item name="custom_column" xsi:type="object">[Vendor]\[Module_Name]\Ui\DataProvider\Product\CustomColumnField</item> 
                <argument name="addFilterStrategies" xsi:type="array"> 
                    <item name="custom_column" xsi:type="object">[Vendor]\[Module_Name]\Ui\DataProvider\Product\CustomColumnFilter</item> 

    . . .

    Leave a Comment

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


  • Mokadev
    • Vladev
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home