<!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> zing-grid[loading] { height: 142px; } </style> </head> <body> <zing-grid caption="VoltVoyage eBike Users" filter filter-buttons="reset, close" filter-conditions-max="2" filter-selectbox-display="rendered" filter-trigger="change"> <zc-colgroup> <zg-column index="firstName" type="text"></zg-column> <zg-column index="lastName" type="text"></zg-column> <zg-column index="username" type="text"></zg-column> <zg-column index="email" type="email" filter-menu-areas="selectbox"></zg-column> <zg-column index="permissionLevel" type="number" filter-conditions="greaterThan, lessThan, equals, notEquals" filter-conditions-max="2"></zg-column> <zg-column index="startDate" type="date" filter-conditions="before, after, betweenDate" filter-detaul-condition="before"></zg-column> </zc-colgroup> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); let zgRef = document.querySelector('zing-grid'); zgRef.setData([{ "firstName": "Alice", "lastName": "Smith", "username": "asmith", "email": "asmith@voltvoyage.com", "permissionLevel": 5, "startDate": "2022-01-22" }, { "firstName": "Yong", "lastName": "Lee", "username": "ylee", "email": "", "permissionLevel": 1, "startDate": "2023-02-28" }, { "firstName": "Michael", "lastName": "Brown", "username": "mbrown", "email": "mbrown@voltvoyage.com", "permissionLevel": 2, "startDate": "2023-03-10" }, { "firstName": "Chris", "lastName": "Jones", "username": "cjones", "email": "cjones@voltvoyage.com", "permissionLevel": 1, "startDate": "2019-09-23" }, { "firstName": "Bella", "lastName": "Rodriguez", "username": "brodriguez", "email": "brodriguez@voltvoyage.com", "permissionLevel": 2, "startDate": "2022-08-30" }, { "firstName": "John", "lastName": "Doe", "username": "jdoe", "email": "", "permissionLevel": 3, "startDate": "2021-07-14" }, { "firstName": "Mark", "lastName": "Martinez", "username": "mmartinez", "email": "mmartinez@voltvoyage.com", "permissionLevel": 3, "startDate": "2021-05-17" }, { "firstName": "Tina", "lastName": "Thompson", "username": "tthompson", "email": "tthompson@voltvoyage.com", "permissionLevel": 4, "startDate": "2020-12-12" }, { "firstName": "Kim", "lastName": "Nguyen", "username": "knguyen", "email": "knguyen@voltvoyage.com", "permissionLevel": 5, "startDate": "2021-10-03" }, { "firstName": "Laura", "lastName": "White", "username": "lwhite", "email": "", "permissionLevel": 4, "startDate": "2020-11-05" } ]); </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> <zing-grid caption="VoltVoyage eBike Users" filter filter-buttons="reset, close" filter-conditions-max="2" filter-selectbox-display="rendered" filter-trigger="change"> <zc-colgroup> <zg-column index="firstName" type="text"></zg-column> <zg-column index="lastName" type="text"></zg-column> <zg-column index="username" type="text"></zg-column> <zg-column index="email" type="email" filter-menu-areas="selectbox"></zg-column> <zg-column index="permissionLevel" type="number" filter-conditions="greaterThan, lessThan, equals, notEquals" filter-conditions-max="2"></zg-column> <zg-column index="startDate" type="date" filter-conditions="before, after, betweenDate" filter-detaul-condition="before"></zg-column> </zc-colgroup> </zing-grid> </body> </html>
let zgRef = document.querySelector('zing-grid'); zgRef.setData([{ "firstName": "Alice", "lastName": "Smith", "username": "asmith", "email": "asmith@voltvoyage.com", "permissionLevel": 5, "startDate": "2022-01-22" }, { "firstName": "Yong", "lastName": "Lee", "username": "ylee", "email": "", "permissionLevel": 1, "startDate": "2023-02-28" }, { "firstName": "Michael", "lastName": "Brown", "username": "mbrown", "email": "mbrown@voltvoyage.com", "permissionLevel": 2, "startDate": "2023-03-10" }, { "firstName": "Chris", "lastName": "Jones", "username": "cjones", "email": "cjones@voltvoyage.com", "permissionLevel": 1, "startDate": "2019-09-23" }, { "firstName": "Bella", "lastName": "Rodriguez", "username": "brodriguez", "email": "brodriguez@voltvoyage.com", "permissionLevel": 2, "startDate": "2022-08-30" }, { "firstName": "John", "lastName": "Doe", "username": "jdoe", "email": "", "permissionLevel": 3, "startDate": "2021-07-14" }, { "firstName": "Mark", "lastName": "Martinez", "username": "mmartinez", "email": "mmartinez@voltvoyage.com", "permissionLevel": 3, "startDate": "2021-05-17" }, { "firstName": "Tina", "lastName": "Thompson", "username": "tthompson", "email": "tthompson@voltvoyage.com", "permissionLevel": 4, "startDate": "2020-12-12" }, { "firstName": "Kim", "lastName": "Nguyen", "username": "knguyen", "email": "knguyen@voltvoyage.com", "permissionLevel": 5, "startDate": "2021-10-03" }, { "firstName": "Laura", "lastName": "White", "username": "lwhite", "email": "", "permissionLevel": 4, "startDate": "2020-11-05" } ]);