-
Notifications
You must be signed in to change notification settings - Fork 821
Callbacks
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
},
});
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
},
});