Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Custom buttons

The alter method can be used if you want to insert or remove rows and columns using external buttons. The below example uses the a custom made jquery.handsontable.removeRow.js extension for that matter. Move your mouse over a row to see it.

You can programically select a cell using the selectCell method. The below button implements it.

Show row headers Show col headers

x		A	B	C	D	E
x	1		Kia	Nissan	Toyota	Honda
x	2	2008	10	11	12	13
x	3	2009	20	11	14	13
x	4	2010	30	15	12	13
x	5

var container = $("#example1");

container.handsontable({
  startRows: 15,
  startCols: 16,
  rowHeaders: true,
  colHeaders: true,
  minSpareCols: 1,
  minSpareRows: 1,
  contextMenu: true,
  RemoveRow: true
});

var data = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];

container.handsontable("loadData", data);

$("button#selectFirst").on('click', function () {
  setTimeout(function () {
    //timeout is needed because Handsontable normally deselects
    //current cell when you click outside the table
    container.handsontable("selectCell", 0, 0);
  }, 10);
});

$("input#rowHeaders").change(function () {
  container.handsontable("updateSettings", {rowHeaders: $(this).is(':checked')});
});

$("input#colHeaders").change(function () {
  container.handsontable("updateSettings", {colHeaders: $(this).is(':checked')});
});

For more examples, head back to the main page.