experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-column-headers-no-formatting
mode: provenance
representation: html
origin_response_id: 28f02ea1718c2fcd5e575a8010849b2f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.543Z
version_nonce: d0435c264d35f7d0a38bf9926df402cf
generated_at_utc: 2026-11-13T00:45:16.809Z
response_nonce: f37e5a45ab032fe5ae630de13bce496a

Turn off Autoformatted Headers

28 of 125
You can turn off automatic header behavior with the header-auto-format attribute. You can either disable the autoformatting or attach a custom function to render headers in JavaScript.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 1119px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Autoformatting On (Default)" layout-controls="disabled">
    <zg-data data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
  </zing-grid>

  <zing-grid header-auto-format="disabled" caption="Autoformatting Off" layout-controls="disabled">
    <zg-data data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
  </zing-grid>

  <zing-grid header-auto-format="renderCustomHeaders" caption="Custom Autoformatting Function" layout-controls="disabled">
    <zg-data data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function renderCustomHeaders(originalValue, parsedValue) {
      return `Custom ${parsedValue}`;
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="Autoformatting On (Default)"
      layout-controls="disabled">
      <zg-data 
        data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
    </zing-grid>

    <zing-grid 
      header-auto-format="disabled"
      caption="Autoformatting Off"
      layout-controls="disabled">
      <zg-data 
        data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
    </zing-grid>
    
    <zing-grid 
      header-auto-format="renderCustomHeaders"
      caption="Custom Autoformatting Function"
      layout-controls="disabled">
      <zg-data 
        data='[
        {
          "playerName": "Eden Hazard",
          "player_club": "Chelsea",
          "goals-scored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "player_club": "Fulham",
          "goals-scored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "player_club": "Manchester City",
          "goals-scored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "player_club": "Manchester United",
          "goals-scored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "player_club": "Liverpool",
          "goals-scored": 4   
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}
function renderCustomHeaders(originalValue, parsedValue) {
  return `Custom ${parsedValue}`;
}

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery