Div-based Data Grid

A simple div-based data grid, which could be enhanced by adding similar functionlity to SlickGrid, such as virtual rendering.

Basic usage

var grid = d3.divgrid();

d3.csv('cars.csv', function(data) {
  d3.select('#grid')
    .datum(data)
    .call(grid)
});

Changing data or columns

Currently the only functionality that is supported is updating the grid's data and columns. For instance, to update the grid to only show three specified columns:

grid.columns(["year", "cylinders", "power (hp)"]);
d3.select("#grid").call(grid);

The grid uses d3 to enter, exit, and update data.

xxxxxxxxxx
 
<!DOCTYPE html>
<title>Div-based Data Grid</title>
<style type="text/css">
html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #111; font-family: Ubuntu, Helvetica, sans-serif; font-size: 12px; line-height: 1.35em;}
a { color: #6be; text-decoration: none; }
.row, .header, .cell { height: 18px; }
.row, .header { clear: left; }
.header { font-weight: bold; }
.cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; }
.col-0 { width: 180px; }
</style>
<body>
<div id="grid"></div>
</body>
<script src="https://d3js.org/d3.v2.js"></script>
<script src="divgrid.js"></script>
<script>
var grid = d3.divgrid();
​
d3.csv('cars.csv', function(data) {
  d3.select('#grid')
    .datum(data)
    .call(grid)
});
</script>
    

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js