<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
zing-grid[loading] {
height: 213px;
}
</style>
</head>
<body>
<zing-grid editor>
<zg-data data='[{
"order": "chocolate chip",
"type": "gluten-free",
"paid": true
},
{
"order": "red velvet, peanut butter",
"type": "regular",
"paid": false
},
{
"order": "chocolate chip, sugar",
"type": "gluten-free",
"paid": true
}]'>
</zg-data>
<zg-colgroup>
<zg-column index="order" header="Order" type="select" type-select-options="chocolate chip, oatmeal raisin, red velvet, peanut butter, sugar" type-select-multiple></zg-column>
<zg-column index="type" header="Type" type="select" type-select-options="regular, gluten-free"></zg-column>
<zg-column index="paid" header="Paid" type="boolean"></zg-column>
</zg-colgroup>
</zing-grid>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
<zing-grid editor>
<zg-data data='[{
"order": "chocolate chip",
"type": "gluten-free",
"paid": true
},
{
"order": "red velvet, peanut butter",
"type": "regular",
"paid": false
},
{
"order": "chocolate chip, sugar",
"type": "gluten-free",
"paid": true
}]'>
</zg-data>
<zg-colgroup>
<zg-column index="order" header="Order" type="select" type-select-options="chocolate chip, oatmeal raisin, red velvet, peanut butter, sugar" type-select-multiple></zg-column>
<zg-column index="type" header="Type" type="select" type-select-options="regular, gluten-free"></zg-column>
<zg-column index="paid" header="Paid" type="boolean"></zg-column>
</zg-colgroup>
</zing-grid>
</body>
</html>