<!doctype html>
<head><meta charset="utf-8" /></head>
<body>
<h1>Run header components</h1>

<div class="grid-target"></div>
<link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
<script src="../node_modules/underscore/underscore.js"></script>
<script src="../node_modules/d3/build/d3.js"></script>
<script src="../node_modules/@zambezi/d3-utils/dist/d3-utils.js"></script>
<script src="../node_modules/@zambezi/fun/dist/fun.js"></script>
<script src="../node_modules/faker/faker.js"></script>
<script src="../node_modules/@zambezi/grid/dist/grid.js"></script>
<script src="../dist/grid-components.js"></script>
<script>

  var table = grid.createGrid()
          .columns(
            [
              { key: 'name', locked: 'left', width: 200 }
            , {
                key: 'username', headerComponents: [ ]
              , headerComponents: [ colorPretty ]
              }
            , { key: 'email', sortDescending: true }
            , {
                key: 'phone'
              , headerComponents: [ colorPretty ]
              }
            ]
          )
          .use(gridComponents.createRunHeaderComponents())

    , rows = _.range(1, 2000).map(faker.Helpers.createCard)
    , color = d3.scaleOrdinal().range(d3.schemeCategory10)

  d3.select('.grid-target')
      .style('height', '500px')
      .datum(rows)
      .call(table)

  function colorPretty(d, i) {
    console.log('header component')
    d3.select(this)
        .style('background-color', color(d.id))
        .style('color', color(d.id + ':text'))
  }

</script>
</body>

Add run header components example.
Add run header components example.
