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', '[email protected]', '(353) 01 222 3333'],
    ['Mark', '[email protected]',   '(01) 22 888 4444'],
    ['Eoin', '[email protected]',   '(05) 10 878 5554'],
    ['Nisen', '[email protected]',   '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

tip

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