• Edit
  • Download
  • <!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"
      }
    ]);