ExportButton component

The ExportButton component implements the ability to export grid data to the specified data format (cvs, xml, and so on).

Configuration options

Option Description Type Default
options List of available formats in which the table's data can be exported. Array<ExportOption> [{
value: "csv",
label: "CSV",
url: "mui/export/gridToCsv"
}, {
value: "xml",
label: "Excel XML",
url: "mui/export/gridToXml"
}]
template Path to the component’s .html template. String ui/grid/exportButton

ExportOption interface

Option Description Type Required
label Option's label. String Required
url Path to controller that will process the request. String Required
value Identifier of the export option. String Required

Examples

Configure component

To enable the ExportButton component, add the exportButton element with a selectProvider item to the listing configuration file.

<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>

Use sales_order_grid.xml

Example: <Magento_Sales_module_dir>/view/adminhtml/ui_component/sales_order_grid.xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <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>
</listing>

By default Magento allows CSV and Excel XML export data formats.

Add new export format

To add new export format:

Source files

Extends UiElement: