Skip to content

Instantly share code, notes, and snippets.

@gabrielmontagne
Last active October 27, 2016 11:04
Show Gist options
  • Save gabrielmontagne/d4df15d27a5ebb9585ce97e70f988471 to your computer and use it in GitHub Desktop.
Save gabrielmontagne/d4df15d27a5ebb9585ce97e70f988471 to your computer and use it in GitHub Desktop.
Zambezi Grid -- nested rows
license: mit
height: 800

Nested rows

The Zambezi Grid component supports nested rows. To nest rows, add them them as an array to the children property of the parent row.

In order to display the row hierarchy on a particular column you need to use the nested row expanders column component. Simply import it and add it to the components list for the column you want it to operate on.

The nested row expanders component will also render label, and will use the standard column formatter and key properties to do so. If you want to use the expanders without a label, you can configure a formatter to return an empty string for that column.

If you want certain rows to be expanded from the outset, set on them an expanded property set to true.

The grid supports arbitrarily nested rows. Nested columns can have their own children columns with deeper nested rows.

NOTE: cells that use the nested rows expanded components don't support truncation.

<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]">
<p>
<button id="expand-all">expand all</button>
<button id="collapse-all">collapse all</button>
</p>
<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()
.columns(
[
{
components: [
grid.createNestedRowExpanders()
]
, key: 'label'
, label: 'expanders'
, width: 100
, resizable: false
, draggable: false
}
, { key: 'label', sortDescending: true }
, { key: 'nestLevel', width: 70, sortable: false }
]
)
, rows = [
{ label: 'A' }
, {
label: 'B'
, expanded: true
, children: [
{ label: 'B0' }
, { label: 'B1' }
, {
label: 'B2' // not expanded, therfore not shown.
, children: [
{ label: 'B2a' }
, { label: 'B2b' }
, {
label: 'B2c'
, children: [
{ label: 'B2c0' }
, {
label: 'B2c1'
, children: [
{ label: 'B2c1A' }
, { label: 'B2c1B' }
, { label: 'B2c1C' }
, { label: 'B2c1D' }
]
}
, { label: 'B2c2' }
, { label: 'B2c3' }
]
}
, { label: 'B2d' }
]
}
, {
label: 'B3'
, expanded: true
, children: [
{ label: 'B3a' }
, { label: 'B3b' }
, { label: 'B3c' }
, { label: 'B3d' }
]
}
]
}
, { label: 'C' }
, { label: 'D' }
]
, target = d3.select('.grid-target')
.style('height', '500px')
.datum(rows)
draw()
d3.select('#expand-all')
.on('click.collapse', onExpand)
.on('click.redraw', draw)
d3.select('#collapse-all')
.on('click.collapse', onCollapse)
.on('click.redraw', draw)
function draw() {
target.call(table)
}
function onExpand() {
rows.forEach(expand)
function expand(row) {
if (!row.children) return
row.expanded = true
row.children.forEach(expand)
}
}
function onCollapse() {
rows.forEach(collapse)
function collapse(row) {
if (!row.children) return
row.expanded = false
row.children.forEach(collapse)
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment