How do I add a custom Button inside a cell in handsontable?

aps5842 picture aps5842 · Jul 16, 2014 · Viewed 15k times · Source

I am trying to add a custom save button at the end of each row in handsontable. I am using handsontable package in laravel 4.

The button shows up like this:

enter image description here

<button>Save</button>

Answer

warpech picture warpech · Jul 16, 2014

Try using htmlRenderer

Demo: http://docs.handsontable.com/0.19.0/demo-custom-renderers.html

var actionRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  var $button = $('<button>');
  $button.html(value)
  $(td).empty().append($button); //empty is needed because you are rendering to an existing cell
};

var $container = $("#example1");
$container.handsontable({
  /*....*/
  columns: [
    /*....*/
    {data: "action", renderer: actionRenderer}
  ]
});

For better performance, the renderer could be written in pure JavaScript