cristiano-belloni/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Custom column componennt

You can specify one or more column components by adding them in the components array field of the column configuration.
Each component will receive the datum d and index i for every cell in the column.
this will be pointing to the cell DOM node on invocation.

  
## index.html
<!doctype html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://npmcdn.com/normalize.css@4.2.0">
  <style>
    .custom-element {
      border: 0;
      background: transparent;
      color: #008a4b;
      font-weight: bolder;
    }
    .info-box p {
      margin-top: 20px;
      margin-left: 8px;
    }
  </style>
</head>


<div class="grid-target"></div>
<div class="info-box">
  <p>Click one of the ✓ buttons.</p>
</div>

<script src="https://npmcdn.com/underscore@1.8.3"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://npmcdn.com/faker@1.0.0/faker.js"></script>
<script src="https://npmcdn.com/@zambezi/fun@2.0.1"></script>
<script src="https://npmcdn.com/@zambezi/d3-utils@3.3.1"></script>
<script src="https://npmcdn.com/@zambezi/grid@0.11.0"></script>
<script>
  const table = grid.createGrid()
                  .columns([
                      { sortable: false, width: 50, components: [buttonColumnComponent], label: 'Button' }
                    , { key: 'name'}
                    , { key: 'email' }
                    , { key: 'username' }
                  ])
          , rows = _.range(1, 5000).map(faker.Helpers.createCard)

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

  function buttonColumnComponent(d, i) {
    d3.select(this)
      .select(d3Utils.appendIfMissing('button.custom-element'))
        .text('✓')
        .on('click.custom-component-click', customHandler)
  }

  function customHandler(d) {
    d3.select('.info-box p').text(`Clicked button for ${d.row.name}.`)
  }

</script>
	<!doctype html>

	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://npmcdn.com/normalize.css@4.2.0">
	<style>
	.custom-element {
	border: 0;
	background: transparent;
	color: #008a4b;
	font-weight: bolder;
	}
	.info-box p {
	margin-top: 20px;
	margin-left: 8px;
	}
	</style>
	</head>


	<div class="grid-target"></div>
	<div class="info-box">
	<p>Click one of the ✓ buttons.</p>
	</div>

	<script src="https://npmcdn.com/underscore@1.8.3"></script>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://npmcdn.com/faker@1.0.0/faker.js"></script>
	<script src="https://npmcdn.com/@zambezi/fun@2.0.1"></script>
	<script src="https://npmcdn.com/@zambezi/d3-utils@3.3.1"></script>
	<script src="https://npmcdn.com/@zambezi/grid@0.11.0"></script>
	<script>
	const table = grid.createGrid()
	.columns([
	{ sortable: false, width: 50, components: [buttonColumnComponent], label: 'Button' }
	, { key: 'name'}
	, { key: 'email' }
	, { key: 'username' }
	])
	, rows = _.range(1, 5000).map(faker.Helpers.createCard)

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

	function buttonColumnComponent(d, i) {
	d3.select(this)
	.select(d3Utils.appendIfMissing('button.custom-element'))
	.text('✓')
	.on('click.custom-component-click', customHandler)
	}

	function customHandler(d) {
	d3.select('.info-box p').text(`Clicked button for ${d.row.name}.`)
	}

	</script>