---
title: "Column Headers | Features"
description: "ZingGrid has default behaviors for displaying JSON keys as column headers, as well as custom functionality. Use Camel or Kebab Case, Underscore, Nested JSON keys, etc."
url: https://www.zinggrid.com/docs/features/column-headers
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/column-headers.md
mode: provenance
representation: markdown
origin_response_id: df578afd9efe944e6ce0396d36d5ee37
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.676Z
version_nonce: b1568077307feabd4bece1b16ae82178
generated_at_utc: 2026-11-09T16:15:15.285Z
response_nonce: dd70a7700a013b727dd5211a3a8f92db
```

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

```javascript
{
  "playerName": "Eden Hazard",
  "playerClub": "Chelsea",
  "goalsScored": 5
}
```
Once rendered, the grid will display:

[Example code](https://app.zingsoft.com/demos/embed/9L8CMADP)

### Kebab Case

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

```javascript
{
  "player-name": "Eden Hazard",
  "player-club": "Chelsea",
  "goals-scored": 5
}
```
Once rendered, the grid will display:

[Example code](https://app.zingsoft.com/demos/embed/1N8CPEVK)

### Snake Case (Underscore)

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

```javascript
{
  "player_name": "Eden Hazard",
  "player_club": "Chelsea",
  "goals_scored": 5
}
```
Once rendered, the grid will display:

[Example code](https://app.zingsoft.com/demos/embed/WK1INA9K)

## Nested

You can nest your headers using brackets, like so:

```javascript
{
  "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:

[Example code](https://app.zingsoft.com/demos/embed/6NAQLFCN)

## Custom Nested

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

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/DUVPIGXD)

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

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/X18DVW4M)

## Custom

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

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/ZQUK94T5)

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

* [Data Types](https://www.zinggrid.com/docs/data-types)