### Install Bootstrap Table with npm

Source: https://bootstrap-table.com/docs/getting-started/download

Install and manage Bootstrap Table's CSS, JavaScript, locales, and extensions using npm.

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

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

### Start local documentation development server

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Navigate to the `/site` directory and run this command to start the local development server for the documentation site. Access it at `http://localhost:4321`.

```bash
npm run dev
```

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

### Install local dependencies

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Run this command in the root `/bootstrap-table` directory to install local dependencies defined in package.json.

```bash
npm install
```

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

### Vue.js Usage Example

Source: https://bootstrap-table.com/docs/vuejs/browser

This example demonstrates how to set up a Vue application to use the Bootstrap Table component, including defining columns, data, and options.

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

```javascript
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')

```

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

### Install Bootstrap Table with Yarn

Source: https://bootstrap-table.com/docs/getting-started/download

Install and manage Bootstrap Table's CSS, JavaScript, locales, and extensions using Yarn.

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

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

### Detail Formatter Example

Source: https://bootstrap-table.com/docs/api/column-options

Provides an example of a `detailFormatter` function, which formats the content for a detail view when `detailView` is enabled. It can return a string or directly render into the detail view cell.

```javascript
{
  detailFormatter: function(index, row, $element) { return '' }
}
```

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

### Reorder Columns Method Example

Source: https://bootstrap-table.com/docs/extensions/reorder-columns

Use the `orderColumns` method to programmatically reorder columns. Pass an object where keys are field names and values are the desired column indices (starting from 0).

```javascript
{"name": 0, "price": 1}
```

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

### Starter Template: Table Plugin Setup

Source: https://bootstrap-table.com/docs/vuejs/webpack

Set up the Bootstrap Table Vue component and its dependencies, including CSS and JavaScript, within a Vue project's plugin file.

```javascript
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'

import './jquery.js'
import Vue from 'vue'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

Vue.component('BootstrapTable', BootstrapTable)
```

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

### Component Usage

Source: https://bootstrap-table.com/docs/vuejs/component

Example of how to integrate the BootstrapTable component into your Vue application, including binding data and handling events.

```APIDOC
## Component Usage Example

```html
<BootstrapTable
  ref="table"
  :columns="columns"
  :data="data"
  :options="options"
  @on-post-body="onPostBody"
/>
```

**Note:** When using `v-if`, it is recommended to wrap `BootstrapTable` with a `div` to avoid unnecessary errors.
```

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

### Get Table Options

Source: https://bootstrap-table.com/docs/api/methods

Returns the current configuration options object of the Bootstrap Table instance.

```javascript
$('#table').bootstrapTable('getOptions')
```

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

### Treegrid Data Structure Example

Source: https://bootstrap-table.com/docs/extensions/treegrid

Example of a flat data structure with parent-child relationships defined by 'id' and 'pid' fields, suitable for the treegrid extension.

```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
  }
]
```

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

### Pipeline Cache Window Calculation Example

Source: https://bootstrap-table.com/docs/extensions/pipeline

Illustrates the structure of cache windows computed based on pipeline size and total rows. This is a conceptual representation of how data is segmented for caching.

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

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

### Rowspan and Colspan Example

Source: https://bootstrap-table.com/docs/api/column-options

Defines how many columns a cell should span using the `colspan` option.

```javascript
{
  colspan: 2
}
```

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

### Footer Data Structure Example

Source: https://bootstrap-table.com/docs/api

Illustrates the structure for defining footer data, including colspan and values, when pagination is enabled and data is server-side.

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

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

### Column Checkbox Example

Source: https://bootstrap-table.com/docs/api/column-options

Shows how to enable a checkbox in a column. If a value is provided, the checkbox is automatically checked. This column has a fixed width.

```javascript
{
  field: 'state',
  checkbox: true
}
```

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

### onCheckAll Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when all rows are checked or unchecked. It receives arrays of rows before and after the action.

```javascript
check-all.bs.table: function (rowsAfter, rowsBefore)
```

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

### onColumnSwitchAll Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when all columns' visibility is toggled. Provides the new checked state for all columns.

```javascript
column-switch-all.bs.table: function (checked)
```

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

### method

Source: https://bootstrap-table.com/docs/api

Specifies the HTTP method used for requesting remote data. Defaults to 'get'.

```APIDOC
## method

### Description
The method type to request remote data.

### Attribute
`data-method`

### Type
`String`

### Default
`'get'`
```

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

### onAll Event Example

Source: https://bootstrap-table.com/docs/api/events

The 'onAll' event fires for any event triggered in Bootstrap Table. It provides the event name and its arguments.

```javascript
all.bs.table: function (name, args)
```

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

### Set Table Method

Source: https://bootstrap-table.com/docs/api/table-options

Specify the HTTP method used for fetching remote data. Defaults to 'get'.

```javascript
data-method="post"
```

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

### Column Events Example

Source: https://bootstrap-table.com/docs/api/column-options

Demonstrates how to attach event listeners to cells within a column. The `events` option takes an object where keys are event names and values are handler functions.

```html
<th .. data-events="operateEvent">

```

```javascript
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}
```

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

### Basic Bootstrap Table Vue Usage

Source: https://bootstrap-table.com/docs/vuejs/webpack

Example of using the BootstrapTable component in a Vue.js template with defined columns, data, and options.

```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>
```

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

### onColumnSwitch Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a column's visibility is toggled. Provides the column's field name and its new checked state.

```javascript
column-switch.bs.table: function (field, checked)
```

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

### Include Bootstrap Table via CDNJS

Source: https://bootstrap-table.com/docs/getting-started/download

Use these links to include the latest compiled CSS and JavaScript files for Bootstrap Table from CDNJS. Also includes an example for a locale file.

```html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
```

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

### Data with Cell Merging Example

Source: https://bootstrap-table.com/docs/api

Load data with properties like `_name_rowspan` or `_name_colspan` to enable automatic cell merging. Ensure the `data` attribute is used when this feature is enabled.

```javascript
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```

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

### Get Scroll Position

Source: https://bootstrap-table.com/docs/api/methods

Gets the current scroll position of the table in pixels. No parameters are needed.

```javascript
$('#table').bootstrapTable('getScrollPosition')
```

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

### onExpandRow Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a row's detail view is expanded. Provides the row's index, data, and the DOM element for the detail view.

```javascript
expand-row.bs.table: function (index, row, $detail)
```

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

### Starter Template: Main Entry Point

Source: https://bootstrap-table.com/docs/vuejs/webpack

Import the table plugin into the main JavaScript file to make Bootstrap Table available throughout the Vue application.

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

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

### Starter Template for Bootstrap Table

Source: https://bootstrap-table.com/docs/getting-started/introduction

A complete HTML template demonstrating how to set up a page with Bootstrap Table, including necessary meta tags, Bootstrap CSS, Bootstrap Icons, and Bootstrap Table's CSS and JavaScript.

```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">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.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>$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@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.js"></script>
  </body>
</html>
```

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

### Handle Row Drag Start with onReorderRowsDrag

Source: https://bootstrap-table.com/docs/extensions/reorder-rows

The `onReorderRowsDrag` function is executed when a user begins dragging a row. It receives the row element that was started to be dragged.

```javascript
data-on-reorder-rows-drag="function(row) { ... }"
```

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

### Basic Table Initialization with Column Definition

Source: https://bootstrap-table.com/docs/api/column-options

Demonstrates how to initialize Bootstrap Table with a basic column configuration, including field, title, and alignment.

```javascript
$"#table".bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      align: 'center'
    }
  ]
})
```

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

### Starter Template: View Component

Source: https://bootstrap-table.com/docs/vuejs/webpack

A Vue component demonstrating the usage of the BootstrapTable with sample columns, data, and options, as part of 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>
```

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

### Initialize Table via JavaScript

Source: https://bootstrap-table.com/docs/getting-started/usage

Create an empty table element and initialize Bootstrap Table using JavaScript, defining columns and inline data.

```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'
    }
  ]
})
```

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

### Get Loaded Table Data

Source: https://bootstrap-table.com/docs/api/methods

Retrieves the data currently loaded in the table. Options allow filtering by current page, including hidden rows, or getting unfiltered data.

```javascript
$('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true, unfiltered: false, formatted: true })
```

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

### Starter Template: jQuery Plugin

Source: https://bootstrap-table.com/docs/vuejs/webpack

Configure jQuery for use within the starter template by importing it and assigning it to the window object.

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

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

### getScrollPosition

Source: https://bootstrap-table.com/docs/api/methods

Gets the current scroll position of the table in pixels.

```APIDOC
## getScrollPosition

### Description
Get the current scroll position. The unit is `'px'`.

### Parameters
#### Path Parameters
- **undefined** - N/A

### Example
Get Scroll Position
```

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

### Get Footer Data

Source: https://bootstrap-table.com/docs/api/methods

Retrieves the data from the table's footer.

```javascript
$('#table').bootstrapTable('getFooterData')
```

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

### Vue.js Bootstrap Table Starter Template

Source: https://bootstrap-table.com/docs/vuejs/browser

This HTML template includes all necessary CDN links for Bootstrap, Bootstrap Icons, Bootstrap Table, and Vue.js. It demonstrates how to initialize a Vue app, define table columns, data, and options, and mount the Bootstrap Table Vue component.

```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">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.css">
  </head>
  <body>
    <div id="app">
      <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table-vue.umd.js"></script>
    <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>
  </body>
</html>
```

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

### Get Hidden Columns

Source: https://bootstrap-table.com/docs/api/methods

Retrieves an array of column identifiers that are currently hidden.

```javascript
$('#table').bootstrapTable('getHiddenColumns')
```

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

### View all npm scripts

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Lists all available npm scripts defined in the package.json file.

```bash
npm run
```

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

### Get Hidden Rows

Source: https://bootstrap-table.com/docs/api/methods

Retrieves all hidden rows. If `show` is true, it also makes them visible.

```javascript
$('#table').bootstrapTable('getHiddenRows', true)
```

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

### Build compiled files

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Executes the build process to create the `/dist` directory containing compiled files.

```bash
npm run build
```

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

### Run test suite

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Executes the project's test suite to ensure code quality and functionality.

```bash
npm run test
```

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

### Usage and Configuration

Source: https://bootstrap-table.com/docs/extensions/reorder-rows

Include the necessary CSS and JavaScript files for the Reorder Rows extension and configure table options.

```APIDOC
## Usage
```html
<link rel="stylesheet" href="extensions/reorder-rows/bootstrap-table-reorder-rows.css">
<script src=".../jquery.tablednd.js"></script>
<script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
```

## Options
### reorderableRows
  * **attribute:** `data-reorderable-rows`
  * **type:** `Boolean`
  * **Detail:**
Set true to allow the reorder feature.
  * **Default:** `false`

### onAllowDrop
  * **attribute:** `data-on-allow-drop`
  * **type:** `function`
  * **Detail:**
Pass a function that will be called as a row over another row. If the function returns true, allow dropping on that row, otherwise not. The function takes 4 parameters:
    * the dragged-row data
    * the data of the row under the cursor
    * the dragged row
    * the row under the cursor
It returns a boolean: true allows the drop, false doesn’t allow it.
  * **Default:** `null`

### onDragStop
  * **attribute:** `data-on-drag-stop`
  * **type:** `function`
  * **Detail:**
Pass a function that will be called when the user stops dragging regardless of if the rows have been rearranged. The function takes 3 parameters: the table, the row data and the row which the user was dragging.
  * **Default:** `null`

### onDragStyle
  * **attribute:** `data-on-drag-style`
  * **type:** `String`
  * **Detail:**
This is the style that is assigned to the row during drag. There are limitations to the styles that can be associated with a row (such as you can’t assign a border well you can, but it won’t be displayed).
  * **Default:** `null`

### onDragClass
  * **attribute:** `data-on-drag-class`
  * **type:** `String`
  * **Detail:**
This class is added for the duration of the drag and then removed when the row is dropped. It is more flexible than using onDragStyle since it can be inherited by the row cells and other content.
  * **Default:** `reorder-rows-on-drag-class`

### onDropStyle
  * **attribute:** `data-on-drop-style`
  * **type:** `String`
  * **Detail:**
This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations to what you can do. Also, this replaces the original style, so again consider using onDragClass which is simply added and then removed on drop.
  * **Default:** `null`

### onReorderRowsDrag
  * **attribute:** `data-on-reorder-rows-drag`
  * **type:** `Function`
  * **Detail:**
Pass a function that will be called when the user starts dragging. The function takes 1 parameter: the row which the user has started to drag.
  * **Default:** `empty function`

### onReorderRowsDrop
  * **attribute:** `data-on-reorder-rows-drop`
  * **type:** `Function`
  * **Detail:**
Pass a function that will be called when the row is dropped. The function takes 1 parameter: the row that was dropped.
  * **Default:** `empty function`

### dragHandle
  * **attribute:** `data-drag-handle`
  * **type:** `String`
  * **Detail:**
This is the cursor element.
**Note: This option is mainly used to adapt to the`TableDnD` plugin. Under no special circumstances, please do not modify the default value.**
  * **Default:** `>tbody>tr>td:not(.bs-checkbox)`

### useRowAttrFunc
  * **attribute:** `data-use-row-attr-func`
  * **type:** `Boolean`
  * **Detail:**
This function must be used if your `tr` elements won’t have the `id` attribute. If your `tr` elements don’t have the `id` attribute this plugin doesn’t fire the onDrop event.
  * **Default:** `false`
```

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

### Set Request Method

Source: https://bootstrap-table.com/docs/api

Specify the HTTP method used for fetching remote data. Defaults to 'get'.

```javascript
data-method='post'
```

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

### Remote Data via JavaScript

Source: https://bootstrap-table.com/docs/getting-started/usage

Initialize Bootstrap Table using JavaScript and specify a remote URL for data using the `url` option.

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

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

### Initialize Bootstrap Table with Options

Source: https://bootstrap-table.com/docs/api

Use this snippet to initialize Bootstrap Table with custom options via JavaScript. Ensure jQuery and Bootstrap Table are included before this code.

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

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

### onCheckSome Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a subset of rows are checked. It provides an array of the newly checked rows.

```javascript
check-some.bs.table: function (rows)
```

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

### getOptions

Source: https://bootstrap-table.com/docs/api/methods

Returns the current configuration options object of the Bootstrap Table instance. This is useful for inspecting or dynamically modifying table settings.

```APIDOC
## getOptions

### Description
Returns the options object.

### Method
`getOptions()`

### Example
```javascript
let options = $('#table').bootstrapTable('getOptions');
```
```

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

### Initialize Bootstrap Table with Treegrid

Source: https://bootstrap-table.com/docs/extensions/treegrid

Basic initialization of Bootstrap Table with treegrid options, setting up the data source and column definitions. The treegrid is applied via the 'onPostBody' event.

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

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

### Get Visible/Hidden Columns

Source: https://bootstrap-table.com/docs/api/methods

Retrieves information about the currently visible and hidden columns in the table. This method does not take any parameters.

```javascript
$('#table').bootstrapTable('getVisibleColumns')
```

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

### Import Themes, Locales, and Extensions

Source: https://bootstrap-table.com/docs/vuejs/webpack

Import specific themes, locales, or extensions for Bootstrap Table by adding their respective paths.

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

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

### Checkbox Enabled/Disabled Example

Source: https://bootstrap-table.com/docs/api/column-options

Illustrates how to disable checkboxes or radio boxes within a table using the `checkboxEnabled` option.

```javascript
{
  checkboxEnabled: false
}
```

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

### Configure Page List Options

Source: https://bootstrap-table.com/docs/api

Define the available options for the page size selector in the pagination toolbar. Includes options like 'all' or 'unlimited' to show all records.

```javascript
data-page-list='[10, 25, 50, "all"]'
```

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

### onCheck Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a row is checked. Provides the row data and the DOM element of the checked checkbox.

```javascript
check.bs.table: function (row, $element)
```

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

### showLoading

Source: https://bootstrap-table.com/docs/api/methods

Displays the loading status indicator on the table.

```APIDOC
## showLoading

### Description
Displays the loading status indicator on the table.

### Parameters
- None

### Example
```javascript
$("#table").bootstrapTable('showLoading');
```
```

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

### onVirtualScroll

Source: https://bootstrap-table.com/docs/api/events

Fires when the user scrolls the virtual scroll. It provides the start and end row indices of the visible scroll area.

```APIDOC
## onVirtualScroll

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

### 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.
```

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

### Initialize Treegrid with All Rows Collapsed

Source: https://bootstrap-table.com/docs/extensions/treegrid

Configure the treegrid extension to display all rows in a collapsed state upon initial load. This is set using the 'initialState' option within the treegrid configuration.

```javascript
$('#table').bootstrapTable({
  // ... options
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      initialState: 'collapsed',
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})
```

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

### Component Methods

Source: https://bootstrap-table.com/docs/vuejs/component

Lists the methods available on the BootstrapTable component instance that can be called programmatically.

```APIDOC
## Methods

The calling method syntax: `this.$refs.table.methodName(parameter)`.
Example: `this.$refs.table.getOptions()`.
All methods are defined in Methods API.
```

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

### Set Request Content Type

Source: https://bootstrap-table.com/docs/api/table-options

Specify the `data-content-type` for AJAX requests. For example, use `'application/x-www-form-urlencoded'` if the server expects form data.

```html
<table data-toggle="table" data-content-type="application/x-www-form-urlencoded"></table>
```

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

### Lint CSS and JavaScript

Source: https://bootstrap-table.com/docs/getting-started/build-tools

Runs a linter on the CSS and JavaScript files located in the `/src` directory.

```bash
npm run lint
```

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

### Include Group By v2 Extension CSS and JS

Source: https://bootstrap-table.com/docs/extensions/group-by-v2

Include these files to enable the Group By v2 extension. Ensure the paths are correct relative to your project structure.

```html
<link rel="stylesheet" href="extensions/group-by-v2/bootstrap-table-group-by.css">
<script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script>
```

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

### onDblClickRow Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a table row is double-clicked. Provides the row data, the TR element, and the double-clicked cell's field.

```javascript
dbl-click-row.bs.table: function (row, $element, field)
```

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

### formatColumnsToggleAll

Source: https://bootstrap-table.com/docs/api/localizations

Customizes the text for 'Toggle all'.

```APIDOC
## formatColumnsToggleAll

### Description
Customizes the text displayed for the 'Toggle all' option in the columns dropdown.

### Parameters
* `undefined` - This parameter is not used.

### Default
`'Toggle all'`
```

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

### onDblClickCell Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a table cell is double-clicked. Provides the cell's field, value, row data, and the TD element.

```javascript
dbl-click-cell.bs.table: function (field, value, row, $element)
```

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

### Icons Prefix Mapping

Source: https://bootstrap-table.com/docs/api

Provides a mapping of framework names to their corresponding icon class prefixes, used for consistent icon display.

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

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

### onClickRow Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a table row is clicked. Provides the row data, the TR element, and the clicked cell's field.

```javascript
click-row.bs.table: function (row, $element, field)
```

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

### formatToggleOn

Source: https://bootstrap-table.com/docs/api/localizations

Customizes the text for turning on card view.

```APIDOC
## formatToggleOn

### Description
Customizes the text displayed when toggling on the card view.

### Parameters
* `undefined` - This parameter is not used.

### Default
`'Show card view'`
```

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

### onClickCell Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a table cell is clicked. Provides the cell's field, value, row data, and the TD element.

```javascript
click-cell.bs.table: function (field, value, row, $element)
```

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

### Pagination Load More

Source: https://bootstrap-table.com/docs/api/table-options

Enables loading more data through pagination, primarily for client-side pagination and scenarios with an unknown total number of pages. Defaults to `false`.

```APIDOC
## paginationLoadMore

### Description
Set `true` to enable loading more data through pagination. It is only used in the client-side pagination. In general, to implement the “load more” functionality, it is often necessary to combine it with a `responseHandler` to process the returned data. It is primarily used in scenarios where the total number of pages is unknown. In such cases, it is not possible to display the exact total count or calculate the total number of pages. Instead, a display format such as “100+” can be utilized to indicate the presence of additional items beyond the displayed count. As the user navigates to the last page, more data is loaded, along with an update to the pagination information. This process continues until all data loading is complete.

### Attribute
`data-pagination-load-more`

### Type
`Boolean`

### Default
`false`
```

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

### Get Row By Unique Id

Source: https://bootstrap-table.com/docs/api/methods

Retrieves a row from the table based on its unique identifier. Ensure the 'uniqueId' option is configured for this method to work correctly.

```javascript
$('#table').bootstrapTable('getRowByUniqueId', 1)
```

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

### Initialize Treegrid with All Rows Expanded

Source: https://bootstrap-table.com/docs/extensions/treegrid

Configure the treegrid extension to display all rows in an expanded state upon initial load. This is set using the 'initialState' option within the treegrid configuration.

```javascript
$('#table').bootstrapTable({
  // ... options
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      initialState: 'expanded',
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})
```

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

### onCollapseRow Event Example

Source: https://bootstrap-table.com/docs/api/events

Fires when a row's detail view is collapsed. Provides the row's index, data, and detail view information.

```javascript
collapse-row.bs.table: function (index, row, detailView)
```

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

### formatFullscreen

Source: https://bootstrap-table.com/docs/api/localizations

Customizes the text for the 'Fullscreen' button.

```APIDOC
## formatFullscreen

### Description
Customizes the text displayed for the 'Fullscreen' button.

### Parameters
* `undefined` - This parameter is not used.

### Default
`'Fullscreen'`
```

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

### Detail Formatter Function Example

Source: https://bootstrap-table.com/docs/api

Format the content of the detail view when `detailView` is enabled. This function can return a string or directly manipulate the provided jQuery element.

```javascript
function(index, row, element) { return '' }
```

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

### Custom Search Function Example

Source: https://bootstrap-table.com/docs/api

Implement a custom search function to override the built-in search. It receives table data, search text, and a filter object.

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

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

### Precompiled Bootstrap Table Structure

Source: https://bootstrap-table.com/docs/getting-started/contents

This tree displays the contents of the precompiled distribution folder, including CSS, JS, locales, and extensions.

```bash
bootstrap-table/
└── dist/
    ├── extensions/
    ├── locale/
    ├── themes/
    ├── bootstrap-table-locale-all.js
    ├── bootstrap-table-locale-all.min.js
    ├── bootstrap-table.css
    ├── bootstrap-table.min.css
    ├── bootstrap-table.js
    └── bootstrap-table.min.js
```

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

### Set Initial Page Size

Source: https://bootstrap-table.com/docs/api

Initialize the table to display a specific number of rows per page when pagination is enabled.

```javascript
data-page-size='25'
```

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

### Detail Filter Function Example

Source: https://bootstrap-table.com/docs/api

Control row expansion in detail view mode using a `detailFilter` function. Return `true` to enable expansion for a row, `false` to disable it.

```javascript
function(index, row) { return true }
```

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

### onAll

Source: https://bootstrap-table.com/docs/api/events

Fires when any event triggers. Provides the event name and its data.

```APIDOC
## onAll

### Description
It fires when any event triggers. The parameters contain:
    * `name`: the event name,
    * `args`: the event data.

### jQuery Event
`all.bs.table`

### Parameters
- **name** (string) - The name of the event that triggered.
- **args** (any) - The data associated with the event.
```

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

### Include Dependencies for Reorder Columns

Source: https://bootstrap-table.com/docs/extensions/reorder-columns

Include these script and CSS files to enable the Reorder Columns extension. Ensure dragTable v2.0.14 and jquery-ui are included.

```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>
```

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

### prevPage

Source: https://bootstrap-table.com/docs/api/methods

Navigates the table to the previous page of data.

```APIDOC
## prevPage

### Description
Go to the previous page.

### Parameters
#### Path Parameters
- **undefined** - N/A

### Example
Select/Prev/Next Page
```

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

### showFullscreen

Source: https://bootstrap-table.com/docs/api

Adds a button to the table interface that allows users to view the table in fullscreen mode.

```APIDOC
## showFullscreen

### Description
Set `data-show-fullscreen` to `true` to display a button that enables users to view the table in fullscreen mode.

### Attribute
`data-show-fullscreen`

### Type
`Boolean`

### Default
`false`
```

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

### showColumnsToggleAll

Source: https://bootstrap-table.com/docs/api

Includes a 'Toggle All' checkbox in the column selection dropdown, allowing users to show or hide all columns with a single click.

```APIDOC
## showColumnsToggleAll

### Description
Set `data-show-columns-toggle-all` to `true` to add a 'Toggle All' checkbox to the columns dropdown, enabling users to select or deselect all columns at once.

### Attribute
`data-show-columns-toggle-all`

### Type
`Boolean`

### Default
`false`
```

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

### Get Selections

Source: https://bootstrap-table.com/docs/api/methods

Returns an array of the currently selected rows. An empty array is returned if no rows are selected. Selections may be reset by actions like searching or page changes; use 'maintainMetaData' to preserve them.

```javascript
$('#table').bootstrapTable('getSelections')
```

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

### Bootstrap Table CDN Link

Source: https://bootstrap-table.com/docs/vuejs/introduction

Include Bootstrap table’s CSS and JavaScript directly in your project using the provided CDNJS links. This is useful for quick setup or projects not using a package manager.

```html
https://cdn.jsdelivr.net/npm/bootstrap-table@1.2.3
```

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

### Import Theme and Extension CSS

Source: https://bootstrap-table.com/docs/vuejs/webpack

Import specific CSS files for themes or extensions to customize Bootstrap Table's appearance.

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

// import extension
import 'bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css'
```

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

### Include Defer URL Extension

Source: https://bootstrap-table.com/docs/extensions/defer-url

Include the Defer URL extension JavaScript file to enable its functionality.

```html
<script src="extensions/defer-url/bootstrap-table-defer-url.js"></script>
```

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

### Table with Pagination and Search via JavaScript

Source: https://bootstrap-table.com/docs/getting-started/usage

Configure Bootstrap Table with pagination and search enabled programmatically using JavaScript options.

```javascript
$('#table').bootstrapTable({
  url: 'data1.json',
  pagination: true,
  search: true,
  columns: [
    {
      field: 'id',
      title: 'Item ID',
      sortable: true
    },
    {
      field: 'name',
      title: 'Item Name'
    },
    {
      field: 'price',
      title: 'Item Price'
    }
  ]
})
```

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

### Import Bootstrap Table CSS

Source: https://bootstrap-table.com/docs/vuejs/webpack

Import the main Bootstrap Table CSS file into your app's entry point.

```javascript
import 'bootstrap-table/dist/bootstrap-table.min.css'
```

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

### Include Page Jump To Extension

Source: https://bootstrap-table.com/docs/extensions/page-jump-to

Include the CSS and JavaScript files for the Page Jump To extension in your HTML. This is required before initializing the Bootstrap Table.

```html
<link rel="stylesheet" href="extensions/page-jump-to/bootstrap-table-jump-to.css"></style>
<script src="extensions/page-jump-to/bootstrap-table-jump-to.js"></script>
```

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

### Basic Table via Data Attributes

Source: https://bootstrap-table.com/docs/getting-started/usage

Use the `data-toggle="table"` attribute on a standard HTML table to initialize Bootstrap Table with inline data.

```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>
```

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

### falign

Source: https://bootstrap-table.com/docs/api/column-options

Indicates how to align the table footer. Accepts 'left', 'right', or 'center'.

```APIDOC
## falign

### Description
Indicate how to align the table footer. `'left'`, `'right'`, `'center'` can be used.

### Attribute
`data-falign`

### Type
`String`

### Default
`undefined`
```

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

### loadingTemplate

Source: https://bootstrap-table.com/docs/api/table-options

Allows for custom rendering of the loading indicator. You can provide a function that returns custom HTML for the loading state. The function receives an object containing the `loadingMessage` formatted by the `formatLoadingMessage` locale.

```APIDOC
## loadingTemplate

### Description
To custom the loading type by yourself. The parameters object contain: `loadingMessage`: the `formatLoadingMessage` locale.

### Attribute
`data-loading-template`

### Type
`Function`

### Default
```javascript
function (loadingMessage) {
  return '<span class="loading-wrap">' +
    '<span class="loading-text">' +
    loadingMessage + 
    '</span>' +
    '<span class="animation-wrap"><span class="animation-dot"></span></span>' +
    '</span>'
}
```
```

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

### Pagination Parts Configuration

Source: https://bootstrap-table.com/docs/api/table-options

Defines which components of the pagination control are visible, such as page info, page size selector, and page list. Defaults to `['pageInfo', 'pageSize', 'pageList']`.

```APIDOC
## paginationParts

### Description
These options define which parts of the pagination should be visible.
* `pageInfo` Shows which dataset will be displayed on the current page (e.g. `Showing 1 to 10 of 54 rows`).
* `pageInfoShort` Similar to `pageInfo`, it only displays how many rows the table has (e.g. `Showing 54 rows`).
* `pageSize` Shows the dropdown which defines how many rows should be displayed on the page.
* `pageList` Shows the main part of the pagination (The list of the pages).

### Attribute
`data-pagination-parts`

### Type
`Array`

### Default
`['pageInfo', 'pageSize', 'pageList']`
```

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

### Enable Table Pagination

Source: https://bootstrap-table.com/docs/api/table-options

Show the pagination controls at the bottom of the table.

```javascript
data-pagination="true"
```

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

### height

Source: https://bootstrap-table.com/docs/api

Sets the table height and enables a fixed header.

```APIDOC
## height

### Description
The height of the table, enables a fixed header of the table.

### Attribute
`data-height`

### Type
`Number`

### Default
`undefined`
```

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

### searchText

Source: https://bootstrap-table.com/docs/api

Initialize the search input with a predefined query using the `data-search-text` attribute.

```APIDOC
## searchText

### Description
When setting search property, initialize the search text.

### Attribute
`data-search-text`

### Type
`String`

### Default
`''`
```

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

### columns

Source: https://bootstrap-table.com/docs/api

Configuration object for defining the table columns, including properties for each column.

```APIDOC
## columns

### Description
The table columns config object. See column properties for more details.

### Attribute
`-`

### Type
`Array`

### Default
`[]`
```

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

### load

Source: https://bootstrap-table.com/docs/api/methods

Loads new data into the table, replacing all existing rows.

```APIDOC
## load

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

### Parameters
#### Path Parameters
- **data** (array) - Required - The data to load into the table.

### Example
Load
```