ExportButton component

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

Options

Option
Description
Type
Default Value
additionalParams
List of additional parameters added to each performed request.
{[name: string]: string}
[]
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
checked
The checked data format to export.
String
''

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>

The following is an example of configuring the component using thesales_order_grid selectProvider item, <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 the application allows CSV and Excel XML export data formats.

Add new export format

To add new export format:

Source files

Extends UiElement: