Docs

Column Headers

ZingGrid has default behaviors for displaying column headers, as well as custom functionality.

Camel Case

ZingGrid capitalizes and spaces your camel-case data keys.

{
  "playerName": "Eden Hazard",
  "playerClub": "Chelsea",
  "goalsScored": 5
}
Top

Kebab Case

ZingGrid capitalizes and spaces your kebab-case data keys.

{
  "player-name": "Eden Hazard",
  "player-club": "Chelsea",
  "goals-scored": 5
}
Top

Underscore

ZingGrid capitalizes and spaces your underscore data keys.

{
  "player_name": "Eden Hazard",
  "player_club": "Chelsea",
  "goals_scored": 5
}
Top

Nested

You can nest your headers using brackets.

{
  "playerInfo": {
    "name": "Eden Hazard",
    "club": "Chelsea",
    "goals": 5
  }
}
Top

Custom Nested

You can nest your headers using dot notation in the header attribute.

<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>
Top

Auto Format Off

You can turn off – or add a custom function to – this auto header behavior with the header-auto-format attribute on the <zing-grid> tag.

<zing-grid
  header-auto-format="false"
  caption="EPL Top Scorers"
>
  <zg-data
    data='[
    {
      "playerName": "Eden Hazard",
      "playerClub": "Chelsea",
      "goalsScored": 5
    },
    ...
  ]'></zg-data>
</zing-grid>
Top

Custom

You can override your headers by adding the header attribute to the <zg-column> tag.

<zing-grid caption="EPL Top Scorers">
  <zg-data
    data='[
    {
      "playerName": "Eden Hazard",
      "playerClub": "Chelsea",
      "goalsScored": 5
    },
    ...
  ]'></zg-data>
  <zg-colgroup>
    <zg-column index="playerName" header="Player"></zg-column>
    <zg-column index="playerClub" header="Club"></zg-column>
    <zg-column index="goalsScored" header="Goals"></zg-column>
  </zg-colgroup>
</zing-grid>
Top