{"id":135688,"date":"2018-07-28T06:48:45","date_gmt":"2018-07-28T06:48:45","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=135688"},"modified":"2024-03-26T09:11:32","modified_gmt":"2024-03-26T09:11:32","slug":"display-a-modified-collection-in-grid-using-ui_component-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/","title":{"rendered":"Display a modified collection in grid using ui_component magento 2"},"content":{"rendered":"\n<p>Suppose you need to add filters to your collection in <a href=\"https:\/\/store.webkul.com\/Magento-2.html\">magento 2<\/a> 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.<\/p>\n\n\n\n<p>Now suppose you want to display products whose price is greater than 100.<\/p>\n\n\n\n<p>Add this code in your Webkul\/ModuleName\/view\/adminhtml\/ui_component\/example.xml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;dataSource name=&quot;test_products_data_source&quot;&gt;\n    &lt;argument name=&quot;dataProvider&quot; xsi:type=&quot;configurableObject&quot;&gt;\n    &lt;argument name=&quot;class&quot; xsi:type=&quot;string&quot;&gt;Webkul\\ModuleName\\Ui\\DataProvider\\Product\\ProductDataProvider&lt;\/argument&gt;\n    &lt;argument name=&quot;name&quot; xsi:type=&quot;string&quot;&gt;test_products_data_source&lt;\/argument&gt;\n    &lt;argument name=&quot;primaryFieldName&quot; xsi:type=&quot;string&quot;&gt;entity_id&lt;\/argument&gt;\n    &lt;argument name=&quot;requestFieldName&quot; xsi:type=&quot;string&quot;&gt;entity_id&lt;\/argument&gt;\n    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n    &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n        &lt;item name=&quot;update_url&quot; xsi:type=&quot;url&quot; path=&quot;mui\/index\/render&quot;\/&gt;\n    &lt;\/item&gt;\n    &lt;\/argument&gt;\n    &lt;\/argument&gt;\n    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n        &lt;item name=&quot;js_config&quot; xsi:type=&quot;array&quot;&gt;\n            &lt;item name=&quot;component&quot; xsi:type=&quot;string&quot;&gt;Magento_Ui\/js\/grid\/provider&lt;\/item&gt;\n        &lt;\/item&gt;\n    &lt;\/argument&gt;\n&lt;\/dataSource&gt;<\/pre>\n\n\n\n<p>In the code above,<\/p>\n\n\n\n<p>&lt;argument name=&#8221;class&#8221; xsi:type=&#8221;string&#8221;&gt;Webkul\\ModuleName\\Ui\\DataProvider\\Product\\ProductDataProvider&lt;\/argument&gt;<\/p>\n\n\n\n<p>this line holds to path to our collection.<\/p>\n\n\n\n<p>Now in file&nbsp;ProductDataProvider.php in path&nbsp;Webkul\/ModuleName\/Ui\/DataProvider\/Product<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">namespace Webkul\\ModuleName\\Ui\\DataProvider\\Product;\n\nuse Magento\\Catalog\\Model\\ResourceModel\\Product\\CollectionFactory;\n\nclass ProductDataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider\n{\n\n    public function __construct(\n        CollectionFactory $collectionFactory,\n        $name,\n        $primaryFieldName,\n        $requestFieldName,\n        array $meta = &#091;],\n        array $data = &#091;]\n    ) {\n        $collection = $collectionFactory-&gt;create();\n        parent::__construct(\n            $name,\n            $primaryFieldName,\n            $requestFieldName,\n            $meta,\n            $data\n        );\n        $this-&gt;collection = $collectionFactory-&gt;create()\n                          -&gt;addAttributeToSelect(&#039;*&#039;)\n                          -&gt;addAttributeToFilter(&#039;price&#039;, &#091;&#039;gt&#039; =&gt; 100]);\n    }\n}<\/pre>\n\n\n\n<p>And that&#8217;s it. Follow the rest like you normally do to display a grid.<\/p>\n\n\n\n<p>Happy coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Suppose you need to add filters to your collection in magento 2 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 <a href=\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":164,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[3496],"class_list":["post-135688","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-ui_component"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Display a modified collection in grid using ui_component magento 2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display a modified collection in grid using ui_component magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-28T06:48:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-26T09:11:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Paul Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Dutta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\"},\"author\":{\"name\":\"Paul Dutta\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748\"},\"headline\":\"Display a modified collection in grid using ui_component magento 2\",\"datePublished\":\"2018-07-28T06:48:45+00:00\",\"dateModified\":\"2024-03-26T09:11:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\"},\"wordCount\":132,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"ui_component\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\",\"name\":\"Display a modified collection in grid using ui_component magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2018-07-28T06:48:45+00:00\",\"dateModified\":\"2024-03-26T09:11:32+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display a modified collection in grid using ui_component magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748\",\"name\":\"Paul Dutta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Paul Dutta\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/paul-dutta287\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display a modified collection in grid using ui_component magento 2 - Webkul Blog","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Display a modified collection in grid using ui_component magento 2 - Webkul Blog","og_description":"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","og_url":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-07-28T06:48:45+00:00","article_modified_time":"2024-03-26T09:11:32+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Paul Dutta","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Paul Dutta","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/"},"author":{"name":"Paul Dutta","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748"},"headline":"Display a modified collection in grid using ui_component magento 2","datePublished":"2018-07-28T06:48:45+00:00","dateModified":"2024-03-26T09:11:32+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/"},"wordCount":132,"commentCount":5,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["ui_component"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/","url":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/","name":"Display a modified collection in grid using ui_component magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2018-07-28T06:48:45+00:00","dateModified":"2024-03-26T09:11:32+00:00","description":"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","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/display-a-modified-collection-in-grid-using-ui_component-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Display a modified collection in grid using ui_component magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748","name":"Paul Dutta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Paul Dutta"},"url":"https:\/\/webkul.com\/blog\/author\/paul-dutta287\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/135688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/164"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=135688"}],"version-history":[{"count":7,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/135688\/revisions"}],"predecessor-version":[{"id":429491,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/135688\/revisions\/429491"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=135688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=135688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=135688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}