How to use the UI export button component in Magento 2?

Learn how to use the UI export button component in Magento 2 platform with a few steps here.

“UI Export Button Component” is a “list/phase secondary component”. It can be used to export the grid data to a specific data format (CV, XML, etc.)

You can observe at the file:\vendor\magento\module-ui\view\base\ui_component\etc\definition.xml

Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!

           Get your free live demo now: Click here

How to use the UI export button component in Magento 2?

<exportButton class="Magento\Ui\Component\ExportButton">

   <argument name="data" xsi:type="array">

       <item name="config" xsi:type="array">

           <item name="component" xsi:type="string">Magento_Ui/js/grid/export</item>

           <item name="displayArea" xsi:type="string">dataGridActions</item>

           <item name="options" xsi:type="array">

               <item name="cvs" xsi:type="array">

                   <item name="value" xsi:type="string">csv</item>

                   <item name="label" xsi:type="string" translate="true">CSV</item>

                   <item name="url" xsi:type="string">mui/export/gridToCsv</item>

               </item>

               <item name="xml" xsi:type="array">

                   <item name="value" xsi:type="string">xml</item>

                   <item name="label" xsi:type="string" translate="true">Excel XML</item>

                   <item name="url" xsi:type="string">mui/export/gridToXml</item>

               </item>

           </item>

       </item>

   </argument>

</exportButton>

• You can use the following:

<listingToolbar name="listing_top">

   ...

   <exportButton name="export_button"/>

   ...

</listingToolbar>

You also can use the export button Component to add export button element with specified select provider item to the listing configuration file.

<listingToolbar name="listing_top">

   ...

   <exportButton name="export_button">

       <argument name="data" xsi:type="array">

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">{select_provider_path}</item>

           </item>

       </argument>

   </exportButton>

   ...

</listingToolbar>

• You can observe at the file: \vendor\magento\module-sales\view\adminhtml\ui_component\sales_order_grid.xml to see it:

<container name="listing_top">

   ...

   <exportButton name="export_button">

       <argument name="data" xsi:type="array">

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">sales_order_grid.sales_order_grid.sales_order_columns.ids</item>

           </item>

       </argument>

   </exportButton>

   ...

</container>

The following steps I mention above are the simplest process for you to Magento UI Export Button Component in Magento 2 platform. With this guide, you can deal with the Component in Magento 2 easily. Each store has a Component in Magento 2 with multiple features.

Build your Magento 2 store with all the best-in-class frontend and backend features here, check now!!!