Manipulating Data

Manipulating Data

Tabulator allows you to manipulate the data in the table in a number of different ways

Clear Table

You can clear all data in the table using the *clear function:

$("#example-table").tabulator("clear");

Editable Data

Columns of the table can be set as editable using the editable parameter in the column definition. (see Define Column Headers for more details).

Note - Only columns without formatters can be set as editable.

When a user clicks on an editable column the will be able to edit the text in that cell. for the moment only plain text can be edited, support for custom editors willl be comming in a future version.

Add Row

Additional rows can be added to the table at any point using the addRow function:

$("#example-table").tabulator("addRow", {name:"Billy Bob", age:"12", gender:"male", height:1});

If you do not pass data for a colum, it will be left empty. to create a blank row (ie for a user to fill in), pass an empty object to the function.

By default any new rows will be added to the bottom of the table, to change this to the top set the addRowPos option to "top";

Delete Row

You can delete any row in the table using the *deleteRow function;

$("#example-table").tabulator("deleteRow", 15);

You can either pass the function the id of the row you wish to delete or the data object that represnts that row.

Retreiving Data

You can retreive the data stored in the table using the *getData function.

var data = $("#example-table").tabulator("getData");

This will return an array containing the data objects for each row in the table.