All Column Types 1

<!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:not([layout="card"]),
    zg-cell:not([layout="card"]) {
      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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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:not([layout="card"]),
zg-cell:not([layout="card"]) {
  height: 85px;
}