Skip to content

Instantly share code, notes, and snippets.

@gabrielmontagne

gabrielmontagne/.block

Last active September 9, 2016 10:37
Show Gist options
  • Save gabrielmontagne/71601eb4d87b71a4b87d1976fce7fa4c to your computer and use it in GitHub Desktop.
Save gabrielmontagne/71601eb4d87b71a4b87d1976fce7fa4c to your computer and use it in GitHub Desktop.
Download ZIP
Zambezi Grid default configuration
Raw
.block
license: mit
Raw
README.md

Zambezi Grid render with,

  • nested column configuration
  • virtualised rows and columns
  • locked columns and rows
  • column resize
  • column drag.

Default configuration will be derived from the keys of the first defined row.

Raw
index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]">
<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 table = grid.createGrid()
, rows = _.range(1, 5000).map(_.compose(_.partial(_.pick, _, 'name', 'username', 'email'), faker.Helpers.createCard))
d3.select('.grid-target')
.style('height', '500px')
.datum(rows)
.call(table)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment