--- 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-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) ## 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) ## 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) ## 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) ## 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) ## 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) ## 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) ## 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) ## 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 %} var operateEvents = { 'click .like': function (e, value, row, index) {} } {% endhighlight %} - **Default:** `undefined` - **Example:** [Column Events](https://examples.bootstrap-table.com/#column-options/events.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) ## 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) ## 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 function should return a string with the text to show in the footer cell. If you fetch data from a server and tries to set the footer value from the server response, please use the `footerField` Option. - **Default:** `undefined` - **Example:** [Footer Formatter](https://examples.bootstrap-table.com/#column-options/footer-formatter.html) ## 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. - **Default:** `undefined` - **Example:** [Column Formatter](https://examples.bootstrap-table.com/#column-options/formatter.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) ## 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) ## 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) ## 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) ## 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) ## 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/search-formatter.html) ## searchHighlightFormatter - **Attribute:** `data-search-highlight-formatter` - **Type:** `Boolean|Function` - **Detail:** Define a `function` to use a custom highlight formatter for the [search highlight](https://bootstrap-table.com/docs/api/table-options/#searchhighlight) option. - **Default:** `true` - **Example:** [Searchable Highlight Formatter](https://examples.bootstrap-table.com/#column-options/search-highlight-formatter.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) ## 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. Expected return values: `-1, 0, 1`. - **Default:** `undefined` - **Example:** [Column Sorter](https://examples.bootstrap-table.com/#column-options/sorter.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 `abc`, 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) ## 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) ## 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) ## 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) ## 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) ## 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)