Version 6.3 Released!

Click to checkout the new features

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
    },
});
Donate