Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Display a modified collection in grid using ui_component magento 2

    Suppose you need to add filters to your collection and you want to display your grid using ui_component as they allow you to configure the page manipulating the UI components, then follow the steps below.

    Now suppose you want to display products whose price is greater than 100.

    Add this code in your Webkul/ModuleName/view/adminhtml/ui_component/example.xml

    <dataSource name="test_products_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Webkul\ModuleName\Ui\DataProvider\Product\ProductDataProvider</argument>
        <argument name="name" xsi:type="string">test_products_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
        <argument name="requestFieldName" xsi:type="string">entity_id</argument>
        <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="update_url" xsi:type="url" path="mui/index/render"/>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>

    In the code above,

    <argument name=”class” xsi:type=”string”>Webkul\ModuleName\Ui\DataProvider\Product\ProductDataProvider</argument>

    this line holds to path to our collection.

    Now in file ProductDataProvider.php in path Webkul/ModuleName/Ui/DataProvider/Product


    namespace Webkul\ModuleName\Ui\DataProvider\Product;
    use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
    class ProductDataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
        public function __construct(
            CollectionFactory $collectionFactory,
            array $meta = [],
            array $data = []
        ) {
            $collection = $collectionFactory->create();
            $this->collection = $collectionFactory->create()
                              ->addAttributeToFilter('price', ['gt' => 100]);

    And that’s it. Follow the rest like you normally do to display a grid.

    Happy coding 🙂

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again