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
• color - sets the background colour of the cell to the value. Can be any valid CSS color eg. #ff0000, #f00, rgb(255,0,0), red, rgba(255,0,0,0), hsl(0, 100%, 50%)
• 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)
• buttonTick - displays a tick icon on eac row (for use as a button)
• buttonCross - displays a cross icon on eac row (for use as a button)

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

ToolTips

You can set tooltips to be displayed when the cursor hovers over cells. By default, tooltips are not displayed.

Tooltips can either be set globally using the tooltips options parameter:

$("#example-table").tabulator({
	tooltips:true,
});

Or on a per column basis in the column definition array:

//column definition in the columns array
{formatter:printIcon, width:40, align:"center", tooltip:true},

The tooltip parameter can take three different types of value

• boolean - a value of false disables the tooltip, a value of true sets the tooltip of the cell to its value
• string - a string that will be displayed for all cells in the matching column/table.
• function - a callback function that returns the string for the cell. see below:

$("#example-table").tabulator({
	tooltips:function(field, value, data){
		//field - field name of the cell's column
		//value - value of the cell
		//data - data for the cell's row
		
		//function should return a string for the tooltip of false to hide the tooltip
		return  field + " - " + value; //return cells "field - value";
	},
});

NOTE setting a tooltip value on a column will override the global setting.