Skip to content

Instantly share code, notes, and snippets.

@gabrielmontagne

gabrielmontagne/.block

Last active September 21, 2016 13:00
Show Gist options
  • Save gabrielmontagne/9ecd536714bc6ae755f1df6231f91cae to your computer and use it in GitHub Desktop.
Save gabrielmontagne/9ecd536714bc6ae755f1df6231f91cae to your computer and use it in GitHub Desktop.
Download ZIP
Zambezi Grid -- extending with custom components
Raw
.block
license: mit
Raw
README.md

Zambezi Grid components

Grids compose a series of subcomponents. These subcomponents take care of different elements of drawing the grid. One draws the body, one the headers, the other handles column resize, for example.

You can extend or modify the grid by providing your own subcomponents to it using the use() method.

The subcomponent is a standard D3 component which will be automatically run on the main grid DOM for which a object with different layout and row information will be bound.

It might be useful to run components before the rows have been processed and cell data has been generated. In that case, use usePre instead of use to register your component.

Raw
index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]">
<style>
.example-component {
position: absolute;
bottom: 10px;
width: 250px;
right: 10px;
padding: 20px;
background-color: blue;
color: white;
}
</style>
<div class="grid-target"></div>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://npmcdn.com/[email protected]/faker.js"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script>
var rows = _.range(1, 5000)
.map(
_.compose(
_.partial(_.pick, _, 'name', 'username', 'email')
, faker.Helpers.createCard
)
)
, table = grid.createGrid()
.use(createSomeComponent())
.use(s => s.select('.zambezi-grid-body').style('background-color', color(Math.sin(++c / 10))))
d3.select('.grid-target')
.style('height', '500px')
.datum(rows)
.call(table)
// Some component stuff that'd live elsewhere
var c = 0
, color = d3.interpolateHslLong('honeydew', 'cyan')
function createSomeComponent() {
var ran = 0
function someStatsComponent(s) {
s.select(d3Utils.appendIfMissing('pre.example-component'))
.text(toStats)
}
return someStatsComponent
function toStats(d) {
return [
'SCROLL ME :-)'
, '-------------'
, 'Custom component ran ' + ++ran + ' times'
, '* ' + d.length + ' rows'
, '* sorted by <' +
(
_.findWhere(d.columns, { sortDescending: true })
|| _.findWhere(d.columns, { sortAscending: true })
|| { id: '-no column-' }
).id + '> column'
, '* first row "' + d.rows[0].name + '"'
].join('\n')
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment