Callbacks
Overview
Tabulator features a range of callbacks to allow you to handle user interaction and system events.
Callbacks provide a way for you to alter the flow of events in the table, often requiring a return value. The exceptions to this are the cell/column event callbacks which function as events but are bound to specific columns to allow precision event bindings.
Callbacks can be set in the options object when you create your Tabulator, as outlined below.
Tabulator also provides a wide range of Events that you can subscribe to to keep track of table operations
Column Callbacks
These callbacks allow binding functionality to interaction events on specific columns, if you would like to watch all columns at the same time you should look at using Table Events
Column Header Click
The headerClick callback is triggered when a user left clicks on a column or group header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerClick:function(e, column){
//e - the click event object
//column - column component
},
}
Column Header Double Click
The headerDblClick callback is triggered when a user double clicks on a column or group header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerDblClick:function(e, column){
//e - the click event object
//column - column component
},
}
Column Header Right Click
The headerContext callback is triggered when a user right clicks on a column or group header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerContext:function(e, column){
//e - the click event object
//column - column component
},
}
Column Header Tap
The headerTap callback is triggered when a user taps on the column header on a touch display, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerTap:function(e, column){
//e - the tap event object
//column - column component
},
}
Column Header Double Tap
The headerDblTap callback is triggered when a user taps on the column header on a touch display twice in under 300ms, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerDblTap:function(e, column){
//e - the tap event object
//column - column component
},
}
Column Header Tap Hold
The headerTapHold callback is triggered when a user taps on the column header on a touch display and holds their finger down for over 1 second, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerTapHold:function(e, column){
//e - the tap event object
//column - column component
},
}
Column Header Mouse Enter
The headerMouseEnter callback is triggered when the mouse pointer enters a column header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseEnter:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Leave
The headerMouseLeave callback is triggered when the mouse pointer leaves a column header , it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseLeave:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Over
The headerMouseOver callback is triggered when the mouse pointer enters a column header or one of its child element, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseOver:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Out
The headerMouseOut callback is triggered when the mouse pointer leaves a column header or one of its child element, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseOut:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Move
The headerMouseMove callback is triggered when the mouse pointer moves over a column header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseMove:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Down
The headerMouseDown event is triggered when the left mouse button is pressed with the cursor over a column header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseDown:function(e, column){
//e - the event object
//column - column component
},
}
Column Header Mouse Up
The headerMouseUp event is triggered when the left mouse button is released with the cursor over a column header, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", headerMouseUp:function(e, column){
//e - the event object
//column - column component
},
}
Cell Callbacks
These callbacks allow binding functionality to interaction events on cells in specific columns, if you would like to watch all cells at the same time you should look at using Table Events
Cell Click
The cellClick callback is triggered when a user left clicks on a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
Cell Double Click
The cellDblClick callback is triggered when a user double clicks on a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
Cell Right Click
The cellContext callback is triggered when a user right clicks on a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellContext:function(e, cell){
//e - the click event object
//cell - cell component
},
}
Cell Tap
The cellTap callback is triggered when a user taps on a cell in this column on a touch display, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellTap:function(e, cell){
//e - the tap event object
//cell - cell component
},
}
Cell Double Tap
The cellDblTap callback is triggered when a user taps on a cell in this column on a touch display twice in under 300ms, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellDblTap:function(e, cell){
//e - the tap event object
//cell - cell component
},
}
Cell Tap Hold
The cellTapHold callback is triggered when a user taps on a cell in this column on a touch display and holds their finger down for over 1 second, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellTapHold:function(e, cell){
//e - the tap event object
//cell - cell component
},
}
Cell Mouse Enter
The cellMouseEnter callback is triggered when the mouse pointer enters a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseEnter:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Leave
The cellMouseLeave callback is triggered when the mouse pointer leaves a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseLeave:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Over
The cellMouseOver callback is triggered when the mouse pointer enters a cell or one of its child element, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseOver:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Out
The cellMouseOut callback is triggered when the mouse pointer leaves a cell or one of its child element, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseOut:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Move
The cellMouseMove callback is triggered when the mouse pointer moves over a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseMove:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Down
The cellMouseDown event is triggered when the left mouse button is pressed with the cursor over a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseDown:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Mouse Up
The cellMouseUp event is triggered when the left mouse button is released with the cursor over a cell, it can be set on a per column basis using the option in the columns definition object.
{title:"Name", field:"name", cellMouseUp:function(e, cell){
//e - the event object
//cell - cell component
},
}
Cell Editing
The cellEditing callback is triggered when a user starts editing a cell.
{title:"Name", field:"name", cellEditing:function(cell){
//cell - cell component
},
}
Cell Edit Cancelled
The cellEditCancelled callback is triggered when a user aborts a cell edit and the cancel function is called.
{title:"Name", field:"name", cellEditCancelled:function(cell){
//cell - cell component
},
}
Cell Edited
The cellEdited callback is triggered when data in an editable cell is changed.
{title:"Name", field:"name", cellEdited:function(cell){
//cell - cell component
},
}
Ajax Callbacks
Ajax Response
The ajaxResponse callback is triggered when a successful ajax request has been made. This callback can also be used to modify the received data before it is parsed by the table. If you use this callback it must return the data to be parsed by Tabulator, otherwise no data will be rendered.
var table = new Tabulator("#example-table", {
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response; //return the response data to tabulator
},
});
Download Callbacks
Mutate Data Before Download
If you want to make any changes to the table data before it is parsed into the download file you can pass a mutator function to the downloadDataFormatter callback.
In the example below we map the numerical age column into a string of "adult" or "child" based on the age value
var table = new Tabulator("#example-table", {
downloadDataFormatter:function(data){
//data - active table data array
data.forEach(function(row){
row.age = row.age >= 18 ? "adult" : "child";
});
return data;
},
});
Intercept & Manipulate Download Blob
The downloadReady callback allows you to intercept the download file data before the users is prompted to save the file.
In order for the download to proceed the downloadReady callback is expected to return a blob of file to be downloaded.
If you would prefer to abort the download you can return false from this callback. This could be useful for example if you want to send the created file to a server via ajax rather than allowing the user to download the file.
var table = new Tabulator("#example-table", {
downloadReady:function(fileContents, blob){
//fileContents - the unencoded contents of the file
//blob - the blob object for the download
//custom action to send blob to server could be included here
return blob; //must return a blob to proceed with the download, return false to abort download
},
});