The crosshairs
component can be used to highlight cells on hover.
By default it will highlight both the column and row for the hovered cell.
This can be changed by using the vertical
and horizontal
getter setters.
license: mit |
<!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/[email protected]/faker.js"></script> | |
<script src="https://npmcdn.com/@zambezi/fun@2"></script> | |
<script src="https://npmcdn.com/@zambezi/d3-utils@3"></script> | |
<script src="https://npmcdn.com/@zambezi/grid@0"></script> | |
<script src="https://npmcdn.com/@zambezi/[email protected]"></script> | |
<script> | |
const rows = _.range(1, 500).map(faker.Helpers.createCard) | |
, crosshairs = gridComponents.createCrosshairs() | |
, table = grid.createGrid() | |
.columns( | |
[ | |
{ key: 'name', width: 200 } | |
, { key: 'username', locked: 'left' } | |
, { key: 'email' } | |
, { | |
label: 'some synthetic column' | |
, format: r => `${r.username.slice(0, 3)} -- ${r.address.city}` | |
, sort: (a, b) => d3.ascending(a.name, b.name) | |
} | |
, { key: 'phone' } | |
, { label: 'changed', format: () => _.uniqueId('ch:'), locked: 'right' } | |
] | |
) | |
.usePre(crosshairs) | |
rows[parseInt(rows.length / 2)].locked = 'top' | |
rows[parseInt(rows.length / 2) + 1].locked = 'bottom' | |
rows[parseInt(rows.length / 2) + 2].locked = 'bottom' | |
d3.select('.grid-target') | |
.style('height', '500px') | |
.datum(rows) | |
.call(table) | |
</script> |