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