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.Copy
Copied
{
"playerName": "Eden Hazard",
"playerClub": "Chelsea",
"goalsScored": 5
}Edit
Download
Kebab Case
ZingGrid capitalizes and spaces your kebab case data keys.Copy
Copied
{
"player-name": "Eden Hazard",
"player-club": "Chelsea",
"goals-scored": 5
}Edit
Download
Underscore
ZingGrid capitalizes and spaces your underscore data keys.Copy
Copied
{
"player_name": "Eden Hazard",
"player_club": "Chelsea",
"goals_scored": 5
}Edit
Download
Nested
You can nest your headers using brackets.Copy
Copied
{
"playerInfo": {
"name": "Eden Hazard",
"club": "Chelsea",
"goals": 5
}
}Edit
Download
Custom Nested
You can nest your headers using dot notation in theheader attribute.Copy
Copied
<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>Edit
Download
Auto Format Off
You can turn off – or add a custom function to – this auto header behavior with theheader-aut-format attribute on the <zing-grid> tag.Copy
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
Custom
You can override your headers by adding theheader attribute to the <zg-column> tag.Copy
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
