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