{hero}

columns.title

Since: DataTables 1.10

Set the column title.

Description

The title of a column is shown in the header cell for that column. It may also be used for other interactions in extensions such as column visibility control, filtering and more.

The titles of columns are typically read directly from the DOM (from the cells in the thead element), but it can be useful to either override existing values, or have DataTables actually construct a header with column titles for you (for example if there is not a thead element in the table before DataTables is constructed). This option is available to provide that ability.

As of DataTables 2, the software will automatically wrap the column title in a span element with a class of dt-column-title. This is done to ensure that the column title can be both read and written to, without interfering with other elements that might be in the column's header.

Please note that when constructing a header, DataTables can only construct a simple header with a single cell for each column. Complex headers with colspan and rowspan attributes must either already be defined in the document, or be constructed using standard DOM / jQuery methods. Furthermore, if you use this property with a multi-row header in the DOM, the title will be set for the first row in the header only.

Type

This option can be given in the following type(s):

Default

Value read from the column's header cell.

Examples

Set the first column's title with columnDefs:

new DataTable('#myTable', {
	columnDefs: [
		{
			title: 'My column title',
			targets: 0
		}
	]
});

Set the first column's title with columns:

new DataTable('#myTable', {
	columns: [{ title: 'My column title' }, null, null, null, null]
});

Related

The following options are directly related and may also be useful in your application development.