• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    
      <style>
        body {
          background: #e6e6e6;
        }
    
        zing-grid {
          max-width: 1600px;
          margin: 0 auto;
        }
    
        zg-row,
        zg-cell {
          height: 85px;
        }
    
        zing-grid[loading] {
          height: 369px;
        }
      </style>
    </head>
    
    <body>
      <zing-grid icon-set="fontawesome">
        <zg-colgroup>
          <zg-column index="employeeId" header="ID" type="number"></zg-column>
          <zg-column index="firstName,lastName" header="Employee Name" type="custom">
            <template>
                [[index.lastName]], [[index.firstName]]
            </template>
          </zg-column>
          <zg-column index="photo" header="Photo" type="image" height="200" width="100"></zg-column>
          <zg-column index="citizen" header="US Citizen" type="boolean"></zg-column>
          <zg-column index="website" header="Website" type="url"></zg-column>
          <zg-column index="salary" type="currency"></zg-column>
        </zg-colgroup>
        <zg-data data='
                           [{
                             "favorite": false,
                          	 "icon" : "removerecord",
                             "firstName" : "Donald",
                             "lastName" : "Trump",
                             "photo" : "https://www.gannett-cdn.com/presto/2018/09/10/USAT/4dd56cad-0911-47a5-a165-b332220ea2d4-AFP_AFP_18Y8EY.JPG?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "2125551212",
                             "email" : "potus@whitehouse.gov",
                             "password" : "Bigly",
                             "website" : "https://www.whitehouse.gov",
                             "citizen" : true,
    												 "salary" : 1000000,
                             "employeeId" : 3
                            },
                          {
                             "favorite": false,
                          	 "icon" : "fa-grin-squint",
                             "firstName" : "Daffy",
                             "lastName" : "Duck",
                             "photo" : "https://wallpapercave.com/wp/MQ8HdVt.jpg?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "4875552678",
                             "email" : "daffy.duck@looneytunes.com",
                             "password" : "Daffy!",
                             "website" : "https://en.wikipedia.org/wiki/Looney_Tunes",
                             "citizen" : true,
    												 "salary" : 6000000,
                             "employeeId" : 2
                            },
                          {
                             "favorite": false,
                          	 "icon" : "fa-grin-hearts",
                             "firstName" : "Donald",
                             "lastName" : "Duck",
                             "photo" : "https://lumiere-a.akamaihd.net/v1/images/open-uri20150422-20810-hhbgq0_d55a9899.jpeg?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "4985551937",
                             "email" : "donald.duck@disney.com",
                             "password" : "Bigly",
                             "website" : "https://www.disney.com/",
                             "citizen" : true,
    												 "salary" : 5000000,
                             "employeeId" : 1
                            }
                          ]'></zg-data>
      </zing-grid>
      <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    
    </head>
    
    <body>
      <zing-grid icon-set="fontawesome">
        <zg-colgroup>
          <zg-column index="employeeId" header="ID" type="number"></zg-column>
          <zg-column index="firstName,lastName" header="Employee Name" type="custom">
            <template>
                [[index.lastName]], [[index.firstName]]
            </template>
          </zg-column>
          <zg-column index="photo" header="Photo" type="image" height="200" width="100"></zg-column>
          <zg-column index="citizen" header="US Citizen" type="boolean"></zg-column>
          <zg-column index="website" header="Website" type="url"></zg-column>
          <zg-column index="salary" type="currency"></zg-column>
        </zg-colgroup>
        <zg-data data='
                           [{
                             "favorite": false,
                          	 "icon" : "removerecord",
                             "firstName" : "Donald",
                             "lastName" : "Trump",
                             "photo" : "https://www.gannett-cdn.com/presto/2018/09/10/USAT/4dd56cad-0911-47a5-a165-b332220ea2d4-AFP_AFP_18Y8EY.JPG?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "2125551212",
                             "email" : "potus@whitehouse.gov",
                             "password" : "Bigly",
                             "website" : "https://www.whitehouse.gov",
                             "citizen" : true,
    												 "salary" : 1000000,
                             "employeeId" : 3
                            },
                          {
                             "favorite": false,
                          	 "icon" : "fa-grin-squint",
                             "firstName" : "Daffy",
                             "lastName" : "Duck",
                             "photo" : "https://wallpapercave.com/wp/MQ8HdVt.jpg?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "4875552678",
                             "email" : "daffy.duck@looneytunes.com",
                             "password" : "Daffy!",
                             "website" : "https://en.wikipedia.org/wiki/Looney_Tunes",
                             "citizen" : true,
    												 "salary" : 6000000,
                             "employeeId" : 2
                            },
                          {
                             "favorite": false,
                          	 "icon" : "fa-grin-hearts",
                             "firstName" : "Donald",
                             "lastName" : "Duck",
                             "photo" : "https://lumiere-a.akamaihd.net/v1/images/open-uri20150422-20810-hhbgq0_d55a9899.jpeg?width=534&height=401&fit=bounds&auto=webp",
                             "phone" : "4985551937",
                             "email" : "donald.duck@disney.com",
                             "password" : "Bigly",
                             "website" : "https://www.disney.com/",
                             "citizen" : true,
    												 "salary" : 5000000,
                             "employeeId" : 1
                            }
                          ]'></zg-data>
      </zing-grid>
    </body>
    
    </html>
    body {
      background: #e6e6e6;
    }
    
    zing-grid {
      max-width: 1600px;
      margin: 0 auto;
    }
    
    zg-row,
    zg-cell {
      height: 85px;
    }