User Defined Nested Headers

25 of 122
You can define your own nested headers by using dot notation to delimit what path we should use in your object chain header="Player Info.Custom Shared Header".
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: 413px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    <zg-data data='[
        {
        	"playerInfo": {
            "name": "Eden Hazard",
            "club": "Chelsea",
          	"goals": 5      
        	}              
        },
        {
          "playerInfo": {
          	"name": "Aleksandar Mitrovic",
          	"club": "Fulham",
          	"goals": 5 
          }
        },
        {
        	"playerInfo": {              
          	"name": "Sergio Agüero",
          	"club": "Manchester City",
          	"goals": 4   
					}
        },
        {
        	"playerInfo": {  
          	"name": "Romelu Lukaku",
          	"club": "Manchester United",
          	"goals": 4
          }
        },
        {
        	"playerInfo": {  
          	"name": "Sadio Mané",
          	"club": "Liverpool",
          	"goals": 4   
          }
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="playerInfo.goals" header="Player Info.Custom Shared Header"></zg-column>
      <zg-column index="playerInfo.name" header="Player Info.Custom Shared Header"></zg-column>
      <zg-column index="playerInfo.name" header="Name"></zg-column>
      <zg-column index="playerInfo.club"></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="EPL Top Scorers"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
      <zg-data 
        data='[
        {
        	"playerInfo": {
            "name": "Eden Hazard",
            "club": "Chelsea",
          	"goals": 5      
        	}              
        },
        {
          "playerInfo": {
          	"name": "Aleksandar Mitrovic",
          	"club": "Fulham",
          	"goals": 5 
          }
        },
        {
        	"playerInfo": {              
          	"name": "Sergio Agüero",
          	"club": "Manchester City",
          	"goals": 4   
					}
        },
        {
        	"playerInfo": {  
          	"name": "Romelu Lukaku",
          	"club": "Manchester United",
          	"goals": 4
          }
        },
        {
        	"playerInfo": {  
          	"name": "Sadio Mané",
          	"club": "Liverpool",
          	"goals": 4   
          }
        }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column index="playerInfo.goals" header="Player Info.Custom Shared Header"></zg-column>
        <zg-column index="playerInfo.name" header="Player Info.Custom Shared Header"></zg-column>
        <zg-column index="playerInfo.name" header="Name"></zg-column>
        <zg-column index="playerInfo.club"></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