A @zambezi/grid-components
component that allows easier configuration of header components.
See docs here,
https://github.com/zambezi/grid-components/blob/header-components-work/man/run-header-components.md
license: mit |
A @zambezi/grid-components
component that allows easier configuration of header components.
See docs here,
https://github.com/zambezi/grid-components/blob/header-components-work/man/run-header-components.md
<!doctype html> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/normalize.css@4.2.0"> | |
<style> | |
button.fancy { | |
background-color: yellow; | |
display: block; | |
position: absolute; | |
right: 14px; | |
top: 4px; | |
border: 1px dotted #888; | |
color: white; | |
background: black; | |
} | |
</style> | |
<div class="grid-target"></div> | |
<script src="https://npmcdn.com/underscore@1.8.3"></script> | |
<script src="https://npmcdn.com/faker@1.0.0/faker.js"></script> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script src="https://npmcdn.com/@zambezi/fun@2"></script> | |
<script src="https://npmcdn.com/@zambezi/d3-utils@3"></script> | |
<script src="https://npmcdn.com/@zambezi/grid@0"></script> | |
<script src="https://npmcdn.com/@zambezi/grid-components@0.7.0-run-header-components.1 "></script> | |
<script> | |
const table = grid.createGrid() | |
.columns( | |
[ | |
{ | |
key: 'name' | |
, locked: 'left' | |
, width: 200 | |
, headerComponents: [ fancyButton ] | |
} | |
, { | |
key: 'username', headerComponents: [ ] | |
, headerComponents: [ colorPretty ] | |
} | |
, { key: 'email', sortDescending: true } | |
, { | |
key: 'phone' | |
, headerComponents: [ colorPretty, fancyButton ] | |
} | |
] | |
) | |
.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) { | |
d3.select(this) | |
.style('background-color', color(d.id)) | |
.style('color', color(d.id + ':text')) | |
} | |
function fancyButton(d, i) { | |
const append = d3Utils.appendIfMissing('button.fancy') | |
d3.select(this).select(append).text(d.id) | |
.on('click.log', d => alert(`YEP ${d.id}!`)) | |
.on('click.swallow', () => d3.event.stopPropagation() ) | |
} | |
</script> |