| license: mit |
The grid component supports optionally showing nested row base on a predicate, at the first-level depth.
This means that conditionally always-shown rows (ie rows that return true from the showRowWhenCollapsed predicate) will be shown even if the parent is not expanded.
Although, if the parent is in turn a child of a collapsed parent, they will not be shown.
showRowWhenCollapsed is null by default, so all rows will be hidden when the parent row is collapsed.
| <!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> | |
| const table = grid.createGrid() | |
| .columns( | |
| [ | |
| { key: 'pinned', width: 70 } | |
| , { | |
| components: [ grid.createNestedRowExpanders() ] | |
| , key: 'label' | |
| , label: 'expanders' | |
| , width: 100 | |
| , resizable: false | |
| , draggable: false | |
| } | |
| , { key: 'label', sortDescending: true } | |
| , { key: 'nestLevel', width: 70, sortable: false } | |
| ] | |
| ) | |
| .showRowWhenCollapsed(d => d.pinned) | |
| , rows = [ | |
| { label: 'A' } | |
| , { | |
| label: 'B' | |
| , expanded: true | |
| , children: [ | |
| { label: 'B0' } | |
| , { label: 'B1', pinned: true } | |
| , { | |
| 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', pinned: true } | |
| ] | |
| } | |
| ] | |
| } | |
| , { label: 'C' } | |
| , { label: 'D' } | |
| ] | |
| d3.select('.grid-target') | |
| .style('height', '500px') | |
| .datum(rows) | |
| .call(table) | |
| </script> |