Citing Data Source
To enable the source element, you can use
<zg-source>
Source Text Here</zg-source>
or add source="Source Text Here" to the <zing-grid>
tag.Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 451px; } </style> </head> <body class="zg-body"> <zing-grid caption="zg-source" sort src="https://cdn.zinggrid.com/datasets/liverpool-forwards.json" source="Data gathered by hardworking ZingSoft Employees"> <zg-colgroup> <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column> <zg-column index="firstName, lastName" header="Name"> <template> [[index.firstName]] [[index.lastName]] </template> </zg-column> <zg-column index="number"></zg-column> <zg-column index="position" sort="disabled"></zg-column> </zg-colgroup> </zing-grid> <script></script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="zg-source" sort src="https://cdn.zinggrid.com/datasets/liverpool-forwards.json" source="Data gathered by hardworking ZingSoft Employees"> <zg-colgroup> <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column> <zg-column index="firstName, lastName" header="Name"> <template> [[index.firstName]] [[index.lastName]] </template> </zg-column> <zg-column index="number"></zg-column> <zg-column index="position" sort="disabled"></zg-column> </zg-colgroup> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} zing-grid[loading] { height:400px; }
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!