{hero}

columns.type

Since: DataTables 1.10

Set the column type - used for filtering and sorting string processing.

Description

When operating in client-side processing mode, DataTables can process the data used for the display in each cell in a manner suitable for the action being performed. For example, HTML tags will be removed from the strings used for filter matching, while sort formatting may remove currency symbols to allow currency values to be sorted numerically. The formatting action performed to normalise the data so it can be ordered and searched depends upon the column's type.

DataTables has a number of built in types which are automatically detected:

  • date - Date / time values. Note that DataTables' built in date parsing works to an ISO 8601 format with 3 separators (/, - and ,). Additional date format support can be added through the use of the built in datetime renderer plus one of the Moment.js or Luxon libraries.
    • Sorting - sorted chronologically
    • Filtering - no effect
  • num - Simple number sorting.
    • Sorting - sorted numerically
    • Filtering - no effect
  • num-fmt - Numeric sorting of formatted numbers. Numbers which are formatted with thousands separators, currency symbols or a percentage indicator will be sorted numerically automatically by DataTables.
    • Supported built-in currency symbols are $, £, and ¥.
    • Supported built-in thousands separators are ' and ,.
    • Examples:
    • $100,000 - sorted as 100000
    • £10'000 - sorted as 10000
    • 5'000 - sorted as 5000
    • 40% - sorted as 40
    • Sorting - sorted numerically
    • Filtering - no effect
  • html-num - As per the num option, but with HTML tags also in the data.
    • Sorting - sorted numerically
    • Filtering - HTML tags removed from filtering string
  • html-num-fmt - As per the num-fmt option, but with HTML tags also in the data.
    • Sorting - sorted numerically
    • Filtering - HTML tags removed from filtering string
  • html-utf8 - Detected if the string contains HTML tags and it contains non-ASCII characters
    • Sorting - Sorts using localeCompare to ensure diacritc characters are correctly sorted
    • Filtering - Can search either with or without diacritic characters, and will match with or without
  • html - Basic string processing for HTML tags
    • Sorting - sorted with HTML tags removed
    • Filtering - HTML tags removed from filtering string
  • string-utf8 - String data type if the text is found to contain non-ASCII characters
    • Sorting - Sorts using localeCompare
    • Filtering - Can search either with or without diacritic characters, and will match with or without
  • string - Fall back type if the data in the column does not match the requirements for the other data types (above).
    • Sorting - no effect
    • Filtering - no effect

The two -utf8 options for html and string are provided separately from their respective base types as they require some extra processing type. They could be bundled together, but for pure ASCII data this approach leads to improved performance.

It is expected that the above options will cover the majority of data types used with DataTables, however, data is flexible and comes in many forms, so additional types with different effects can be added through the use of plug-ins. This provides the ability to sort almost any data format imaginable!

As an optimisation, if you know the column type in advance, you can set the value using this option, saving DataTables from running its auto detection routine.

Please note that if you are using server-side processing (serverSide) this option has no effect since the ordering and search actions are performed by a server-side script.

Type

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

Default

Auto-detected from raw data.

Examples

Set the first column's type manually with columnDefs:

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

Set the first column's type manually with columns:

new DataTable('#myTable', {
	columns: [{ type: 'html' }, null, null, null, null]
});

Related

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