Column Options

The column options API of Bootstrap Table.

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 the 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 a fixed width.

  If a value is given, the checkbox is automatically checked. Its also possible to check/uncheck the checkbox by using a 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 checkboxes/radio boxes.

• 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 the checkbox or radio box when clicking rows.

• Default: true

• 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: undefined

• 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:

  <th .. data-events="operateEvent">
  var operateEvents = {
    'click .like': function (e, value, row, index) {}
  }
  

• 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, takes two parameters:

  • data: Array of all the data rows.
  • value: If footer data is set, the value of the footer column.

  The expected return data type is jQuery, String or HTMLElement. Other types will be forced to the String type.

  If you fetch data from a server and set the footer value from the server response, please use the footerField Option.

• Default: undefined

• Example: Footer Formatter

footerStyle

• Attribute: data-footer-style

• Type: Function

• Detail:

  The footer style formatter function, takes one parameter:

  • column: the column object.

  Support classes or css. Example usage:

  function footerStyle(column) {
    return {
      css: { 'font-weight': 'normal' },
      classes: 'my-class'
    }
  }
  

• Default: {}

• Example: Footer Style

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.

  The expected return data type is jQuery, String or HTMLElement. Other types will be forced to the String type.

• 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 a fixed width.

  If a value is given, the checkbox is automatically checked. Its also possible to check/uncheck the radio by using a 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

searchable

• Attribute: data-searchable

• Type: Boolean

• Detail:

  Set true to search data for this column.

• Default: true

• Example: Column Searchable

searchFormatter

• Attribute: data-search-formatter

• Type: Boolean

• Detail:

  Set true to search using formatted data.

• Default: true

• Example: Search Formatter

searchHighlightFormatter

• Attribute: data-search-highlight-formatter

• Type: Boolean|Function

• Detail:

  Define a function to use a custom highlight formatter for the search highlight option.

• Default: true

• Example: Searchable Highlight Formatter

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

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 is 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

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

switchable

• Attribute: data-switchable

• Type: Boolean

• Detail:

  Set false to disable the switchable of columns item.

• Default: true

• Example: Column Switchable

switchableLabel

• Attribute: data-switchable-label

• Type: String

• Detail:

  The label of the switchable column in the dropdown. If not specified uses the column title.

• Default: undefined

• 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 supports 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 the 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