---
title: "Retrieving CSV Data | Docs"
description: "To populate the grid using CSV data, set the data or src attribute to CSV data."
url: https://www.zinggrid.com/docs/data/csv
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/csv.md
mode: provenance
representation: markdown
origin_response_id: 65bd947caf76c5123b5dff909cd050f3
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.664Z
version_nonce: a064770727f93d0c9656f9c0dfba58ef
generated_at_utc: 2026-10-25T07:31:09.894Z
response_nonce: a745df9b7e2647302461354208b1d78d
```

# Retrieving CSV Data

In this guide, we'll walk you through how to assign or retrieve CSV data along with how to configure how to parse the data.

## Assigning Data to the Grid

If you want to populate your grid using CSV data, then you just need to either set set the `data` or `src` attribute.

If your data is hosted in an endpoint, just set the URL to the `src` attribute, like so:

```html
<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data.csv"></zg-data>
</zing-grid>
```

**or**

Assign the data to the `data` attribute via JavaScript.

```html
<zing-grid id="myZingGrid"></zing-grid>

<script>
  let zgRef = document.querySelector('#myZingGrid');
  zgRef.data = `CSV Demo`
    + `First,Last,Number`
    + `Maria,John,123`
    + `David,Smith,456`
    + `Felicity,Snow,789`;
</script>
```

## Attributes

Once the CSV data is added, you can add the following `<zg-param>` to configure how to parse the data:

| Attribute | Description |
|-----------|-------------|
| csvCaption | Specify if the first line should be the caption. |
| csvDelimiter | Specify the separator to split the columns. |
| csvHeader | Specify if the first line (or second if caption defined) should be the column headers |
| csvLineSeparator | Specify the separator to split the rows. |

## Demo

Refer to the following demo for an in depth look at using CSV with ZingGrid.
Note that the CSV data is tab-separated, so the grid is configured to parse this data format.

CSV file:
```csv
CSV Demo
First	Last	Number
Maria	John	123
David	Smith	456
Felicity	Snow	789
```

```html
<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-tabbed-data.csv">
    <zg-param name="csvCaption" value="true"></zg-param>
    <zg-param name="csvDelimiter" value="	"></zg-param>
    <zg-param name="csvHeader" value="true"></zg-param>
    <zg-param name="responseType" value="text/csv"></zg-param>
  </zg-data>
</zing-grid>
```

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