| license: mit |
The Zambezi Grid component supports nested rows.
To nest rows, add them them as an array to the children property of the parent row.
If you don't need tree-like expanders that are deeply nested, you can use simpleNestedRowExpanders to render a basic expand/collapse control.
| <!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/@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.createSimpleNestedRowExpanders() | |
| ] | |
| , label: 'X' | |
| , width: 40 | |
| } | |
| , { 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, therefore 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' } | |
| ] | |
| d3.select('.grid-target') | |
| .style('height', '500px') | |
| .datum(rows) | |
| .call(table) | |
| </script> |