Data Attribute

<!DOCTYPE html>
<html>

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

    zing-grid {
      overflow: hidden;
    }

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

<body>
  <zing-grid caption="Astrology Zodiac Signs" columns='[
         {"index": "0", "header": "Sign"},
         {"index": "1", "header": "Date"},
         {"index": "2", "header": "Element"}
       ]' pager page-size="5" data='[
        [
          "Aquarius",
          "January 20 - February 18",
          "Air"
        ], [
          "Pisces",
          "February 19 - March 20",
          "Water"
        ], [
          "Aries",
          "March 19 - May 20",
          "Fire"
        ], [
          "Taurus",
          "April 20 - May 18",
          "Earth"
        ], [
          "Gemini",
          "May 21 - June 20",
          "Air"
        ], [
          "Cancer",
          "June 21 - Jully 22",
          "Water"
        ], [
          "Leo",
          "July 23 - Auguest 22",
          "Fire"
        ], [
          "Virgo",
          "Auguest 23 - September 22",
          "Earch"
        ], [
          "Libra",
          "September 23 - October 22",
          "Air"
        ], [
          "Scorpio",
          "October 23 - November 21",
          "Water"
        ], [
          "Sagittarius",
          "November 22 - December 21",
          "Fire"
        ], [
          "Capricorm",
          "January 22 - January 19",
          "Earth"
        ]
      ]'>
  </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/zinggrid.min.js"></script>
</head>

<body>
  <zing-grid caption="Astrology Zodiac Signs" columns='[
         {"index": "0", "header": "Sign"},
         {"index": "1", "header": "Date"},
         {"index": "2", "header": "Element"}
       ]' pager page-size="5" data='[
        [
          "Aquarius",
          "January 20 - February 18",
          "Air"
        ], [
          "Pisces",
          "February 19 - March 20",
          "Water"
        ], [
          "Aries",
          "March 19 - May 20",
          "Fire"
        ], [
          "Taurus",
          "April 20 - May 18",
          "Earth"
        ], [
          "Gemini",
          "May 21 - June 20",
          "Air"
        ], [
          "Cancer",
          "June 21 - Jully 22",
          "Water"
        ], [
          "Leo",
          "July 23 - Auguest 22",
          "Fire"
        ], [
          "Virgo",
          "Auguest 23 - September 22",
          "Earch"
        ], [
          "Libra",
          "September 23 - October 22",
          "Air"
        ], [
          "Scorpio",
          "October 23 - November 21",
          "Water"
        ], [
          "Sagittarius",
          "November 22 - December 21",
          "Fire"
        ], [
          "Capricorm",
          "January 22 - January 19",
          "Earth"
        ]
      ]'>
  </zing-grid>
</body>

</html>

body {
  background: #e6e6e6;
}

zing-grid {
  overflow: hidden;
}