bootstrap-table/site/docs/api/column-options.md

---

layout: docs title: Column Options description: The column options API of Bootstrap Table. group: api

toc: true

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.

align

• Attribute: data-align

• Type: String

• Detail:

Indicate how to align the column data. 'left', 'right', 'center' can be used.

• Default: undefined

• Example: Aligning Columns

cardVisible

• Attribute: data-card-visible

• Type: Boolean

• Detail:

Set false to hide the columns item in card view state.

• Default: true

• Example: Card Visible

cellStyle

• Attribute: data-cell-style

• Type: Function

• Detail:

The cell style formatter function, take four parameters:

• value: the field value.
• row: the row record data.
• index: the row index.
• field: the row field.

Support classes or css.

• Default: undefined

• Example: Cell Style

checkbox

• Attribute: data-checkbox

• Type: Boolean

• Detail:

Set true to show a checkbox. The checkbox column has fixed width.

If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the checkbox by use an formatter (return true to check, return false to uncheck).

• Default: false

• Example: Column Checkbox

checkboxEnabled

• Attribute: data-checkbox-enabled

• Type: Boolean

• Detail:

Set false to disable the the checkboxes/radioboxes.

• Default: true

• Example: Checkbox Enabled and Checkbox Disabled

class

• Attribute: class | data-class

• Type: String

• Detail:

The column class name.

• Default: undefined

• Example: Column Class

clickToSelect

• Attribute: data-click-to-select

• Type: Boolean

• Detail:

Set true to select checkbox or radiobox when clicking rows.

• Default: false

• Example: Click to Select

colspan

• Attribute: colspan | data-colspan

• Type: Number

• Detail:

Indicate how many columns a cell should take up.

• Default: undefined

• Example: Rowspan Colspan

detailFormatter

• Attribute: data-detail-formatter

• Type: Function

• Detail:

Format your detail view when detailView and detailViewByClick is set to true. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.

Fallback is the detail-formatter of the table.

• Default: function(index, row, $element) { return '' }

• Example: Detail Formatter

escape

• Attribute: data-escape

• Type: Boolean

• Detail:

Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.

• Default: false

• Example: Column Escape

events

• Attribute: data-events

• Type: Object

• Detail:

The cell events listener when you use formatter function, take four parameters:

• event: the jQuery event.
• value: the field value.
• row: the row record data.
• index: the row index.

Example code:

{% highlight html %} var operateEvents = {

'click .like': function (e, value, row, index) {}

} {% endhighlight %}

• Default: undefined

• Example: Column Events

  falign

• Attribute: data-falign

• Type: String

• Detail:

Indicate how to align the table footer. 'left', 'right', 'center' can be used.

• Default: undefined

• Example: Aligning Footer

field

• Attribute: data-field

• Type: String

• Detail:

The column field name. This field must be unique, or some unknown problems may occur.

• Default: undefined

• Example: Column Field

footerFormatter

• Attribute: data-footer-formatter

• Type: Function

• Detail:

The context (this) is the column Object.

The function, take one parameter:

• data: Array of all the data rows.

the function should return a string with the text to show in the footer cell.

• Default: undefined

• Example: Footer Formatter

formatter

• Attribute: data-formatter

• Type: Function

• Detail:

The context (this) is the column Object.

The cell formatter function, take four parameters:

• value: the field value.
• row: the row record data.
• index: the row index.

• field: the row field.

• Default: undefined

• Example: Column Formatter

halign

• Attribute: data-halign

• Type: String

• Detail:

Indicate how to align the table header. 'left', 'right', 'center' can be used.

• Default: undefined

• Example: Aligning Columns

order

• Attribute: data-order

• Type: String

• Detail:

The default sort order, can only be 'asc' or 'desc'.

• Default: 'asc'

• Example: Sort Name Order

radio

• Attribute: data-radio

• Type: Boolean

• Detail:

Set true to show a radio. The radio column has fixed width.

If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the radio by use an formatter (return true to check, return false to uncheck).

• Default: false

• Example: Column Radio

rowspan

• Attribute: rowspan | data-rowspan

• Type: Number

• Detail:

Indicate how many rows a cell should take up.

• Default: undefined

• Example: Rowspan Colspan

searchFormatter

• Attribute: data-search-formatter

• Type: Boolean

• Detail:

Set true to search use formatted data.

• Default: true

• Example: Search Formatter

searchable

• Attribute: data-searchable

• Type: Boolean

• Detail:

Set true to search data for this column.

• Default: true

• Example: Column Searchable

showSelectTitle

• Attribute: data-show-select-title

• Type: Boolean

• Detail:

Set true to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

• Default: false

• Example: Show Select Title

sortName

• Attribute: data-sort-name

• Type: String

• Detail:

Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of 'html' such as <b><span style="color:red">abc</span></b>, but a fieldName to sort is 'content' with the value of 'abc'.

• Default: undefined

• Example: Sort Name Order

sortable

• Attribute: data-sortable

• Type: Boolean

• Detail:

Set true to allow the column can be sorted.

• Default: false

• Example: Column Sortable

sorter

• Attribute: data-sorter

• Type: Function

• Detail:

The custom field sort function that used to do local sorting, take four parameters:

• fieldA: the first field value.
• fieldB: the second field value.
• rowA: the first row.
• rowB: the second row.

Expected return values: -1, 0, 1.

• Default: undefined

• Example: Column Sorter

switchable

• Attribute: data-switchable

• Type: Boolean

• Detail:

Set false to disable the switchable of columns item.

• Default: true

• Example: Column Switchable

title

• Attribute: data-title

• Type: String

• Detail:

The column title text.

• Default: undefined

• Example: Column Title

titleTooltip

• Attribute: data-title-tooltip

• Type: String

• Detail:

The column title tooltip text. This option also support the title HTML attribute.

• Default: undefined

• Example: Title Tooltip

valign

• Attribute: data-valign

• Type: String

• Detail:

Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.

• Default: undefined

• Example: Aligning Columns

visible

• Attribute: data-visible

• Type: Boolean

• Detail:

Set false to hide the columns item.

• Default: true

• Example: Column Visible

width

• Attribute: data-width

• Type: Number

• Detail:

The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). The default used Unit is 'px', use widthUnit to change it!

• Default: undefined

• Example: Column Width

widthUnit

• Attribute: data-width-unit

• Type: String

• Detail:

Defines the unit which is used for the option width.

• Default: px

• Example: Width Unit