Exporting Data

ZingGrid allows you to export your grid data through our API method getData(), which can be customized to fit your data export needs.

For all the demos on this page, check your console for exported output.

Data

To retrieve data from the grid, use the getData() method, which will return the contents of the data attribute defined in <zing-grid>. The exported data will be in JSON format by default.

getData() Grid

Here is a complete grid which calls the getData() method and prints its return to the console:

Top

CSV

To retrieve data as comma-separated values, use the getData({csv:true}) method.

getData({csv:true}) Grid

Here is a complete grid which calls the getData() method and prints its return to the console as comma-separated values:

Top

Include Header Info

To retrieve data with header info included, use the getData({headers:true}) method.

getData({headers:true}) Grid

Here is a complete grid which calls the getData() method and prints its return to the console with header information included:

Top

Include Only Visible Columns

If your grid has hidden columns, using getData() or getData({cols:"all"}) will return all data, including anything that is hidden. To retrieve data from only the visible columns, use the getData({cols:"visible"}) method.

Add the columns-controls attribute to add the menu for manually toggling column visibility. You can also hide columns by default with the hidden attribute.

Visible Columns Data Grid

Here is a complete grid which calls the getData() method and prints its return to the console with only the data from columns that are visible on the grid:

Top

Selected Data

Use the API event grid:select (grabs data when dragging and highlighting) in conjunction with getData() to export only selected data.

Selected Data Grid

Here is a complete grid which calls the getData() method with the grid:select event to export selected data:

Top

Third Party Resources

You can use third party resources to export your grid data as well.

Papa Parse Demo

Here is a complete grid which can be exported via the CSV parser Papa Parse:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid: