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.

You can pass an optional additional parameter with formatter, formatterParams that should contain an object with additional information for configuring the formatter.

{title:"Name", field:"rating", formatter:"star", formatterParams:{stars:6}}

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 star rating based on integer values
  • optional formatterParams
  • stars - maximum number of stars to be displayed (default 5)
• progress - displays a progress bar that fills the cell from left to right, using values 0-100 as a percentage of width
  • optional formatterParams
  • min - minimum value for progress bar (default 0)
  • max - minimum value for progress bar (default 100)
  • color - colour of progress bar (default #2DC214)

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

{title:"Name", field:"name", formatter:function(value, data, cell, row, options, formatterParams){
		//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
		//formatterParams - parameters set for the column
		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").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"});
		}
	},
});