---
title: "Exporting Data | Features"
description: "ZingGrid has default and customizable export features to suit your needs."
url: https://www.zinggrid.com/docs/features/exporting-data
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/exporting-data.md
mode: provenance
representation: markdown
origin_response_id: e0b341a277a50e01f89e3fc94e37d6b3
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.686Z
version_nonce: f050ec3c09ebc6963eac21e1ac8e2806
generated_at_utc: 2026-11-09T16:15:15.271Z
response_nonce: 155ff1655163d03b8330cca73d711988
```

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

> **Note:** 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:

[Example code](https://app.zingsoft.com/demos/embed/CODT368A)

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

[Example code](https://app.zingsoft.com/demos/embed/J9I54WVU)

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

[Example code](https://app.zingsoft.com/demos/embed/CNJJFJI9)

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

> **Note:** 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:

[Example code](https://app.zingsoft.com/demos/embed/V1CK8UJZ)

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

[Example code](https://app.zingsoft.com/demos/embed/KCET02X2)

## 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](https://www.papaparse.com/):

[Example code](https://app.zingsoft.com/demos/embed/R2NWM3QD)

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

* [getData() API Method](https://www.zinggrid.com/docs/api-methods#zg-data)
* [API Events List](https://www.zinggrid.com/docs/api-events)