Docs

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.

Top

CSV

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

Top

Include Header Info

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

Top

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.

<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>
function getGridData() {
  const zgRef = document.querySelector('zing-grid');
  const gridData = zgRef.getData({cols:true});
}

function renderLaureates(laureates,$cell) {...}

Top

Include Visible Rows

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

Top

Selected

You can also use API event grid:select to grab data when dragging and highlighting.

Top

Papaparse Demo

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

Top