Bootstrap Table

https://github.com/wenzhixin/bootstrap-table
Admin
Bootstrap Table is an extended, feature-rich table plugin for Twitter Bootstrap and other CSS...
Tokens:76,664
Snippets:860
Trust Score:9.9
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Local Development Setup

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/README.md

Commands to clone the repository and start a local HTTP server for development.

```bash
mkdir bootstrap-table-dev
cd bootstrap-table-dev
git clone https://github.com/wenzhixin/bootstrap-table
git clone https://github.com/wenzhixin/bootstrap-table-examples

yarn add http-server
npx http-server
```

--------------------------------

### Quick Start: Initialize Treegrid

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/treegrid.mdx

Basic setup to enable the treegrid on a table. Configure idField, parentIdField, and treeShowField, then call treegrid in onPostBody.

```javascript
$('#table').bootstrapTable({
  url: 'data.json',
  idField: 'id',
  parentIdField: 'pid',
  treeShowField: 'name',
  columns: [
    { field: 'name', title: 'Item Name' }
  ],
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})
```

--------------------------------

### Install with npm

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/README.md

Install bootstrap-table using npm package manager.

```bash
npm install bootstrap-table
```

--------------------------------

### Install dependencies with Yarn

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/tools/README.md

Installs the project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### View.vue

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/webpack.mdx

View.vue example from the starter template.

```vue
<template>
  <BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: 'Item ID',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Item Name'
        }, {
          field: 'price',
          title: 'Item Price'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Item 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Item 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Item 5',
          price: '$5'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>
```

--------------------------------

### Install with Yarn

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/README.md

Install bootstrap-table using Yarn package manager.

```bash
yarn add bootstrap-table
```

--------------------------------

### Build with npm

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/README.md

Install dependencies and build the project using npm.

```bash
npm install
npm run build
```

--------------------------------

### Configured custom button example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/table-options.mdx

Example of a fully configured custom button using the buttons option, including text, icon, event, and attributes.

```javascript
{
  btnRemoveEvenRows: {
    'text': 'Remove even Rows',
    'icon': 'fa-trash',
    'event': () => {
      //DO STUFF TO REMOVE EVEN ROWS
    },
    'attributes': {
      'title': 'Remove all rows which has a even id'
    }
  }
}
```

--------------------------------

### Build with Yarn

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/README.md

Install dependencies and build the project using Yarn.

```bash
yarn install
yarn build
```

--------------------------------

### Vue Component Example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/webpack.mdx

Example of using BootstrapTable component in a Vue single-file component.

```vue
<template>
  <BootstrapTable
    :columns="columns"
    :data="data"
    :options="options"
  />
</template>

<script>
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.js'

export default {
  components: {
    BootstrapTable
  },
  data () {
    return {
      columns: [
        {
          title: 'Item ID',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Item Name'
        },
        {
          field: 'price',
          title: 'Item Price'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>
```

--------------------------------

### multiSort method parameter example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/multiple-sort.mdx

Example JSON for the multiSort method's sortPriority parameter, setting multiple sort priorities.

```json
[
  {
    "sortName": "forks_count",
    "sortOrder": "desc"
  },
  {
    "sortName": "stargazers_count",
    "sortOrder": "asc"
  }
]
```

--------------------------------

### sortPriority option example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/multiple-sort.mdx

Example JSON for the sortPriority option, setting multiple sort priorities with sortName and sortOrder.

```json
[
  {
    "sortName": "forks_count",
    "sortOrder": "desc"
  },
  {
    "sortName": "stargazers_count",
    "sortOrder":"desc"
  }
]
```

--------------------------------

### Cache window calculation example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/pipeline.mdx

Shows the cache windows computed for a pipeline size of 500 and total rows 1300. The windows are based on the pipeline size and total rows returned by the server-side query.

```json
[
  {
    "lower": 0,
    "upper": 499
  },
  {
    "lower": 500,
    "upper": 999
  },
  {
    "lower": 1000,
    "upper": 1499
  }
]
```

--------------------------------

### Vue Component Usage Example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/browser.mdx

Complete example of using the Bootstrap Table Vue component with columns, data, and options defined in a Vue application.

```html
<div id="app">
  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>

<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup () {
      const columns = ref([
        {
          field: 'state',
          checkbox: true
        },
        {
          title: 'Item ID',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Item Name'
        },
        {
          field: 'price',
          title: 'Item Price'
        },
        {
          field: 'action',
          title: 'Actions',
          align: 'center',
          formatter () {
            return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
          },
          events: {
            'click .like' (e, value, row) {
              alert(JSON.stringify(row))
            }
          }
        }
      ])
      const data = ref([
        {
          id: 0,
          name: 'Item 0',
          price: '$0'
        },
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Item 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Item 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Item 5',
          price: '$5'
        }
      ])
      const options = ref({
        search: true,
        showColumns: true
      })

      return {
        columns,
        data,
        options
      }
    }
  })

  app.component('BootstrapTable', BootstrapTable)
  app.mount('#app')
</script>
```

--------------------------------

### Bootstrap Table Methods

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/methods.mdx

Documentation for the methods available in the Bootstrap Table API, including parameters and usage examples.

```APIDOC
## hideLoading

- **Parameter:** `undefined`

- **Detail:**

  Hide loading status.

- **Example:** [Show/Hide Loading](https://examples.bootstrap-table.com/#methods/show-hide-loading.html)

## hideRow

- **Parameter:** `params`

- **Detail:**

  Hide the specified row. The params must contain at least one of the following properties:

  * `index`: the row index.
  * `uniqueId`: the value of the uniqueId for that row.

- **Example:** [Show/Hide Row](https://examples.bootstrap-table.com/#methods/show-hide-row.html)

## insertRow

- **Parameter:** `params`

- **Detail:**

  Insert a new row. The params contain the following properties:

  * `index`: the row index to insert into.
  * `row`: the row data.

- **Example:** [Insert Row](https://examples.bootstrap-table.com/#methods/insert-row.html)

## load

- **Parameter:** `data`

- **Detail:**

  Load the `data` to the table. The old rows will be removed.

- **Example:** [Load](https://examples.bootstrap-table.com/#methods/load.html)

## mergeCells

- **Parameter:** `params`

- **Detail:**

  Merge some cells into one cell. The params contain the following properties:

  * `index`: the row index.
  * `field`: the field name.
  * `rowspan`: the rowspan count to be merged.
  * `colspan`: the colspan count to be merged.

- **Example:** [Merge Cells](https://examples.bootstrap-table.com/#methods/merge-cells.html)

## nextPage

- **Parameter:** `undefined`

- **Detail:**

  Go to the next page.

- **Example:** [Select/Prev/Next Page](https://examples.bootstrap-table.com/#methods/select-prev-next-page.html)
```

--------------------------------

### Column Options

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/column-options.mdx

Documentation for column options in bootstrap-table, including attributes, types, defaults, and examples.

```APIDOC
## switchableLabel

- **Attribute:** `data-switchable-label`
- **Type:** `String`
- **Detail:** The label of the switchable column in the dropdown. If not specified uses the column title.
- **Default:** `undefined`
- **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. The value of this option will also be applied to the HTML title 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 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:** `undefined`
- **Example:** [Column Width](https://examples.bootstrap-table.com/#column-options/width.html)
```

--------------------------------

### Reset pipeline cache and refresh table

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/pipeline.mdx

JavaScript example showing how to programmatically reset the pipeline cache and then refresh the table to trigger a new server request. Useful when forcing a cache reset from external code, such as with filter-control and an external input.

```javascript
// Reset the pipeline cache
$('#mytable').bootstrapTable('resetPipelineCache')
// Refresh the table to trigger a new server request
$('#mytable').bootstrapTable('refresh')
```

--------------------------------

### Starter Template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/bootstrap3.mdx

Complete starter template with HTML5 doctype, viewport meta, Bootstrap CSS/JS, and Bootstrap Table integration.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- Bootstrap Table CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
  </body>
</html>
```

--------------------------------

### main.js

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/webpack.mdx

Import the plugins/table.js file in main.js.

```javascript
import './plugins/table.js'
```

--------------------------------

### Remove method usage examples

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/methods.mdx

Examples of using the remove method with different field types: id, row index, and other fields.

```javascript
// Remove by id field
$('#table').bootstrapTable('remove', {
  field: 'id',
  values: [1, 2, 3]
})
```

```javascript
// Remove by row index (starts from 0)
$('#table').bootstrapTable('remove', {
  field: '$index',
  values: [0, 2, 4]
})
```

```javascript
// Remove by other field
$('#table').bootstrapTable('remove', {
  field: 'name',
  values: ['John', 'Jane']
})
```

--------------------------------

### Starter template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/getting-started/introduction.mdx

A complete starter template for Bootstrap Table with Bootstrap v5, including required meta tags, Bootstrap Icons, and the table markup.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Bootstrap Table CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.css">
    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap Table JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
  </body>
</html>
```

--------------------------------

### Table Options Initialization

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/table-options.mdx

Shows how to initialize Bootstrap Table with table options using JavaScript.

```APIDOC
## Table Options Initialization

### Description
Initialize Bootstrap Table with custom options using the jQuery plugin method.

### Method
JavaScript initialization

### Usage
```js
$('#table').bootstrapTable({
  ajax: yourFunction,
  cache: false,
  ...
})
```

### Options

#### -
- **Attribute:** `data-toggle`
- **Type:** `String`
- **Detail:** Activate bootstrap table without writing JavaScript.
- **Default:** `'table'`

#### ajax
- **Attribute:** `data-ajax`
- **Type:** `Function`
- **Detail:** A method to replace ajax call. Should implement the same API as jQuery ajax method.
- **Default:** `undefined`

#### ajaxOptions
- **Attribute:** `data-ajax-options`
- **Type:** `Object`
- **Detail:** Additional options for submit ajax request. List of values: [jQuery.ajax](http://api.jquery.com/jQuery.ajax).
- **Default:** `{}`

#### buttons
- **Attribute:** `data-buttons`
- **Type:** `Function`
- **Detail:** This option allows creating/adding custom button(s) to the "buttons bar" (top right of the table). These buttons can be sorted with the table option [buttonsOrder](https://bootstrap-table.com/docs/api/table-options/#buttonsorder), the used key/name for the event should be used for that! The custom button is highly configurable, the following options exists:
  - `text`
    - Description: This options is used for the [showButtonText](https://bootstrap-table.com/docs/api/table-options/#showbuttontext) table option.
    - Type: `String`
  - `icon`
    - Description: This option is used for the [showButtonIcons](https://bootstrap-table.com/docs/api/table-options/#showbuttonicons) table option.
    - Type: `String` - Only needs the icon class e.g. `fa-users`
  - `render`
    - Description: Set this option to `false` to hide the button by default, the button is visible again when you add the data attribute `data-show-button-name="true"`.
  - `attributes`
    - Description: This option allows adding additional html attributes e.g. `title`
    - Type: `Object`
    - Example: `{title: 'Button title'}`
  - `html`
    - Description: If you don't want to autogenerate the html, you can use this option to insert your custom html. The `event` option only works if you custom HTML contains `name="button-name"`. If this option is used the following options will be ignored: `text`, `icon`, `attributes`.
    - Type: `Function|String|Node`
  - `event`
    - Description: Should be used if you want to add an event to the button
    - Type: `Function|Object|String`

  The `event` option can be configured in three ways.
  One event with `click` event:
  ```javascript
  {
    'event': () => { }
  }
  ```

  One event with a self-defined event type:
  ```javascript
    {
      'event': {
        'mouseenter': () => { }
      }
    }
  ```

  Multiple events with self-defined event types:
  ```javascript
    {
      'event': {
        'click': () => { },
        'mouseenter': () => { },
        'mouseleave': () => { }
      }
    }
  ```

  **Hint:** Instead of inline functions, you also can use function names.

  A configured custom button could look like this:
  ``` javascript
  {
    btnRemoveEvenRows: {
      'text': 'Remove even Rows',
      'icon': 'fa-trash',
      'event': () => {
        //DO STUFF TO REMOVE EVEN ROWS
      },
      'attributes': {
        'title': 'Remove all rows which has a even id'
      }
    }
  }
  ```

- **Default:** `{}`
```

--------------------------------

### Treegrid Data Structure Example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/treegrid.mdx

Example of the flat data structure required by the treegrid. Each node has a unique 'id' and a 'pid' referencing its parent's id. Root nodes use 'pid' of 0.

```json
[
  {
    "id": 1,
    "name": "Root Node 1",
    "pid": 0
  },
  {
    "id": 2,
    "name": "Root Node 2",
    "pid": 0
  },
  {
    "id": 11,
    "name": "Child Node 1.1",
    "pid": 1
  },
  {
    "id": 12,
    "name": "Child Node 1.2",
    "pid": 1
  },
  {
    "id": 111,
    "name": "Grandchild Node 1.1.1",
    "pid": 11
  }
]
```

--------------------------------

### footerField server response JSON example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/table-options.mdx

Example of the server response JSON structure that includes a footer object. The footer object can define colspan and value for the footer, and is used when data-pagination is true and data-side-pagination is server.

```json
{
  "rows": [
    {
      "id": 0,
      "name": "Item 0",
      "price": "$0",
      "amount": 3
    }
  ],
  "footer": {
    "id": "footer id",
    "_id_colspan": 2,
    "name": "footer name"
  }
}
```

--------------------------------

### Customize formatAllRows

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/localizations.mdx

Example of customizing the formatAllRows localization.

```javascript
$('#table').bootstrapTable({
  formatAllRows: function() {
    return 'All rows'
  }
})
```

--------------------------------

### Starter template for Bootstrap v4

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/bootstrap4.mdx

A complete HTML5 template with required meta tags, Bootstrap CSS, Font Awesome, Bootstrap Table CSS, a table with data-toggle="table", and the necessary scripts (jQuery, Popper, Bootstrap, Bootstrap Table).

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
  </body>
</html>
```

--------------------------------

### Starter Template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/bulma.mdx

Complete starter template for Bootstrap Table with Bulma theme, including HTML5 doctype, meta tags, CSS links, table markup, and scripts.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/bulma/bootstrap-table-bulma.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>200</td>
        </tr>
      </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/bulma/bootstrap-table-bulma.min.js"></script>
  </body>
</html>
```

--------------------------------

### contentType

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/table-options.mdx

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

```APIDOC
## contentType

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

### Attribute
`data-content-type`

### Type
`String`

### Default
`'application/json'`

### Example
[Content Type](https://examples.bootstrap-table.com/#options/content-type.html)
```

--------------------------------

### plugins/jquery.js

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/webpack.mdx

Set up jQuery globally in the plugins/jquery.js file.

```javascript
import jQuery from 'jquery'
window.jQuery = jQuery
```

--------------------------------

### Bootstrap Table Foundation Starter Template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/foundation.mdx

Complete starter template for Bootstrap Table with Foundation. Includes HTML5 doctype, viewport meta tag, Foundation CSS, Font Awesome for default icons, and all required scripts. The table uses the data-toggle="table" attribute to initialize.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/foundation/bootstrap-table-foundation.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/foundation/bootstrap-table-foundation.min.js"></script>
  </body>
</html>
```

--------------------------------

### check

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/methods.mdx

Checks a row at the specified index. The row index starts at 0.

```APIDOC
## check

### Description
Check a row. The row `index` starts with 0.

### Method
check

### Parameters
- **index** - The index of the row to check, starting from 0.

### Example
```javascript
$('#table').bootstrapTable('check', index)
```
```

--------------------------------

### Bootstrap Table theme starter template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/bootstrap-table.mdx

Complete starter template for Bootstrap Table with the theme. Includes HTML5 doctype, viewport meta tag, CSS link, a basic table with data-toggle="table", and required scripts (jQuery first, then Bootstrap Table core and theme).

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/bootstrap-table/bootstrap-table.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/bootstrap-table/bootstrap-table.min.js"></script>
  </body>
</html>
```

--------------------------------

### Materialize starter template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/materialize.mdx

A complete HTML5 template for using Bootstrap Table with Materialize. It includes the required Materialize CSS, Material Icons, and Bootstrap Table theme CSS, along with the necessary scripts at the end of the body.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/materialize/bootstrap-table-materialize.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/js/materialize.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/materialize/bootstrap-table-materialize.min.js"></script>
  </body>
</html>
```

--------------------------------

### Importing Themes, Locales, and Extensions

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/vuejs/webpack.mdx

Import themes, locales, or extensions as needed.

```javascript
// import theme
import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.js'

// import locale
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

// import extension and dependencies
import 'tableexport.jquery.plugin'
import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js'
```

--------------------------------

### changeLocale method example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/i18n-enhance.mdx

Change the table locale by passing a locale ID, e.g., 'zh_TW'.

```javascript
$table.bootstrapTable('changeLocale', 'zh_TW')
```

--------------------------------

### Bootstrap Table Semantic UI starter template

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/themes/semantic.mdx

Complete HTML template for Semantic UI with Bootstrap Table. Includes required meta tags, Font Awesome icons for default icons, CSS and JS includes, and a basic table with data-toggle="table".

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/semantic/bootstrap-table-semantic.min.css">

    <title>Hello, Bootstrap Table!</title>
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@[[config:currentVersion]]/dist/themes/semantic/bootstrap-table-semantic.min.js"></script>
  </body>
</html>
```

--------------------------------

### onVirtualScroll

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/events.mdx

Fires when the user scrolls the virtual scroll. Provides the start and end row indices.

```APIDOC
## onVirtualScroll

### jQuery Event
`virtual-scroll.bs.table`

### Parameters
- **startIndex** (number) - The start row index of the virtual scroll.
- **endIndex** (number) - The end row index of the virtual scroll.

### Description
Fires when the user scrolls the virtual scroll.
```

--------------------------------

### exportOptions.fileName as a function

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/export.mdx

The exportOptions.fileName option can be a function that returns the export file name. This example returns 'exportName'.

```js
exportOptions: {
  fileName: function () {
    return 'exportName'
  }
}
```

--------------------------------

### click-row.bs.table event with event parameter

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/faq/faq.mdx

Example of using the click-row.bs.table event where the first parameter is always the event object.

```js
$('#eventsTable').on('click-row.bs.table', function (event, row, $element) {

})
```

--------------------------------

### Basic table via JavaScript

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/getting-started/usage.mdx

Initializes a Bootstrap Table on an empty table element with id="table" using JavaScript. The columns and data are defined in the options object.

```html
<table id="table"></table>
```

```javascript
$('#table').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'Item ID'
    },
    {
      field: 'name',
      title: 'Item Name'
    },
    {
      field: 'price',
      title: 'Item Price'
    }
  ],
  data: [
    {
      id: 1,
      name: 'Item 1',
      price: '$1'
    },
    {
      id: 2,
      name: 'Item 2',
      price: '$2'
    }
  ]
})
```

--------------------------------

### Table Options

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/table-options.mdx

Documentation for table options: iconsPrefix, idField, ignoreClickToSelectOn, and loadingFontSize.

```APIDOC
## iconsPrefix

- **Attribute:** `data-icons-prefix`

- **Type:** `String`

- **Detail:**

  Defines icon set name. By default, this option is automatically calculated by the theme.

  ```js
  {
    bootstrap3: 'glyphicon',
    bootstrap4: 'fa',
    bootstrap5: 'bi',
    'bootstrap-table': 'icon',
    bulma: 'fa',
    foundation: 'fa',
    materialize: 'material-icons',
    semantic: 'fa'
  }
  ```

- **Default:** `undefined`

- **Example:** [Icons Prefix](https://examples.bootstrap-table.com/#options/icons-prefix.html)

## idField

- **Attribute:** `data-id-field`

- **Type:** `String`

- **Detail:**

  Indicate which field will be used as checkbox/radio value, its the counterpart to [selectItemName](https://bootstrap-table.com/docs/api/table-options/#selectitemname).

- **Default:** `undefined`

- **Example:** [Id Field](https://examples.bootstrap-table.com/#options/id-field.html)

## 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](https://examples.bootstrap-table.com/#options/ignore-click-to-select-on.html)

## loadingFontSize

- **Attribute:** `data-loading-font-size`

- **Type:** `String`

- **Detail:**

  To define the font size of the loading text, the default value is `'auto'`, calculated automatically according to the table width, between 12px and 32px.

- **Default:** `'auto'`

- **Example:** [Loading Font Size](https://examples.bootstrap-table.com/#options/loading-font-size.html)

```

--------------------------------

### Loading from Remote API

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/treegrid.mdx

Example of loading tree data from a remote API. Uses parentIdField 'parentId' and treeShowField 'title'.

```javascript
$('#table').bootstrapTable({
  url: '/api/tree-data',
  idField: 'id',
  parentIdField: 'parentId',
  treeShowField: 'title',
  columns: [
    { field: 'title', title: 'Title' },
    { field: 'description', title: 'Description' }
  ],
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})
```

--------------------------------

### changeTitle method example

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/i18n-enhance.mdx

Change column titles by providing an object where keys are column fields and values are new titles.

```javascript
$table.bootstrapTable('changeTitle', {
  'columnA.field': 'New column A title.',
  'columnB.field': 'New column B title.'
})
```

--------------------------------

### Basic table via data attributes

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/getting-started/usage.mdx

Creates a table with static data using the data-toggle="table" attribute. The table displays columns for Item ID, Item Name, and Item Price.

```html
<table data-toggle="table">
  <thead>
    <tr>
      <th>Item ID</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Usage

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/reorder-columns.mdx

Include the required CSS and JavaScript files for the reorder columns extension.

```html
<link rel="stylesheet" href="dragtable.css">
<script src="jquery-ui.js"></script>
<script src="jquery.dragtable.js"></script>
<script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
```

--------------------------------

### onClickRow event without event parameter

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/faq/faq.mdx

Example of using the onClickRow event where the parameters are row and $element, without the event object.

```js
onClickRow: function (row, $element) {

}
```

--------------------------------

### orderColumns

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/extensions/reorder-columns.mdx

Reorders the columns by the given object. The object keys are field names and values are the new column indices (starting from 0).

```APIDOC
## orderColumns

### Description
Reorders the columns by the given object. The Object key has to be the [field](https://bootstrap-table.com/docs/api/column-options/#field) and the value is the column index (starts with 0).

### Method
orderColumns

### Parameters
- **object** (object) - Required - An object mapping field names to column indices, e.g. `{name: 0, price: 1}`.

### Example
```js
$('#table').bootstrapTable('orderColumns', {name: 0, price: 1});
```
```

--------------------------------

### Bootstrap Table Methods

Source: https://github.com/wenzhixin/bootstrap-table/blob/develop/site/src/pages/docs/api/methods.mdx

Documentation for the getData, getFooterData, getHiddenColumns, getHiddenRows, and getOptions methods.

```APIDOC
## getData

- **Parameter:** `params`

- **Detail:**

  Get the loaded data of the table at the moment that this method is called

  * `useCurrentPage`: if set to `true`, the method will return the data only on the current page.
  * `includeHiddenRows`: if set to `true`, the method will include the hidden rows.
  * `unfiltered`: if set to `true`, the method will include all data (unfiltered).
  * `formatted`: get the formatted value from the defined [formatter](https://bootstrap-table.com/docs/api/column-options/#formatter).

- **Example:** [Get Data](https://examples.bootstrap-table.com/#methods/get-data.html)

## getFooterData

- **Parameter:** `undefined`

- **Detail:**

  Get the loaded data of the footer at the moment that this method is called

- **Example:** [Get Footer Data](https://examples.bootstrap-table.com/#methods/get-footer-data.html)

## getHiddenColumns

- **Parameter:** `undefined`

- **Detail:**

  Get hidden columns.

- **Example:** [Get Visible/Hidden Columns](https://examples.bootstrap-table.com/#methods/get-visible-hidden-columns.html)

## getHiddenRows

- **Parameter:** `show`

- **Detail:**

  Get all rows hidden, and if you pass the `show` parameter `true`, the rows will be shown again. Otherwise, the method only will return the rows hidden.

- **Example:** [Get Hidden Rows](https://examples.bootstrap-table.com/#methods/get-hidden-rows.html)

## getOptions

- **Parameter:** `undefined`

- **Detail:**

  Return the options object.

- **Example:** [Get Options](https://examples.bootstrap-table.com/#methods/get-options.html)
```
Tokens:
Raw