Exporting Data

ZingGrid has a default set of export features through getData(), as well as other customizable export features through our API.

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

Data

Use the getData() method to retrieve data.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSV

Use the getData({csv:true}) method to retrieve data.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Include Header Info

Use the getData({headers:true}) method to retrieve data.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Include Visible Columns

Use the getData({cols:true}) method to retrieve data.

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.

CloseCopy Copied
<zing-grid columns-controls>
  <zg-colgroup>
    <zg-column index="year" hidden></zg-column>
    <zg-column index="category"></zg-column>
    <zg-column index="laureates" renderer="renderLaureates"></zg-column>
  </zg-colgroup>
</zing-grid>
CloseCopy Copied
function getGridData() {
  const zgRef = document.querySelector('zing-grid');
  const gridData = zgRef.getData({cols:true});
}

function renderLaureates(laureates,$cell) {...}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Include Visible Rows

Use the getData({rows:true}) method to retrieve data.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Selected

You can also use API eventgrid:select to grab data when dragging and highlighting.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Papaparse Demo

You can use third party resources to export your grid data as well.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading