Skip to main content

Detect cell over/out

Detect when a cell has been entered using cellmouseover and cellmouseout events.

import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
});

grid.addEventListener('cellmouseover', function (e) {
  if (!e.cell) {
    return;
  }
  grid.data[0][grid.schema[0].name] =
    'Just arrived at ' + e.cell.columnIndex + ', ' + e.cell.rowIndex;
});
grid.addEventListener('cellmouseout', function (e) {
  if (!e.cell) {
    return;
  }
  grid.data[1][grid.schema[0].name] =
    'Just came from ' + e.cell.columnIndex + ', ' + e.cell.rowIndex;
});

app.append(gridElement);