Magento UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others<\/em>.<\/p>\n\n\n\n They are designed for simple and flexible user interface (UI) rendering. Components are responsible for rendering result page fragments and providing\/supporting further interactions of\u00a0JavaScript\u00a0components and server.<\/p>\n\n\n\n You can also implement Magento UI components as a standard\u00a0module\u00a0named Magento_UI.<\/p>\n\n\n\n To use UI components in your custom module, you need to add a dependency for the Magento_UI module in\u00a0your component\u2019s composer.json file.<\/p>\n\n\n\n The following XSD file contains rules and limitations shared between all components (both definitions and instance configurations):<\/p>\n\n\n\n Extension\u00a0developers cannot extend this XSD scheme and introduce new components, but can customize existing ones.<\/p>\n\n\n\n In Magento 2 there are basic and secondary UI components.<\/p>\n\n\n\n Basic components are:<\/p>\n\n\n\n All other UI components are secondary.<\/p>\n\n\n\n We declare Basic components in the\u00a0page layout files and secondary components in the top-level component’s instances configuration files.<\/p>\n\n\n\n We can configure components for both\u00a0Admin\u00a0and\u00a0storefront.<\/p>\n\n\n\n Listing is a\u00a0basic component\u00a0that implements grids, lists, and tiles with filtering, pagination, sorting, and other features.<\/p>\n\n\n\n To know how to create a grid using UI Component in Magento 2, you can check our other blog by clicking here<\/a>. Now create MyColumn class as:<\/p>\n\n\n\n In doing so, you will be able to display UI grid columns on condition basis.<\/p>\n\n\n\n Thank you for reading this article on How to display UI grid columns on condition basis in Magento 2, we hope you liked it.<your module root dir>\/Magento\/Ui\/etc\/ui_definition.xsd<\/code><\/p>\n\n\n\n<\/a>General structure<\/h3>\n\n\n\n
\n
Steps to display admin grid columns on condition basis<\/h2>\n\n\n\n
You can include your UI component in your layout XML file. For example, the customer_listing<\/code> UI component is included in <Magento_Customer_module_dir>\/view\/adminhtml\/layout\/customer_index_index.xml<\/code> as showing in below image:<\/p>\n\n\n\n![\"image-18-83\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/image-18-83.png\")
<\/figure>\n\n\n\n
In your app\/code\/Webkul\/Demo\/view\/adminhtml\/ui_component\/demo_blog_listing.xml , add the class attribute in the column tag as below:<\/p>\n\n\n\n<column name="nameofyourcolumn" class="Webkul\\Demo\\Ui\\Component\\Listing\\Column\\MyColumn"><\/pre>\n\n\n\n
<?php\n\nnamespace Webkul\\Demo\\Ui\\Component\\Listing\\Column;\n\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nuse Magento\\Framework\\DataObject;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\n\nclass MyColumn extends Column{\n\n public function __construct(\n ContextInterface $context,\n UiComponentFactory $uiComponentFactory,\n array $components = [],\n array $data = []\n ) {\n \/\/ here you can use your condition\n $hideCondition = true;\n if ($hideCondition) {\n $data = [];\n }\n parent::__construct($context, $uiComponentFactory,$components, $data);\n }\n}<\/pre>\n\n\n\n
You can also view our wide range of ready-to-use\u00a0Magento 2 extensions<\/a>.<\/p>\n\n\n\nRelated Blogs:<\/h3>\n\n\n\n
\n