<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.caption-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
zing-grid[loading] {
height: 168px;
}
</style>
</head>
<body>
<h1>Lets Connect a Grid to a CSV on the Client</h1>
<p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
<p>You can click the following button to export the data back to csv and save it.</p>
<button onClick="_exportDataToCSV()">Export To CSV</button>
<p>You can also highlight (drag and select) the grid cells and export that selection to a CSV via the context menu (right click menu.)</p>
<zing-grid pager page-size=15 selector sort context-menu="customMenu" editor>
<zg-caption>
<div class="caption-container">
<h2>CSV Export Demo Title</h2>
<button onClick="_exportDataToCSV()">Export To CSV</button>
</div>
</zg-caption>
<zg-colgroup>
<zg-column index="0" header="Year"></zg-column>
<!-- <zg-column index="1" header="IMDB"></zg-column> -->
<zg-column index="2" header="Title"></zg-column>
<!-- <zg-column index="3" header="Year"></zg-column>
<zg-column index="4" header="Budget"></zg-column>
<zg-column index="5" header="Budget"></zg-column> -->
<zg-column index="6" header="Budget" type="currency"></zg-column>
<zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
<zg-column index="8" header="Internation Growth" type="number"></zg-column>
<!-- <zg-column index="9" header="Year"></zg-column>
<zg-column index="10" header="Year"></zg-column>
<zg-column index="11" header="Year"></zg-column>
<zg-column index="12" header="Year"></zg-column>
<zg-column index="13" header="Year"></zg-column>
<zg-column index="14" header="Year"></zg-column> -->
</zg-colgroup>
<zg-menu id="customMenu">
<zg-menu-item role="exportSelection">Export Selection</zg-menu-item>
</zg-menu>
</zing-grid>
<!-- empty anchor tag for downloading -->
<a href="" id="downloadAnchor"> </a>
<!-- other script tags at the bottom of the page -->
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // function for exporting csv
function _exportDataToCSV() {
const data = zgRef.getData();
const csvData = Papa.unparse(data);
console.log('--- exporting data ----', data, csvData);
_downloadCSV('export-all.csv', csvData);
}
// use built in anchor tag functionality to download the csv through a blob
function _downloadCSV(fileName, data) {
const aRef = document.querySelector('#downloadAnchor');
let json = JSON.stringify(data),
blob = new Blob([data], {
type: "octet/stream"
}),
url = window.URL.createObjectURL(blob);
aRef.href = url;
aRef.download = fileName;
aRef.click();
window.URL.revokeObjectURL(url);
}
// Javascript code to execute after DOM content
const menuItem = document.querySelector('zg-menu-item[role="exportSelection"]');
// global reference to zing-grid on page
const zgRef = document.querySelector('zing-grid');
let data = [];
let dataKeys = [];
// register event listener for grid selection
let csvData = null;
zgRef.addEventListener('grid:select', function(e) {
const data = e.detail.ZGData.data;
csvData = Papa.unparse(data);
console.log('--- exporting selected data ----', data, csvData);
});
menuItem.addEventListener('click', function(e) {
console.log('--- native menuitem click ---', e);
if (csvData) _downloadCSV('selection.csv', csvData);
else alert('No cells selected. Please drag and select some cells to export.')
});
window.addEventListener('load', () => {
// Parse local CSV file
Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
download: true, // url to retrieve CSV file
complete: function(results) {
console.log("Finished:", results);
// if results came in correctly
if (results && results.data) {
// lets push the results into our new array
// new format
for (let i = 1; i < results.data.length; i++) {
data.push(results.data[i]);
// render first page now
if (i === 15) zgRef.setData(data);
}
// render rest of data after first page
setTimeout(function() {
zgRef.setData(data)
}, 500);
}
// we could also just delete the first index
// which contains the header information
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
<h1>Lets Connect a Grid to a CSV on the Client</h1>
<p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
<p>You can click the following button to export the data back to csv and save it.</p>
<button onClick="_exportDataToCSV()">Export To CSV</button>
<p>You can also highlight (drag and select) the grid cells and export that selection to a CSV via the context menu (right click menu.)</p>
<zing-grid pager page-size=15 selector sort context-menu="customMenu" editor>
<zg-caption>
<div class="caption-container">
<h2>CSV Export Demo Title</h2>
<button onClick="_exportDataToCSV()">Export To CSV</button>
</div>
</zg-caption>
<zg-colgroup>
<zg-column index="0" header="Year"></zg-column>
<!-- <zg-column index="1" header="IMDB"></zg-column> -->
<zg-column index="2" header="Title"></zg-column>
<!-- <zg-column index="3" header="Year"></zg-column>
<zg-column index="4" header="Budget"></zg-column>
<zg-column index="5" header="Budget"></zg-column> -->
<zg-column index="6" header="Budget" type="currency"></zg-column>
<zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
<zg-column index="8" header="Internation Growth" type="number"></zg-column>
<!-- <zg-column index="9" header="Year"></zg-column>
<zg-column index="10" header="Year"></zg-column>
<zg-column index="11" header="Year"></zg-column>
<zg-column index="12" header="Year"></zg-column>
<zg-column index="13" header="Year"></zg-column>
<zg-column index="14" header="Year"></zg-column> -->
</zg-colgroup>
<zg-menu id="customMenu">
<zg-menu-item role="exportSelection">Export Selection</zg-menu-item>
</zg-menu>
</zing-grid>
<!-- empty anchor tag for downloading -->
<a href="" id="downloadAnchor"> </a>
<!-- other script tags at the bottom of the page -->
</body>
</html>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.caption-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
// function for exporting csv
function _exportDataToCSV() {
const data = zgRef.getData();
const csvData = Papa.unparse(data);
console.log('--- exporting data ----', data, csvData);
_downloadCSV('export-all.csv', csvData);
}
// use built in anchor tag functionality to download the csv through a blob
function _downloadCSV(fileName, data) {
const aRef = document.querySelector('#downloadAnchor');
let json = JSON.stringify(data),
blob = new Blob([data], {
type: "octet/stream"
}),
url = window.URL.createObjectURL(blob);
aRef.href = url;
aRef.download = fileName;
aRef.click();
window.URL.revokeObjectURL(url);
}
// Javascript code to execute after DOM content
const menuItem = document.querySelector('zg-menu-item[role="exportSelection"]');
// global reference to zing-grid on page
const zgRef = document.querySelector('zing-grid');
let data = [];
let dataKeys = [];
// register event listener for grid selection
let csvData = null;
zgRef.addEventListener('grid:select', function(e) {
const data = e.detail.ZGData.data;
csvData = Papa.unparse(data);
console.log('--- exporting selected data ----', data, csvData);
});
menuItem.addEventListener('click', function(e) {
console.log('--- native menuitem click ---', e);
if (csvData) _downloadCSV('selection.csv', csvData);
else alert('No cells selected. Please drag and select some cells to export.')
});
window.addEventListener('load', () => {
// Parse local CSV file
Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
download: true, // url to retrieve CSV file
complete: function(results) {
console.log("Finished:", results);
// if results came in correctly
if (results && results.data) {
// lets push the results into our new array
// new format
for (let i = 1; i < results.data.length; i++) {
data.push(results.data[i]);
// render first page now
if (i === 15) zgRef.setData(data);
}
// render rest of data after first page
setTimeout(function() {
zgRef.setData(data)
}, 500);
}
// we could also just delete the first index
// which contains the header information
}
});
});