Events

Grid.js has a global EventEmitter object which is used to emit events throughout the application lifecycle. Simply, use the on method to capture and bind a function to events.

Open your developer tools console to see the logs:

Live Editor

const grid = new Grid({ columns: ['Name', 'Email', 'Phone Number'], sort: true, search: true, data: [ ['John', 'john@example.com', '(353) 01 222 3333'], ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], ['Nisen', 'nis900@gmail.com', '313 333 1923'] ] }); grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args)); grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  sort: true,
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ]
});
   
grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));
grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));

Result

Name	Email	Phone Number
John	john@example.com	(353) 01 222 3333
Mark	mark@gmail.com	(01) 22 888 4444
Eoin	eo3n@yahoo.com	(05) 10 878 5554
Nisen	nis900@gmail.com	313 333 1923

tip

See a full list of Grid.js global events on event.ts and table events on eventTable