columns.widthCalc

Column width assignment.

Description

DataTables column width calculations will use data from all rows in the table by default, which is normally a fast scan operation to find the longest strings and words. However, if the display data type (see columns.render and the orthogonal data manual) involves a processor intensive operation (e.g. rendering DOM elements), it can cause performance issues.

This option provides a way to limit the rows used for the column width calculations to just the rows in the current display. Typically you will not need to set this manually, but it is utilised by the React and Vue integrations for DataTables to improve performance where child components might need to be rendered into a cell.

If you do use this option, it is best to do so on columns that have consistent data width - e.g. control buttons or a link, rather than in a column with string information that can vary in width significantly.

Type

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

• string

Default

• Value: all

Use all records from the column to determine the optimal column widths.

Example

new DataTable('#myTable', {
	columnDefs: [{
		widthCalc: 'display',
		targets: 0
	}]
});

Related

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