# Namespace: columns

## Ancestry: DataTable » .defaults. » columns

DataTables v1.9.0.beta.1 documentation

Column options that can be given to DataTables at initialisation time.

## Summary

### Properties

<static> aDataSort :array
  Allows a column's sorting to take multiple columns into account when doing a sort. For example first name / last name columns make sense to do a multi-column sort over the two columns.
<static> asSorting :array
  You can control the default sorting direction, and even alter the behaviour of the sort handler (i.e. only allow ascending sorting etc) using this parameter.
<static> bSearchable :boolean
  Enable or disable filtering on the data in this column.
<static> bSortable :boolean
  Enable or disable sorting on this column.
<static> bUseRendered :boolean
  When using fnRender() for a column, you may wish to use the original data (before rendering) for sorting and filtering (the default is to used the rendered data that the user can see). This may be useful for dates etc.
<static> bVisible :boolean
  Enable or disable the display of this column.
<static> fnCreatedCell :function
  Developer definable function that is called whenever a cell is created (Ajax source, etc) or processed for input (DOM source). This can be used as a compliment to fnRender allowing you to modify the DOM element (add background colour for example) when the element is available (since it is not when fnRender is called).
<static> fnRender :function
  Custom display function that will be called for the display of each cell in this column.
<static> iDataSort :int
  The column index (starting from 0!) that you wish a sort to be performed upon when this column is selected for sorting. This can be used for sorting on hidden columns for example.
<static> mDataProp :string|int|function|null
  This property can be used to read data from any JSON data source property, including deeply nested objects / properties. By default DataTables will use an array index (incrementally increased for each column) as the data source, but a string can be used for this property which will read an object property from the data source, a function which will be given the data source object to render into a string or null where the cell will be treated as empty. For more information see http://datatables.net/blog/Extended_data_source_options_with_DataTables
<static> sClass :string
  Class to give to each cell in this column.
<static> sContentPadding :string
  When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation
<static> sDefaultContent :string
  Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mDataProp is set to null, or because the data source itself is null).
<static> sName :string
  This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).
<static> sSortDataType :string
  Defines a data source type for the sorting which can be used to read realtime information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.
<static> sTitle :string
  The title of this column.
<static> sType :string
  The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.
<static> sWidth :string
  Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applys 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

## Details

### Properties

<static> aDataSort :array

  Allows a column's sorting to take multiple columns into account when doing a sort. For example first name / last name columns make sense to do a multi-column sort over the two columns.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
               { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
               { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "aDataSort": [ 0, 1 ] },
               { "aDataSort": [ 1, 0 ] },
               { "aDataSort": [ 2, 3, 4 ] },
               null,
               null
             ]
           } );
         } );

<static> asSorting :array

  You can control the default sorting direction, and even alter the behaviour of the sort handler (i.e. only allow ascending sorting etc) using this parameter.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
               { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
               { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               null,
               { "asSorting": [ "asc" ] },
               { "asSorting": [ "desc", "asc", "asc" ] },
               { "asSorting": [ "desc" ] },
               null
             ]
           } );
         } );

<static> bSearchable :boolean

  Enable or disable filtering on the data in this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "bSearchable": false, "aTargets": [ 0 ] }
             ] } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "bSearchable": false },
               null,
               null,
               null,
               null
             ] } );
         } );

<static> bSortable :boolean

  Enable or disable sorting on this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "bSortable": false, "aTargets": [ 0 ] }
             ] } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "bSortable": false },
               null,
               null,
               null,
               null
             ] } );
         } );

<static> bUseRendered :boolean

  When using fnRender() for a column, you may wish to use the original data (before rendering) for sorting and filtering (the default is to used the rendered data that the user can see). This may be useful for dates etc.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               {
                 "fnRender": function ( oObj ) {
                   return oObj.aData[0] +' '+ oObj.aData[3];
                 },
                 "bUseRendered": false,
                 "aTargets": [ 0 ]
               }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               {
                 "fnRender": function ( oObj ) {
                   return oObj.aData[0] +' '+ oObj.aData[3];
                 },
                 "bUseRendered": false
               },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> bVisible :boolean

  Enable or disable the display of this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "bVisible": false, "aTargets": [ 0 ] }
             ] } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "bVisible": false },
               null,
               null,
               null,
               null
             ] } );
         } );

<static> fnCreatedCell :function

  Developer definable function that is called whenever a cell is created (Ajax source, etc) or processed for input (DOM source). This can be used as a compliment to fnRender allowing you to modify the DOM element (add background colour for example) when the element is available (since it is not when fnRender is called).

  ##### Example

         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [ {
               "aTargets": [3],
               "fnCreatedCell": function (nTd, sData, oData, i) {
                 if ( sData == "1.7" ) {
                   $(nTd).css('color', 'blue')
                 }
               }
             } ]
           });
         } );

<static> fnRender :function

  Custom display function that will be called for the display of each cell in this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               {
                 "fnRender": function ( o ) {
                   return o.aData[0] +' '+ o.aData[3];
                 },
                 "aTargets": [ 0 ]
               }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "fnRender": function ( o ) {
                 return o.aData[0] +' '+ o.aData[3];
               } },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> iDataSort :int

  The column index (starting from 0!) that you wish a sort to be performed upon when this column is selected for sorting. This can be used for sorting on hidden columns for example.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "iDataSort": 1, "aTargets": [ 0 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "iDataSort": 1 },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> mDataProp :string|int|function|null

  This property can be used to read data from any JSON data source property, including deeply nested objects / properties. By default DataTables will use an array index (incrementally increased for each column) as the data source, but a string can be used for this property which will read an object property from the data source, a function which will be given the data source object to render into a string or null where the cell will be treated as empty. For more information see http://datatables.net/blog/Extended_data_source_options_with_DataTables

  ##### Example

         $(document).ready(function() {
           var oTable = $('#example').dataTable( {
             "sAjaxSource": "sources/deep.txt",
             "aoColumns": [
               { "mDataProp": "engine" },
               { "mDataProp": "browser" },
               { "mDataProp": "platform.inner" },
               { "mDataProp": "platform.details.0" },
               { "mDataProp": "platform.details.1" }
             ]
           } );
         } );

<static> sClass :string

  Class to give to each cell in this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sClass": "my_class", "aTargets": [ 0 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "sClass": "my_class" },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> sContentPadding :string

  When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation

  ##### Example

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               null,
               null,
               null,
               {
                 "sContentPadding": "mmm"
               }
             ]
           } );
         } );

<static> sDefaultContent :string

  Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mDataProp is set to null, or because the data source itself is null).

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               {
                 "mDataProp": null,
                 "sDefaultContent": "Edit",
                 "aTargets": [ -1 ]
               }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               null,
               null,
               null,
               {
                 "mDataProp": null,
                 "sDefaultContent": "Edit"
               }
             ]
           } );
         } );

<static> sName :string

  This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sName": "engine", "aTargets": [ 0 ] },
               { "sName": "browser", "aTargets": [ 1 ] },
               { "sName": "platform", "aTargets": [ 2 ] },
               { "sName": "version", "aTargets": [ 3 ] },
               { "sName": "grade", "aTargets": [ 4 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "sName": "engine" },
               { "sName": "browser" },
               { "sName": "platform" },
               { "sName": "version" },
               { "sName": "grade" }
             ]
           } );
         } );

<static> sSortDataType :string

  Defines a data source type for the sorting which can be used to read realtime information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
               { "sType": "numeric", "aTargets": [ 3 ] },
               { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
               { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               null,
               null,
               { "sSortDataType": "dom-text" },
               { "sSortDataType": "dom-text", "sType": "numeric" },
               { "sSortDataType": "dom-select" },
               { "sSortDataType": "dom-checkbox" }
             ]
           } );
         } );

<static> sTitle :string

  The title of this column.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sTitle": "My column title", "aTargets": [ 0 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "sTitle": "My column title" },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> sType :string

  The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sType": "html", "aTargets": [ 0 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "sType": "html" },
               null,
               null,
               null,
               null
             ]
           } );
         } );

<static> sWidth :string

  Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applys 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

  ##### Examples

         // Using aoColumnDefs
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumnDefs": [
               { "sWidth": "20%", "aTargets": [ 0 ] }
             ]
           } );
         } );

         // Using aoColumns
         $(document).ready(function() {
           $('#example').dataTable( {
             "aoColumns": [
               { "sWidth": "20%" },
               null,
               null,
               null,
               null
             ]
           } );
         } );