features
Menu
Menu

Column Headers

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

On This Page

Camel Case

ZingGrid capitalizes and spaces your camel case data keys.
CloseCopy Copied
{
  "playerName": "Eden Hazard",
  "playerClub": "Chelsea",
  "goalsScored": 5
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Kebab Case

ZingGrid capitalizes and spaces your kebab case data keys.
CloseCopy Copied
{
  "player-name": "Eden Hazard",
  "player-club": "Chelsea",
  "goals-scored": 5
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Underscore

ZingGrid capitalizes and spaces your underscore data keys.
CloseCopy Copied
{
  "player_name": "Eden Hazard",
  "player_club": "Chelsea",
  "goals_scored": 5
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Nested

You can nest your headers using brackets.
CloseCopy Copied
{
  "playerInfo": {
    "name": "Eden Hazard",
    "club": "Chelsea",
    "goals": 5
  }
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Auto Format Off

You can turn off – or add a custom function to – this auto header behavior with the header-aut-format attribute on the <zing-grid> tag.
CloseCopy Copied
<zing-grid
  header-auto-format="false"
  caption="EPL Top Scorers">
  <zg-data
    data='[
    {
      "playerName": "Eden Hazard",
      "playerClub": "Chelsea",
      "goalsScored": 5
    },
    ...
  ]'></zg-data>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom

You can override your headers by adding the header attribute to the <zg-column> tag.
CloseCopy Copied
<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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading