Skip to main content

Bootstrap Table

Getting started

Documentation

Examples

Extensions

Donate

FAQ

GitHub

Español

Examples

The examples of bootstrap table.

If you like bootstrap table:

Questions/Helps:

StackOverflow

SegmentFault

Basic

Table from html: http://jsfiddle.net/wenyi/e3nk137y/11/
Start Example

Table from data: http://jsfiddle.net/wenyi/e3nk137y/13/
Start Example

Table from url: http://jsfiddle.net/wenyi/e3nk137y/14/
Start Example

Style

Classes: http://jsfiddle.net/wenyi/e3nk137y/15/
Start Example

RowStyle: http://jsfiddle.net/wenyi/e3nk137y/16/
Start Example

CellStyle: http://jsfiddle.net/wenyi/30sx4h3t/
Start Example

Align

Align: http://jsfiddle.net/wenyi/e3nk137y/17/
Start Example

Sort

Basic Sort: http://jsfiddle.net/wenyi/e3nk137y/18/
Start Example

Custom Sort: http://jsfiddle.net/e3nk137y/4248/
Start Example

#821 Sort by custom data attribute: http://jsfiddle.net/e3nk137y/1434/
Start Example

#1373, #1777 Custom sort with null/undefined value: http://jsfiddle.net/wenyi/88Lpwoy1/1/
Start Example

#1794 Set the global sortable defaults for the table: http://jsfiddle.net/fsaruk7b/7/
Start Example

#461 Html sort: http://jsfiddle.net/wenyi/e1ypfk3b/2/
Start Example

Format

Basic format: http://jsfiddle.net/wenyi/e3nk137y/21/
Start Example

Show current row count: http://jsfiddle.net/DominikAngerer/yx275pyd/2/
Start Example

Hide Header

Hide Header: http://jsfiddle.net/wenyi/e3nk137y/22/
Start Example

Columns

Basic Columns: http://jsfiddle.net/wenyi/e3nk137y/24/
Start Example

Large Columns: http://jsfiddle.net/wenyi/e3nk137y/26/
Start Example

Card View

Card View: http://jsfiddle.net/wenyi/e3nk137y/27/
Start Example

Select

Radio Select: http://jsfiddle.net/wenyi/e3nk137y/29/
Start Example

Checkbox Select: http://jsfiddle.net/wenyi/e3nk137y/30/
Start Example

Disabled Checkbox: http://jsfiddle.net/wenyi/e3nk137y/31/
Start Example

Single Checkbox: http://jsfiddle.net/wenyi/e3nk137y/32/
Start Example

#1776 Select the row without radio or checkbox: http://jsfiddle.net/wenyi/e3nk137y/3814/
Start Example

Toolbar

Basic Toolbar: http://jsfiddle.net/wenyi/e3nk137y/33/
Start Example

Custom Toolbar: http://jsfiddle.net/wenyi/e3nk137y/34/
Start Example

Group

#1919 Group headers via JavaScript: http://jsfiddle.net/e3nk137y/4320/
Start Example

#957 Transfer from rowspan / colspan table: http://jsfiddle.net/wenyi/e3nk137y/4761/
Start Example

Pagination

Client Side: http://jsfiddle.net/wenyi/e3nk137y/42/
Start Example

Server Side: http://jsfiddle.net/wenyi/4r6g4cfu/582/
Start Example

Events

Basic Events: http://jsfiddle.net/e3nk137y/2106/
Start Example

Column Events: http://jsfiddle.net/wenyi/e3nk137y/39/
Start Example

Methods

Load(client): http://jsfiddle.net/wenyi/e3nk137y/11458/
Start Example

Load(server): http://jsfiddle.net/wenyi/e3nk137y/11459/
Start Example

Reset View: http://jsfiddle.net/wenyi/e3nk137y/40/
Start Example

checkInvert: https://jsfiddle.net/bxwywcx2/5/

ScrollTo a specific row number: http://jsfiddle.net/wenyi/yf0u35jL/4/

#1791 updateFormatText method: http://jsfiddle.net/e3nk137y/3876/

Locales

#2019 change formatLoadingMessage: http://jsfiddle.net/djhvscf/e3nk137y/4839/

Editable

Editable: http://jsfiddle.net/wenyi/e3nk137y/28/light/

Editable-2: http://jsfiddle.net/wenyi/e3nk137y/3793/

#1357 Inline Editable: http://jsfiddle.net/wenyi/e3nk137y/6491/

#1697 Jump from editable field to another: http://jsfiddle.net/wenyi/e3nk137y/3744/

#1865 Editable with address type: http://jsfiddle.net/e3nk137y/4232/

#2109 Use editable Select2 type: http://jsfiddle.net/wenyi/e3nk137y/6515/

#2314 Use editable and formatter: https://jsfiddle.net/fsauter/5shvjxej/

Export

Basic export: http://jsfiddle.net/e3nk137y/4144/

#1001 Export options using attribute: http://jsfiddle.net/marcelk/6gd9w79u/

#1797: Use iconSize: http://jsfiddle.net/e3nk137y/4225/

#2234: Custom export link: http://jsfiddle.net/wenyi/wc0zLpef/1/.

Context Menu

contextmenu: https://jsfiddle.net/bxwywcx2/5/

More example

#864 Table with tooltip and popover: http://jsfiddle.net/djhvscf/8vgk5626/14/

Card view text drop problem: http://jsfiddle.net/wenyi/e3nk137y/2667/

Get the check/uncheck index: http://jsfiddle.net/wenyi/e3nk137y/3178/

Get column field has been clicked: http://jsfiddle.net/wenyi/e3nk137y/3179/

With other jQuery plugin multiple-select: http://jsfiddle.net/wenyi/e3nk137y/3817/

#1804 Use strict search: http://jsfiddle.net/e3nk137y/3858/

#1810 Custom search placeholder: http://jsfiddle.net/e3nk137y/3872/

#1768 Init columns after receiving remote data: https://jsfiddle.net/1ehuLmw0/1/

#553 fiterBy range: http://jsfiddle.net/e3nk137y/1010/

#2227 Custom tooltip style: http://jsfiddle.net/wenyi/e3nk137y/6490/

#2871 Update row classes of using uniqueId: http://jsfiddle.net/wenyi/e3nk137y/11463/

If you like bootstrap table:

Questions/Helps:

StackOverflow

SegmentFault

Designed and built with all the love in the world by @wenzhixin.

Maintained by @wenzhixin with the help of our contributors.

Code licensed under MIT, documentation under CC BY 3.0.

Currently v1.11.1

·

GitHub

·

My website

·

My repos

·

Questions / Helps

·

Issues

·

Releases

·

Email