Column Headers

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

Header Typography Reformatting

ZingGrid automatically takes your camel, kebab, and snake case data keys and reformats it to normal typography.

Camel Case

ZingGrid capitalizes and spaces your camel case data keys. Take this data for example:

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

Once rendered, the grid will display:

Kebab Case

ZingGrid capitalizes, spaces, and removes dashes from your kebab case data keys. Take this data for example:

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

Once rendered, the grid will display:

Snake Case (Underscore)

ZingGrid capitalizes, spaces, and removes the underscore from your snake case data keys. Take this data for example:

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

Once rendered, the grid will display:

You can nest your headers using brackets, like so:

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

Nested Headers Grid

Here is a complete grid with "name", "club", and "goals" headers nested within the "Player Info" header:

Custom Nested

You can also nest your headers using dot notation in the header attribute, like so:

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

Custom Nested Headers Grid

Here is a complete grid with custom nested headers:

Autoformat Off

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

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

Autoformat Disabled and Custom Autoformat Grids

Here are two complete grids side-by-side, one with disabled autoformatting and one with custom autoformatting:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• Data Types