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:

Top

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:

Top

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:

Top

Nested

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:

Top

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:

Top

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:

Top

Custom

You can override your headers by adding the header attribute to the <zg-column> tag, like so:

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

Custom Headers Grid

Here is a complete grid with defined custom headers:

Top

Related Resources

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