Column Options

The column options API of Bootstrap Table.

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

field

  • Attribute: data-field

  • Type: String

  • Detail:

    The column field name.

  • Default: undefined

  • Example: Column Field

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

class

  • Attribute: class | data-class

  • Type: String

  • Detail:

    The column class name.

  • Default: undefined

  • Example: Column Class

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

rowspan

  • Attribute: rowspan | data-rowspan

  • Type: Number

  • Detail:

    Indicate how many rows a cell should take up.

  • Default: undefined

  • Example: Rowspan Colspan

colspan

  • Attribute: colspan | data-colspan

  • Type: Number

  • Detail:

    Indicate how many columns a cell should take up.

  • Default: undefined

  • Example: Rowspan Colspan

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

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

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

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

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

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

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

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

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

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

order

  • Attribute: data-order

  • Type: String

  • Detail:

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

  • Default: 'asc'

  • Example: Sort Name Order

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

visible

  • Attribute: data-visible

  • Type: Boolean

  • Detail:

    Set false to hide the columns item.

  • Default: true

  • Example: Column Visible

switchable

  • Attribute: data-switchable

  • Type: Boolean

  • Detail:

    Set false to disable the switchable of columns item.

  • Default: true

  • Example: Column Switchable

cardVisible

  • Attribute: data-card-visible

  • Type: Boolean

  • Detail:

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

  • Default: true

  • Example: Card Visible

searchable

  • Attribute: data-searchable

  • Type: Boolean

  • Detail:

    Set true to search data for this column.

  • Default: true

  • Example: Column Searchable

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

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

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

searchFormatter

  • Attribute: data-search-formatter

  • Type: Boolean

  • Detail:

    Set true to search use formatted data.

  • Default: true

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

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