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:

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

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

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 Demo
First	Last	Number
Maria	John	123
David	Smith	456
Felicity	Snow	789

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