column-options.md 13 KB
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-alignType:
StringDetail:
Indicate how to align the column data. 'left', 'right', 'center' can be used.
Default:
undefinedExample: Aligning Columns
cardVisible
Attribute:
data-card-visibleType:
BooleanDetail:
Set false to hide the columns item in the card view state.
Default:
trueExample: Card Visible
cellStyle
Attribute:
data-cell-styleType:
FunctionDetail:
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:
undefinedExample: Cell Style
checkbox
Attribute:
data-checkboxType:
BooleanDetail:
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:
falseExample: Column Checkbox
checkboxEnabled
Attribute:
data-checkbox-enabledType:
BooleanDetail:
Set false to disable the checkboxes/radio boxes.
Default:
trueExample: Checkbox Enabled and Checkbox Disabled
class
Attribute:
class | data-classType:
StringDetail:
The column class name.
Default:
undefinedExample: Column Class
clickToSelect
Attribute:
data-click-to-selectType:
BooleanDetail:
Set true to select the checkbox or radio box when clicking rows.
Default:
trueExample: Click to Select
colspan
Attribute:
colspan | data-colspanType:
NumberDetail:
Indicate how many columns a cell should take up.
Default:
undefinedExample: Rowspan Colspan
detailFormatter
Attribute:
data-detail-formatterType:
FunctionDetail:
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-escapeType:
BooleanDetail:
Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
Default:
undefinedExample: Column Escape
events
Attribute:
data-eventsType:
ObjectDetail:
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 %}
'click .like': function (e, value, row, index) {}
} {% endhighlight %}
Default:
undefinedExample: Column Events
falign
Attribute:
data-falignType:
StringDetail:
Indicate how to align the table footer. 'left', 'right', 'center' can be used.
Default:
undefinedExample: Aligning Footer
field
Attribute:
data-fieldType:
StringDetail:
The column field name. This field must be unique, or some unknown problems may occur.
Default:
undefinedExample: Column Field
footerFormatter
Attribute:
data-footer-formatterType:
FunctionDetail:
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:
undefinedExample: Footer Formatter
footerStyle
Attribute:
data-footer-styleType:
FunctionDetail:
The footer style formatter function, takes one parameter:
column: the column object.
Support classes or css. Example usage:
{% highlight javascript %} function footerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
} {% endhighlight %}
Default:
{}Example: Footer Style
formatter
Attribute:
data-formatterType:
FunctionDetail:
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:
undefinedExample: Column Formatter
halign
Attribute:
data-halignType:
StringDetail:
Indicate how to align the table header. 'left', 'right', 'center' can be used.
Default:
undefinedExample: Aligning Columns
order
Attribute:
data-orderType:
StringDetail:
The default sort order, can only be 'asc' or 'desc'.
Default:
'asc'Example: Sort Name Order
radio
Attribute:
data-radioType:
BooleanDetail:
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:
falseExample: Column Radio
rowspan
Attribute:
rowspan | data-rowspanType:
NumberDetail:
Indicate how many rows a cell should take up.
Default:
undefinedExample: Rowspan Colspan
searchable
Attribute:
data-searchableType:
BooleanDetail:
Set true to search data for this column.
Default:
trueExample: Column Searchable
searchFormatter
Attribute:
data-search-formatterType:
BooleanDetail:
Set true to search using formatted data.
Default:
trueExample: Search Formatter
searchHighlightFormatter
Attribute:
data-search-highlight-formatterType:
Boolean|FunctionDetail:
Define a function to use a custom highlight formatter for the search highlight option.
Default:
trueExample: Searchable Highlight Formatter
showSelectTitle
Attribute:
data-show-select-titleType:
BooleanDetail:
Set true to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
Default:
falseExample: Show Select Title
sortable
Attribute:
data-sortableType:
BooleanDetail:
Set true to allow the column can be sorted.
Default:
falseExample: Column Sortable
sorter
Attribute:
data-sorterType:
FunctionDetail:
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:
undefinedExample: Column Sorter
sortName
Attribute:
data-sort-nameType:
StringDetail:
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:
undefinedExample: Sort Name Order
switchable
Attribute:
data-switchableType:
BooleanDetail:
Set false to disable the switchable of columns item.
Default:
trueExample: Column Switchable
switchableLabel
Attribute:
data-switchable-labelType:
StringDetail:
The label of the switchable column in the dropdown. If not specified uses the column title.
Default:
undefinedExample: Column Switchable
title
Attribute:
data-titleType:
StringDetail:
The column title text.
Default:
undefinedExample: Column Title
titleTooltip
Attribute:
data-title-tooltipType:
StringDetail:
The column title tooltip text. This option also supports the title HTML attribute.
Default:
undefinedExample: Title Tooltip
valign
Attribute:
data-valignType:
StringDetail:
Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
Default:
undefinedExample: Aligning Columns
visible
Attribute:
data-visibleType:
BooleanDetail:
Set false to hide the columns item.
Default:
trueExample: Column Visible
width
Attribute:
data-widthType:
NumberDetail:
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:
undefinedExample: Column Width
widthUnit
Attribute:
data-width-unitType:
StringDetail:
Defines the unit which is used for the option width.
Default:
pxExample: Width Unit