Skip to content
Oli Folkerd edited this page Jan 16, 2016 · 4 revisions

Tabulator features a range of callbacks to allow you to handle user interaction.

###Cell Click The cell click callback is triggered when a user left clicks on a cell, it can be set on a per column basis using the onClick option in the columns data.

{title:"Name", field:"name", onClick:function(e, cell, value, data){
		//e - the click event object
		//cell - the DOM element of the cell
		//value - the value of the cell
		//data - the data for the row the cell is in
	},
}

###Row Click The row click callback is triggered when a user clicks on a row, it can be set globally, by setting the rowClick option when you create your Tabulator.

$("#example-table").tabulator({
	rowClick:function(e, id, data, row){
		//e - the click event object
		//id - the id of the row
		//data - the data for the row
		//row - the DOM element of the row
	},
});

###Row Added The row added callback is triggered when a row is added to the table by the *addRow function.

$("#example-table").tabulator({
	rowAdded:function(data){
		//data - the data for the row
	},
});

Row Moved

when a row has been successfully moved, the rowMoved callback will be triggered.

$("#example-table").tabulator({
	rowMoved:function(id, data, row, index){
		//id - the id of the row
		//data - the data for the row
		//row - the DOM element of the row
		//index - new position of row in table
	}
});

###Row Edit The row edit callback is triggered when data in an editable row is changed.

$("#example-table").tabulator({
	rowEdit:function(id, data, row){
		//id - the id of the row
		//data - the data for the row
		//row - the DOM element of the row
	},
});

###Row Deleted The row deleted callback is triggered when a row is deleted from the table by the deleteRow function.

$("#example-table").tabulator({
	rowDelete:function(id){
		//id - the id of the row
	},
});

###Row Context Menu The row context callback is triggered when a user right clicks on a row, it can be set globally, by setting the rowContext option when you create your Tabulator.

$("#example-table").tabulator({
	rowContext:function(e, id, data, row){
		//e - the click event object
		//id - the id of the row
		//data - the data for the row
		//row - the DOM element of the row
	},
});

###Column Moved When a column has been successfully moved, the colMoved callback will be triggered.

$("#example-table").tabulator({
	colMoved:function(field, columns){
		//field- the filed name of the moved column
		//columns- the updated columns config array
	}
});

###Data Loaded The data loaded callback is triggered when a new set of data is loaded into the table, it can be set globally, by setting the dataLoaded option when you create your

$("#example-table").tabulator({
	dataLoaded:function(data){
		//data - the data for the row
	},
});