---
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`.

## 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](https://examples.bootstrap-table.com/#column-options/field.html)

## title

- **Attribute:** `data-title`

- **Type:** `String`

- **Detail:**

  The column title text.

- **Default:** `undefined`

- **Example:** [Column Title](https://examples.bootstrap-table.com/#column-options/title.html)

## 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](https://examples.bootstrap-table.com/#column-options/title-tooltip.html)

## class

- **Attribute:** `class | data-class`

- **Type:** `String`

- **Detail:**

  The column class name.

- **Default:** `undefined`

- **Example:** [Column Class](https://examples.bootstrap-table.com/#column-options/class.html)

## 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](https://examples.bootstrap-table.com/#column-options/width.html)

## widthUnit

- **Attribute:** `data-width-unit`

- **Type:** `String`

- **Detail:**

  Defines the unit which is used for the option `width`.

- **Default:** `px`

- **Example:** [Width Unit](https://examples.bootstrap-table.com/#column-options/width-unit.html)

## rowspan

- **Attribute:** `rowspan | data-rowspan`

- **Type:** `Number`

- **Detail:**

  Indicate how many rows a cell should take up.

- **Default:** `undefined`

- **Example:** [Rowspan Colspan](https://examples.bootstrap-table.com/#column-options/rowspan-colspan.html)

## colspan

- **Attribute:** `colspan | data-colspan`

- **Type:** `Number`

- **Detail:**

  Indicate how many columns a cell should take up.

- **Default:** `undefined`

- **Example:** [Rowspan Colspan](https://examples.bootstrap-table.com/#column-options/rowspan-colspan.html)

## 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](https://examples.bootstrap-table.com/#column-options/aligning-columns.html)

## 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](https://examples.bootstrap-table.com/#column-options/aligning-columns.html)

## 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](https://examples.bootstrap-table.com/#column-options/aligning-footer.html)

## 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](https://examples.bootstrap-table.com/#column-options/aligning-columns.html)

## 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](https://examples.bootstrap-table.com/#column-options/cell-style.html)

## 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](https://examples.bootstrap-table.com/#column-options/radio.html)

## 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](https://examples.bootstrap-table.com/#column-options/checkbox.html)

## checkboxEnabled

- **Attribute:** `data-checkbox-enabled`

- **Type:** `Boolean`

- **Detail:**

  Set `false` to disable the the checkboxes/radioboxes.

- **Default:** `true`

- **Example:** [Checkbox Enabled](https://examples.bootstrap-table.com/#column-options/checkbox-enabled.html) and [Checkbox Disabled](https://examples.bootstrap-table.com/#column-options/checkbox-disabled.html)

## 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](https://examples.bootstrap-table.com/#column-options/click-to-select.html)

## 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](https://examples.bootstrap-table.com/#column-options/show-select-title.html)

## sortable

- **Attribute:** `data-sortable`

- **Type:** `Boolean`

- **Detail:**

  Set `true` to allow the column can be sorted.

- **Default:** `false`

- **Example:** [Column Sortable](https://examples.bootstrap-table.com/#column-options/sortable.html)

## 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](https://examples.bootstrap-table.com/#column-options/sort-name-order.html)

## order

- **Attribute:** `data-order`

- **Type:** `String`

- **Detail:**

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

- **Default:** `'asc'`

- **Example:** [Sort Name Order](https://examples.bootstrap-table.com/#column-options/sort-name-order.html)

## 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.

- **Default:** `undefined`

- **Example:** [Column Sorter](https://examples.bootstrap-table.com/#column-options/sorter.html)

## visible

- **Attribute:** `data-visible`

- **Type:** `Boolean`

- **Detail:**

  Set `false` to hide the columns item.

- **Default:** `true`


- **Example:** [Column Visible](https://examples.bootstrap-table.com/#column-options/visible.html)

## switchable

- **Attribute:** `data-switchable`

- **Type:** `Boolean`

- **Detail:**

  Set `false` to disable the switchable of columns item.

- **Default:** `true`

- **Example:** [Column Switchable](https://examples.bootstrap-table.com/#column-options/switchable.html)

## cardVisible

- **Attribute:** `data-card-visible`

- **Type:** `Boolean`

- **Detail:**

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

- **Default:** `true`

- **Example:** [Card Visible](https://examples.bootstrap-table.com/#column-options/card-visible.html)

## searchable

- **Attribute:** `data-searchable`

- **Type:** `Boolean`

- **Detail:**

  Set `true` to search data for this column.

- **Default:** `true`

- **Example:** [Column Searchable](https://examples.bootstrap-table.com/#column-options/searchable.html)

## formatter

- **Attribute:** `data-formatter`

- **Type:** `Function`

- **Detail:**

  The context (this) is the column Object.

  The cell formatter function, take three parameters:

  * `value`: the field value.
  * `row`: the row record data.
  * `index`: the row index.
  * `field`: the row field.

- **Default:** `undefined`

- **Example:** [Column Formatter](https://examples.bootstrap-table.com/#column-options/format.html)

## 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](https://examples.bootstrap-table.com/#column-options/footer-formatter.html)

## 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](https://examples.bootstrap-table.com/#column-options/detail-formatter.html)

## searchFormatter

- **Attribute:** `data-search-formatter`

- **Type:** `Boolean`

- **Detail:**

  Set `true` to search use formatted data.

- **Default:** `true`

- **Example:** [Search Formatter](https://examples.bootstrap-table.com/#column-options/format-search.html)

## escape

- **Attribute:** `data-escape`

- **Type:** `Boolean`

- **Detail:**

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

- **Default:** `false`

- **Example:** [Column Escape](https://examples.bootstrap-table.com/#column-options/escape.html)

## 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 %}
  <th .. data-events="operateEvent">
  var operateEvents = {
    'click .like': function (e, value, row, index) {}
  }
  {% endhighlight %}

- **Default:** `undefined`

- **Example:** [Column Events](https://examples.bootstrap-table.com/#column-options/events.html)
