Layout Default

122 of 123
ZingGrid is responsive by default, and changes from row to card layout depending on your screen size. Resize your browser to see the change!
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 421px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Top LiverPool Forwards" sort>
    <zg-data data='[
        {
          "firstName": "Mohamed",
          "lastName": "Salah",
          "number": 11,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
        },
        {
          "firstName": "Sadio",
          "lastName": "Mane",
          "number": 10,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
        },
        {
          "firstName": "Roberto",
          "lastName": "Firmino",
          "number": 9,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
        },
        {
          "firstName": "Daniel",
          "lastName": "Sturridge",
          "number": 15,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column>
      <zg-column index="firstName, lastName" header="Name">
        <template>
          	[[index.firstName]] [[index.lastName]]
          </template>
      </zg-column>
      <zg-column index="number"></zg-column>
      <zg-column index="position" sort="disabled"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="Top LiverPool Forwards"
      sort>
      <zg-data data='[
        {
          "firstName": "Mohamed",
          "lastName": "Salah",
          "number": 11,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
        },
        {
          "firstName": "Sadio",
          "lastName": "Mane",
          "number": 10,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
        },
        {
          "firstName": "Roberto",
          "lastName": "Firmino",
          "number": 9,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
        },
        {
          "firstName": "Daniel",
          "lastName": "Sturridge",
          "number": 15,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
        }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column 
        	index="playerImg"
          header=" "
          width="100"
          height="100"
          sort="disabled"
          type="image"
          type-image-mask="circle"
          type-image-alt="Player Img N/A"></zg-column>
        <zg-column index="firstName, lastName" header="Name">
        	<template>
          	[[index.firstName]] [[index.lastName]]
          </template>
        </zg-column>
        <zg-column index="number"></zg-column>
        <zg-column index="position" sort="disabled"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery