Formatting Data

Tabulator allows you to format your data in a wide variety of ways, so your tables can display information in a more graphical and clear layout.

you can set formatters on a per column basis using the formatter option in the column data.

{title:"Name", field:"name", formatter:"tick"}

Tabulator comes with a number of preconfigured formatters including:

• money - formats a number into currency notation (eg. 1234567.8901 -> 1,234,567.89)
• email - renders data as an anchor with a mailto: link to the given value
• link - renders data as an anchor with a link to the given value
• tick - displays a green tick if the value is (true|'true'|'True'|1) and an empty cell if not
• tickCross - displays a green tick if the value is (true|'true'|'True'|1) and a red cross if not
• star - displays a graphical 0-5 star rating based on integer values from 0-5
• progress - displays a progress bar that fills the cell from left to right, using values 0-100 as a percentage of width

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

{title:"Name", field:"name", formatter:function(value, data, cell, row, options){
		//value - the value of the cell
		//data - the data for the row the cell is in
		//cell - the DOM element of the cell
		//row - the DOM element of the row
		//options - the options set for this tabulator
		return "<div></div>"; // must return the html or jquery element of the html for the contents of the cell;
	},
}

###Icon/Button Columns You can create icon/button columns, by not specifying the field parameter in the column data and creating a custom formatter for the column contents. In the example below we have created a print button on the left of each row.

//custom formatter definition
var printIcon = function(value, data, cell, row, options){ //plain text value
			return "<i class='fa fa-print'></i>"
};

//column definition in the columns array
{formatter:printIcon, width:40, align:"center", onClick:function(e, cell, val, row){alert("Printing row data for: " + row.name)}},

###Row Formatting Tabulator also allows you to define a row level formatter using the rowFormatter option. this lets you alter each row of the table based on the data it contains.

The example below changes the background colour of a cell to blue if the col value for that row is "blue".

$("#example-table-6").tabulator({
	rowFormatter:function(row, data){
		//row - JQuery object for row
		//data - the data for the row

		if(data.col == "blue"){
			row.css({"background-color":"#A6A6DF"});
		}
	},
});