Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } zing-grid[loading] { height: 663px; } </style> </head> <body class="zg-body"> <zing-grid caption="Store Items" filter="summary" default-display="n/a"> <zg-colgroup> <zg-column index="item" header="Item"></zg-column> <zg-column index="size" header="Size"></zg-column> <zg-column index="price" header="Price" type="currency" type-currency="USD"></zg-column> <zg-column index="color" header="Color" type="color"></zg-column> <zg-column index="stock" header="In Stock" type="boolean"></zg-column> </zg-colgroup> <zg-data data='[{ "item": "shirt", "color": "red", "size": "medium", "price": "5", "color": "red", "stock": true }, { "item": "hat", "color": "brown", "size": "small", "price": "10", "color": "orange", "stock": true }, { "item": "shirt", "color": "blue", "size": null, "price": "5", "color": "yellow", "stock": true }, { "item": "jeans", "color": "blue", "size": "large", "price": "25", "color": "blue", "stock": true }, { "item": "scarf", "color": "purple", "size": null, "price": null, "color": "indigo", "stock": false }, { "item": "shirt", "color": "pink", "size": "medium", "price": "14", "color": "purple", "stock": true }, { "item": "jeans", "color": "black", "size": "large", "price": "40", "color": "pink", "stock": true }, { "item": "jacket", "color": "black", "size": "medium", "price": "100", "color": "goldenrod", "stock": true }, { "item": "jeans", "color": "red", "size": "small", "price": "35", "color": "cyan", "stock": true }, { "item": "shirt", "color": "yellow", "size": "medium", "price": "16", "color": "magenta", "stock": false }, { "item": "jacket", "color": "red", "size": "large", "price": "30", "color": "violet", "stock": true }]'></zg-data> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="Store Items" filter="summary" default-display="n/a"> <zg-colgroup> <zg-column index="item" header="Item"></zg-column> <zg-column index="size" header="Size"></zg-column> <zg-column index="price" header="Price" type="currency" type-currency="USD"></zg-column> <zg-column index="color" header="Color" type="color"></zg-column> <zg-column index="stock" header="In Stock" type="boolean"></zg-column> </zg-colgroup> <zg-data data='[{ "item": "shirt", "color": "red", "size": "medium", "price": "5", "color": "red", "stock": true }, { "item": "hat", "color": "brown", "size": "small", "price": "10", "color": "orange", "stock": true }, { "item": "shirt", "color": "blue", "size": null, "price": "5", "color": "yellow", "stock": true }, { "item": "jeans", "color": "blue", "size": "large", "price": "25", "color": "blue", "stock": true }, { "item": "scarf", "color": "purple", "size": null, "price": null, "color": "indigo", "stock": false }, { "item": "shirt", "color": "pink", "size": "medium", "price": "14", "color": "purple", "stock": true }, { "item": "jeans", "color": "black", "size": "large", "price": "40", "color": "pink", "stock": true }, { "item": "jacket", "color": "black", "size": "medium", "price": "100", "color": "goldenrod", "stock": true }, { "item": "jeans", "color": "red", "size": "small", "price": "35", "color": "cyan", "stock": true }, { "item": "shirt", "color": "yellow", "size": "medium", "price": "16", "color": "magenta", "stock": false }, { "item": "jacket", "color": "red", "size": "large", "price": "30", "color": "violet", "stock": true }]'></zg-data> </zing-grid> </body> </html>
.zg-body{background:#e6e6e6;}
// No JS code
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!