Menu Close
    Hire us Request quote Reading list Switch to dark mode

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

    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.

    app/code/[Vendor]/[Module_Name]/view/adminhtml/ui_component/product_listing.xml


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

    app/code/[Vendor]/[Module_Name]/Ui/DataProvider/Product/CustomColumnField.php


    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

    app/code/[Vendor]/[Module_Name]/Ui/DataProvider/Product/CustomColumnFilter.php


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

    app/code/[Vendor]/[Module_Name]/etc/adminhtml/di.xml

    . . .

    Comment (1)

    Add Your Comment

  • Mokadev
    Hi

    For those who can’t filter anymore the grid with the custom column it’s because a weird behaviour in magento 2.2.7+ try to find a product attribute with the code “custom_column” and throw an error.

    So the fix here is to use the addAttributeToFilter() method of the class Magento\Catalog\Model\ResourceModel\Product\Collection , to achieve that you have to rewrite the line:

    $collection->addFieldToFilter($field, $condition);

    Instead :

    $collection->addFieldToFilter([[‘attribute’ => $field, ‘eq’ => $condition[‘eq’]]]);

  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close