ExportButton component

Overview

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

Structure

Constructor: app/code/Magento/Ui/view/base/web/js/grid/export.js

ExportButton configuration

Extends all UiElement configuration.

ExportButton-specific configuration:

Option	Description	Type	Default
`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`

`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

How to use

To enable the ExportButton сomponent, 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>

Example

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.

How to add new export format

To add new export format:

Add configuration data to ExportButton definition Magento/Ui/view/base/ui_component/etc/definition.xml
Add controller for new format processing \Magento\Ui\Controller\Adminhtml\Export\GridToFoo
Add converter \Magento\Ui\Model\Export\ConvertToFoo

Edit this page on GitHub

Give us feedback