Table Options

The table options API of Bootstrap Table.

The table options are defined in jQuery.fn.bootstrapTable.defaults.

-

  • Attribute: data-toggle

  • Type: String

  • Detail:

    Activate bootstrap table without writing JavaScript.

  • Default: 'table'

  • Example: From HTML

height

  • Attribute: data-height

  • Type: Number

  • Detail:

    The height of table, enable fixed header of table.

  • Default: undefined

  • Example: Table Height

classes

  • Attribute: data-classes

  • Type: String

  • Detail:

    The class name of table. 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' and 'table-borderless' can be used. By default, the table is bordered.

  • Default: 'table table-bordered table-hover'

  • Example: Table Classes

theadClasses

  • Attribute: data-thead-classes

  • Type: String

  • Detail:

    The class name of table thead. Bootstrap v4, use the modifier classes .thead-light or .thead-dark to make theads appear light or dark gray.

  • Default: ''

  • Example: Thead Classes

rowStyle

  • Attribute: data-row-style

  • Type: Function

  • Detail:

    The row style formatter function, takes two parameters:

    • row: the row record data.
    • index: the row index.

    Support classes or css.

  • Default: {}

  • Example: Row Style

rowAttributes

  • Attribute: data-row-attributes

  • Type: Function

  • Detail:

    The row attribute formatter function, takes two parameters:

    • row: the row record data.
    • index: the row index.

    Support all custom attributes.

  • Default: {}

  • Example: Row Attributes

undefinedText

  • Attribute: data-undefined-text

  • Type: String

  • Detail:

    Defines the default undefined text.

  • Default: '-'

  • Example: Undefined Text

locale

  • Attribute: data-locale

  • Type: String

  • Detail:

    Sets the locale to use (i.e. 'zh-CN'). Locale files must be pre-loaded. Allows for fallback locales, if loaded, in the following order:

    • First tries for the locale as specified,
    • Then tries the locale with ‘_’ translated to ‘-‘ and the region code upper cased,
    • Then tries the the short locale code (i.e. 'zh' instead of 'fr-CA'),
    • And finally will use the last locale file loaded (or the default locale if no locales loaded).

    If left undefined or an empty string, uses the last locale loaded (or 'en-US' if no locale files loaded).

  • Default: undefined

  • Example: Table Locale

sortable

  • Attribute: data-sortable

  • Type: Boolean

  • Detail:

    Set false to disable sortable of all columns.

  • Default: true

  • Example: Table Sortable

sortClass

  • Attribute: data-sort-class

  • Type: String

  • Detail:

    The class name of the td elements which are sorted.

  • Default: undefined

  • Example: Sort Class

silentSort

  • Attribute: data-silent-sort

  • Type: Boolean

  • Detail:

    Set false to sort the data with loading message. This options works when the sidePagination option is set to 'server'.

  • Default: true

  • Example: Silent Sort

sortName

  • Attribute: data-sort-name

  • Type: String

  • Detail:

    Defines which column will be sorted.

  • Default: undefined

  • Example: Sort Name Order

sortOrder

  • Attribute: data-sort-order

  • Type: String

  • Detail:

    Defines the column sort order, can only be 'asc' or 'desc'.

  • Default: 'asc'

  • Example: Sort Name Order

sortStable

  • Attribute: data-sort-stable

  • Type: Boolean

  • Detail:

    Set true to get a stable sorting. We will add '_position' property to the row.

  • Default: false

  • Example: Sort Stable

rememberOrder

  • Attribute: data-remember-order

  • Type: Boolean

  • Detail:

    Set true to remember the order for each column.

  • Default: false

  • Example: Remember Order

customSort

  • Attribute: data-custom-sort

  • Type: Function

  • Detail:

    The custom sort function is executed instead of built-in sort function, takes three parameters:

    • sortName: the sort name.
    • sortOrder: the sort order.
    • data: the rows data.

  • Default: undefined

  • Example: Custom Order

columns

  • Attribute: -

  • Type: Array

  • Detail:

    The table columns config object, see column properties for more details.

  • Default: []

  • Example: Table Columns

data

  • Attribute: -

  • Type: Array | Object

  • Detail:

    The data to be loaded.

  • Default: []

  • Example: From Data

url

  • Attribute: data-url

  • Type: String

  • Detail:

    A URL to request data from remote site.

    Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples:

  • Default: undefined

  • Example: From URL

method

  • Attribute: data-method

  • Type: String

  • Detail:

    The method type to request remote data.

  • Default: 'get'

  • Example: Table Method

cache

  • Attribute: data-cache

  • Type: Boolean

  • Detail:

    Set false to disable caching of AJAX requests.

  • Default: true

  • Example: Table Cache

contentType

  • Attribute: data-content-type

  • Type: String

  • Detail:

    The contentType of request remote data, for example: application/x-www-form-urlencoded.

  • Default: 'application/json'

  • Example: Content Type

dataType

  • Attribute: data-data-type

  • Type: String

  • Detail:

    The type of data that you are expecting back from the server.

  • Default: 'json'

  • Example: Data Type

ajax

  • Attribute: data-ajax

  • Type: Function

  • Detail:

    A method to replace ajax call. Should implement the same API as jQuery ajax method.

  • Default: undefined

  • Example: Table AJAX

ajaxOptions

  • Attribute: data-ajax-options

  • Type: Object

  • Detail:

    Additional options for submit ajax request. List of values: jQuery.ajax.

  • Default: {}

  • Example: AJAX Options

queryParams

  • Attribute: data-query-params

  • Type: Function

  • Detail:

    When requesting remote data, you can send additional parameters by modifying queryParams.

    If queryParamsType = 'limit', the params object contains: limit, offset, search, sort, order.

    Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder.

    Return false to stop request.

  • Default: function(params) { return params }

  • Example: Query Params

queryParamsType

  • Attribute: data-query-params-type

  • Type: String

  • Detail:

    Set 'limit' to send query params with RESTFul type.

  • Default: 'limit'

  • Example: Query Params Type

responseHandler

  • Attribute: data-response-handler

  • Type: Function

  • Detail:

    Before load remote data, handler the response data format, the parameters object contains:

    • res: the response data.

  • Default: function(res) { return res }

  • Example: Response Handler

totalField

  • Attribute: data-total-field

  • Type: String

  • Detail:

    Key in incoming json containing 'total' data.

  • Default: 'total'

  • Example: Total/Data Field

dataField

  • Attribute: data-data-field

  • Type: String

  • Detail:

    Key in incoming json containing 'rows' data list.

  • Default: 'rows'

  • Example: Total/Data Field

pagination

  • Attribute: data-pagination

  • Type: Boolean

  • Detail:

    Set true to show a pagination toolbar on table bottom.

  • Default: false

  • Example: Table Pagination

onlyInfoPagination

  • Attribute: data-only-info-pagination

  • Type: Boolean

  • Detail:

    Set true to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.

  • Default: false

  • Example: Only Info Pagination

paginationLoop

  • Attribute: data-pagination-loop

  • Type: Boolean

  • Detail:

    Set true to enable pagination continuous loop mode.

  • Default: true

  • Example: Pagination Loop

sidePagination

totalRows

  • Attribute: data-total-rows

  • Type: Number

  • Detail:

    This property is mainly passed in by pagination server, which is easy to use.

  • Default: 0

pageNumber

  • Attribute: data-page-number

  • Type: Number

  • Detail:

    When set pagination property, initialize the page number.

  • Default: 1

  • Example: Page Number

pageSize

  • Attribute: data-page-size

  • Type: Number

  • Detail:

    When set pagination property, initialize the page size.

  • Default: 10

  • Example: Page Size

pageList

  • Attribute: data-page-list

  • Type: Array

  • Detail:

    When set pagination property, initialize the page size selecting list. If you include the 'All' or 'Unlimited' option, all the records will be shown in your table.

  • Default: [10, 25, 50, 100]

  • Example: Page List

paginationHAlign

  • Attribute: data-pagination-h-align

  • Type: String

  • Detail:

    Indicate how to align the pagination. 'left', 'right' can be used.

  • Default: 'right'

  • Example: Pagination H Align

paginationVAlign

  • Attribute: data-pagination-v-align

  • Type: String

  • Detail:

    Indicate how to vertical align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom) can be used.

  • Default: 'bottom'

  • Example: Pagination V Align

paginationDetailHAlign

  • Attribute: data-pagination-detail-h-align

  • Type: String

  • Detail:

    Indicate how to align the pagination detail. 'left', 'right' can be used.

  • Default: 'left'

  • Example: Pagination H Align

paginationPreText

  • Attribute: data-pagination-pre-text

  • Type: String

  • Detail:

    Indicate the icon or text to be shown in the pagination detail, the previous button.

  • Default: '‹'

  • Example: Pagination Text

paginationNextText

  • Attribute: data-pagination-next-text

  • Type: String

  • Detail:

    Indicate the icon or text to be shown in the pagination detail, the next button.

  • Default: '›'

  • Example: Pagination Text

paginationSuccessivelySize

  • Attribute: data-pagination-successively-size

  • Type: Number

  • Detail:

    Maximum successive number of pages in a row.

  • Default: 5

  • Example: Pagination Index Number

paginationPagesBySide

  • Attribute: data-pagination-pages-by-side

  • Type: Number

  • Detail:

    The number of pages on each side (right, left) of the current page.

  • Default: 1

  • Example: Pagination Index Number

paginationUseIntermediate

  • Attribute: data-pagination-use-intermediate

  • Type: Boolean

  • Detail:

    Calculate and show intermediate pages for quick access

  • Default: false

  • Example: Pagination Index Number

  • Attribute: data-search

  • Type: Boolean

  • Detail:

    Enable the search input.

  • Default: false

  • Example: Table Search

searchOnEnterKey

  • Attribute: data-search-on-enter-key

  • Type: Boolean

  • Detail:

    The search method will be executed until the Enter key is pressed.

  • Default: false

  • Example: Search On Enter Key

strictSearch

  • Attribute: data-strict-search

  • Type: Boolean

  • Detail:

    Enable the strict search.

  • Default: false

  • Example: Strict Search

trimOnSearch

  • Attribute: data-trim-on-search

  • Type: Boolean

  • Detail:

    Set true to trim spaces in search field.

  • Default: true

  • Example: Trim On Search

searchAlign

  • Attribute: data-search-align

  • Type: String

  • Detail:

    Indicate how to align the search input. 'left', 'right' can be used.

  • Default: 'right'

  • Example: Search Align

searchTimeOut

  • Attribute: data-search-time-out

  • Type: Number

  • Detail:

    Set timeout for search fire.

  • Default: 500

  • Example: Search Time Out

searchText

  • Attribute: data-search-text

  • Type: String

  • Detail:

    When set search property, initialize the search text.

  • Default: ''

  • Example: Search Text

customSearch

  • Attribute: data-custom-search

  • Type: Function

  • Detail:

    The custom search function is executed instead of built-in search function, takes two parameters:

    • data: the table data.
    • text: the search text.

    Example usage:

  function customSearch(data, text) {
    return data.filter(function (row) {
      return row.field.indexOf(text) > -1
    })
  }

showHeader

  • Attribute: data-show-header

  • Type: Boolean

  • Detail:

    Set false to hide the table header.

  • Default: true

  • Example: Show Header

showFooter

  • Attribute: data-show-footer

  • Type: Boolean

  • Detail:

    Set true to show the summary footer row.

  • Default: false

  • Example: Show Footer

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'
    }
  }

showColumns

  • Attribute: data-show-columns

  • Type: Boolean

  • Detail:

    Set true to show the columns drop down list.

  • Default: false

  • Example: Basic Columns and Large Columns

minimumCountColumns

  • Attribute: data-minimum-count-columns

  • Type: Number

  • Detail:

    The minimum number of columns to hide from the columns drop down list.

  • Default: 1

  • Example: Minimum Count Columns

showPaginationSwitch

  • Attribute: data-show-pagination-switch

  • Type: Boolean

  • Detail:

    Set true to show the pagination switch button.

  • Default: false

  • Example: Show Pagination Switch

showRefresh

  • Attribute: data-show-refresh

  • Type: Boolean

  • Detail:

    Set true to show the refresh button.

  • Default: false

  • Example: Show Refresh

showToggle

  • Attribute: data-show-toggle

  • Type: Boolean

  • Detail:

    Set true to show the toggle button to toggle table / card view.

  • Default: false

  • Example: Show Toggle

showFullscreen

  • Attribute: data-show-fullscreen

  • Type: Boolean

  • Detail:

    Set true to show the fullscreen button.

  • Default: false

  • Example: Show Fullscreen

smartDisplay

  • Attribute: data-smart-display

  • Type: Boolean

  • Detail:

    Set true to display pagination or card view smartly.

  • Default: true

  • Example: Smart Display

escape

  • Attribute: data-escape

  • Type: Boolean

  • Detail:

    Escapes a string for insertion into HTML, replacing &, <, >, “, `, and ‘ characters.

  • Default: false

  • Example: Table Escape

idField

  • Attribute: data-id-field

  • Type: String

  • Detail:

    Indicate which field is an identity field.

  • Default: undefined

  • Example: Id Field

selectItemName

  • Attribute: data-select-item-name

  • Type: String

  • Detail:

    The name of radio or checkbox input.

  • Default: 'btSelectItem'

  • Example: Id Field

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

ignoreClickToSelectOn

  • Attribute: data-ignore-click-to-select-on

  • Type: Function

  • Detail:

    Set the ignore elements clickToSelect on. Takes one parameter:

    • element: the element clicked on.

    Return true if the click should be ignored, false if the click should cause the row to be selected. This option is only relevant if clickToSelect is true.

  • Default: { return ['A', 'BUTTON'].includes(tagName) }

  • Example: Ignore Click To Select On

singleSelect

  • Attribute: data-single-select

  • Type: Boolean

  • Detail:

    Set true to allow checkbox selecting only one row.

  • Default: false

  • Example: Single Select

checkboxHeader

  • Attribute: data-checkbox-header

  • Type: Boolean

  • Detail:

    Set false to hide check-all checkbox in header row.

  • Default: true

  • Example: Checkbox Header

maintainSelected

  • Attribute: data-maintain-selected

  • Type: Boolean

  • Detail:

    Set true to maintain selected rows on change page and search.

  • Default: false

  • Example: Maintain Selected

uniqueId

  • Attribute: data-unique-id

  • Type: String

  • Detail:

    Indicate an unique identifier for each row.

  • Default: undefined

  • Example: getRowByUniqueId

cardView

  • Attribute: data-card-view

  • Type: Boolean

  • Detail:

    Set true to show card view table, for example mobile view.

  • Default: false

  • Example: Card View

detailView

  • Attribute: data-detail-view

  • Type: Boolean

  • Detail:

    Set true to show detail view table.

  • Default: false

  • Example: Detail View

detailFormatter

  • Attribute: data-detail-formatter

  • Type: Function

  • Detail:

    Format your detail view when detailView 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.

  • Default: function(index, row, element) { return '' }

  • Example: Detail View

detailFilter

  • Attribute: data-detail-filter

  • Type: Function

  • Detail:

    Enable expansion per row when detailView is set to true. Return true and the row will be enabled for expansion, return false and expansion for the row will be disabled. Default function returns true to enable expansion for all rows.

  • Default: function(index, row) { return true }

  • Example: Detail Filter

toolbar

  • Attribute: data-toolbar

  • Type: String/Node

  • Detail:

    A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.

  • Default: undefined

  • Example: Custom Toolbar

toolbarAlign

  • Attribute: data-toolbar-align

  • Type: String

  • Detail:

    Indicate how to align the custom toolbar. 'left', 'right' can be used.

  • Default: 'left'

  • Example: Toolbar Align

buttonsToolbar

  • Attribute: data-buttons-toolbar

  • Type: String/Node

  • Detail:

    A jQuery selector that indicates the custom buttons toolbar, for example: #buttons-toolbar, .buttons-toolbar, or a DOM node.

  • Default: undefined

  • Example: Buttons Toolbar

buttonsAlign

  • Attribute: data-buttons-align

  • Type: String

  • Detail:

    Indicate how to align the toolbar buttons. 'left', 'right' can be used.

  • Default: 'right'

  • Example: Buttons Align

buttonsClass

  • Attribute: data-buttons-class

  • Type: String

  • Detail:

    Defines the class (added after 'btn-') of table buttons.

  • Default: 'secondary'

  • Example: Buttons Class

icons

  • Attribute: data-icons

  • Type: Object

  • Detail:

    Defines icons used in the toolbar, pagination, and details view.

  • Default:

  {
    paginationSwitchDown: 'fa-caret-square-down',
    paginationSwitchUp: 'fa-caret-square-up',
    refresh: 'fa-sync',
    toggleOff: 'fa-toggle-off',
    toggleOn: 'fa-toggle-on',
    columns: 'fa-th-list',
    fullscreen: 'fa-arrows-alt',
    detailOpen: 'fa-plus',
    detailClose: 'fa-minus'
  }

iconSize

  • Attribute: data-icon-size

  • Type: String

  • Detail:

    Defines icon size, undefined, 'lg', 'sm' can be used.

  • Default: undefined

  • Example: Icon Size

iconsPrefix

  • Attribute: data-icons-prefix

  • Type: String

  • Detail:

    Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'fa' is used for Bootstrap v4.

  • Default: 'fa'

  • Example: Icons Prefix