Magento 2 How to show column on the basis of admin config value in admin custom grid by using UiComponent?

Question

I had created a Custom Admin Grid by using uiComponent in which I am showing Order Details, please check below Screenshot

I had created System Configuration to show IGST, CST, SGST field or not, if it enables from admin then I will show this in grid otherwise not.

Code:

         <column name="price_igst">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">IGST</item>
                </item>
            </argument>
        </column>
        <column name="price_cgst">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">CGST</item>
                </item>
            </argument>
        </column>
        <column name="price_sgst">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">SGST</item>
                </item>
            </argument>
        </column>

Please help me how to do it?

Answer 1

Need to add to your UI component a new tag

<container name="listing_top">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/grid/toolbar</item>
        </item>
    </argument>
    <container name="columns_controls">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsData" xsi:type="array">
                    <item name="provider" xsi:type="string">you.provaider.name</item>
                </item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                <item name="displayArea" xsi:type="string">dataGridActions</item>
            </item>
        </argument>
    </container>
</container>

if you have container listing_top in your ui component file, just add the tag columns_control to it.