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/normalize.css@4.2.0"> | |
<div class="grid-target"></div> | |
<script src="https://npmcdn.com/underscore@1.8.3"></script> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script src="https://npmcdn.com/faker@1.0.0/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/grid-components@0.9.0-crosshairs-component-work.2"></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> |