d3-metatable
Version:
a table element for heterogenous objects
78 lines (74 loc) • 2.63 kB
HTML
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
<link href='//www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<style>
textarea {
white-space: nowrap;
}
</style>
<title>d3-metatable | MapBox</title>
</head>
<body>
<div class='limiter pad4y'>
<div class='col10 margin1 space-bottom4'>
<h1>d3-metatable</h1>
<p>A table interface for heterogeneous JSON collections.</p>
<textarea id='json' class='stretch row8 space-bottom'></textarea>
<div id='table' class='prose'></div>
</div>
</div>
<script src='node_modules/d3-array/build/d3-array.js'></script>
<script src='node_modules/d3-selection/build/d3-selection.js'></script>
<script src='node_modules/d3-dispatch/build/d3-dispatch.js'></script>
<script src='node_modules/d3-collection/build/d3-collection.js'></script>
<script src='build/d3-metatable.js'></script>
<script>
var data = [];
for (var i = 0; i < 100; i++) {
if (Math.random() > 0.9) {
data.push({
v1: Math.random(),
v2: 'foo',
v3: 'foo bar' + Math.random(),
v4: 'foo\nbar'
});
} else if (Math.random() > 0.5) {
data.push({
v2: '<b>foo</b>',
v3: 'foo bar' + Math.random(),
v4: 'foo bar' + Math.random()
});
} else {
data.push({
foo: 'foo'
});
}
}
d3.select('#json')
.property('value', JSON.stringify(data, null, 2))
.on('keyup', function() {
data = JSON.parse(this.value);
d3.select('#table').data([data]).call(d3.metatable());
});
d3.select('#table').data([data]).call(d3.metatable().on('change', function(d, i) {
data[i] = d;
d3.select('#json')
.property('value', JSON.stringify(data, null, 2));
}).on('rowfocus', function(d, i) {}).on('renameprompt', function(d, okRename) {
// Listening to `renameprompt`, you
// can pass in your own value submit flow.
this.preventprompt('rename');
var newname = prompt('Rename column to:');
if (newname) okRename(newname, d);
}).on('deleteprompt', function(d, okDelete) {
// Listening to `deleteprompt`, you
// can pass in your own confirmation flow.
this.preventprompt('delete');
if (confirm('Are you sure you want to delete ' + d + '?')) okDelete(d);
}));
</script>
</body>
</html>