Define Column Headers

Column headers are defined as an array of JSON objects passed into the columns option when you create your tabulator

$("#example-table").tabulator({
	columns:[
		{title:"Name", field:"name", sortable:true, sorter:"string", width:200, editable:true},
		{title:"Age", field:"age", sortable:true, sorter:"number", align:"right", formatter:"progress"},
		{title:"Gender", field:"gender", sortable:true, sorter:"string", onClick:function(e, val, cell, row){console.log("cell click")},},
		{title:"Height", field:"height", sortable:true, formatter:"star", align:"center", width:100},
		{title:"Favourite Color", field:"col", sorter:"string", sortable:false},
		{title:"Date Of Birth", field:"dob", sortable:true, sorter:"date", align:"center"},
		{title:"Cheese Preference", field:"cheese", sortable:true, sorter:"boolean", align:"center", formatter:"tickCross"},
	],
});

There are a number of parameters that can be passed in with each column to determine how it is displayed:

• title - Required This is the title that will be displayed in the header for this column
• field - Required (not required in icon/button columns) this is the key for this column in the data array
• align - sets the text alignment for this column (left|center|right)
• width - sets the width of this column (if not set the system will determine the best)
• sortable - determines if the user can sort data by this column (see Sorting Data for more details)
• sorter - determines how to sort data in this column (see Sorting Data for more details)
• formatter - set how you would like the data to be formatted (see Formatting Data for more details)
• onClick - callback for when user clicks on a cell in this column (see Callbacks for more details)
• editable - (boolean, default - false) determines if this data is editable by the user. will use the editor that matches the formatter by default. (see Manipulating Data for more details)
• editor - set the editor to be used when editing the data. (see Manipulating Data for more details)
• visible - (boolean, default - true) determines if the column is visible. (see Column Visibility for more details)
• cssClass - sets css classes on header and cells in this column. (value should be a string containing space separated class names)
• tooltip - sets the on hover tooltip for each cell in this column (see Formatting Data for more details)