column-options.md 7.2 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.
field
Attribute:
data-fieldType:
StringDetail:
The column field name.
- Default:
undefined
title
Attribute:
data-titleType:
StringDetail:
The column title text.
- Default:
undefined
titleTooltip
Attribute:
data-title-tooltipType:
StringDetail:
The column title tooltip text. This option also support the title HTML attribute.
- Default:
undefined
class
Attribute:
class | data-classType:
StringDetail:
The column class name.
- Default:
undefined
width
Attribute:
data-widthType:
Number | StringDetail:
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). Also you can add '%' to your number and the Bootstrap Table will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.
- Default:
undefined
rowspan
Attribute:
rowspan | data-rowspanType:
NumberDetail:
Indicate how many rows a cell should take up.
- Default:
undefined
colspan
Attribute:
colspan | data-colspanType:
NumberDetail:
Indicate how many columns a cell should take up.
- Default:
undefined
align
Attribute:
data-alignType:
StringDetail:
Indicate how to align the column data. 'left', 'right', 'center' can be used.
- Default:
undefined
halign
Attribute:
data-halignType:
StringDetail:
Indicate how to align the table header. 'left', 'right', 'center' can be used.
- Default:
undefined
falign
Attribute:
data-falignType:
StringDetail:
Indicate how to align the table footer. 'left', 'right', 'center' can be used.
- Default:
undefined
valign
Attribute:
data-valignType:
StringDetail:
Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
- Default:
undefined
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:
undefined
radio
Attribute:
data-radioType:
BooleanDetail:
Set true to show a radio. The radio column has fixed width.
- Default:
false
checkbox
Attribute:
data-checkboxType:
BooleanDetail:
Set true to show a checkbox. The checkbox column has fixed width.
- Default:
false
checkboxEnabled
Attribute:
data-checkbox-enabledType:
BooleanDetail:
Set false to disable the the checkboxes/radioboxes.
- Default:
true
clickToSelect
Attribute:
data-click-to-selectType:
BooleanDetail:
Set true to select checkbox or radio when the column is clicked.
- Default:
true
showSelectTitle
Attribute:
data-show-select-titleType:
BooleanDetail:
Set true to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
- Default:
false
sortable
Attribute:
data-sortableType:
BooleanDetail:
Set true to allow the column can be sorted.
- Default:
false
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:
undefined
order
Attribute:
data-orderType:
StringDetail:
The default sort order, can only be 'asc' or 'desc'.
- Default:
'asc'
sorter
Attribute:
data-sorterType:
FunctionDetail:
The custom field sort function that used to do local sorting, take four parameters:
a: the first field value.b: the second field value.rowA: the first row.rowB: the second row.Default:
undefined
visible
Attribute:
data-visibleType:
BooleanDetail:
Set false to hide the columns item.
- Default:
true
switchable
Attribute:
data-switchableType:
BooleanDetail:
Set false to disable the switchable of columns item.
- Default:
true
cardVisible
Attribute:
data-card-visibleType:
BooleanDetail:
Set false to hide the columns item in card view state.
- Default:
true
searchable
Attribute:
data-searchableType:
BooleanDetail:
Set true to search data for this column.
- Default:
true
formatter
Attribute:
data-formatterType:
FunctionDetail:
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
footerFormatter
Attribute:
data-footer-formatterType:
FunctionDetail:
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
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 '' }
searchFormatter
Attribute:
data-search-formatterType:
BooleanDetail:
Set true to search use formatted data.
- Default:
true
escape
Attribute:
data-escapeType:
BooleanDetail:
Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
- Default:
false
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:
undefined