Manipulating Data

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

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).

When a user clicks on an editable column the will be able to edit the value for that cell.

By default Tabulator will use an editor that matches the current formatter for that cell. if you wish to specify a specific editor, you can set them per column using the editor option in the column definition.

{title:"Name", field:"rating", editor:"star"}

Tabulator comes with a number of preconfigured editors including:

• input - editor for plain text.
• number - editor for numbers with increment and decrement buttons.
• tick - editor for tick and tickCross columns.
• star - editor for star columns (can use left/right arrow keys and enter for selection as well as mouse).
• progress - editor for progress bar columns (can use left/right arrow keys and enter for selection as well as mouse)

You can define a custom editor function in the editor option:

{title:"Name", field:"rating", editor:function(cell, value){
		//cell - JQuery object for current cell
		//value - the current value for current cell
		
		//create and style editor
		var editor = $("<select><option value=''></option><option value='male'>male</option><option value='female'>female</option></select>");
		editor.css({
			"border":"1px",
			"background":"transparent",
			"padding":"3px",
			"width":"100%",
			"box-sizing":"border-box",
		})

		//Set value of editor to the current value of the cell
		editor.val(value);

		//set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
		setTimeout(function(){
			editor.focus();
		},100)

		//when the value has been set, trigger the cell to update
		editor.on("change blur", function(e){
			cell.trigger("editval", editor.val());
		});

		//return the editor element
		return editor;
	},
}

Returning a value of false from this function will abort the edit and prevent the cell from being selected.

Retrieving Data

You can retrieve 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.

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 column, 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 represents that row.

Clear Table

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

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