bootstrap-table

What is bootstrap-table?

The bootstrap-table npm package is a powerful library for creating dynamic, responsive, and feature-rich tables using Bootstrap. It provides a wide range of functionalities such as sorting, pagination, searching, and more, making it easy to manage and display large datasets in a user-friendly manner.

What are bootstrap-table's main functionalities?

Basic Table Initialization

This code initializes a basic table with three columns (ID, Name, Price) and two rows of data. The table is created using the bootstrapTable method, which takes an object with columns and data properties.

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

Pagination

This code demonstrates how to enable pagination in a bootstrap-table. The pagination property is set to true, and the pageSize property is set to 5, meaning the table will display 5 rows per page.

$(document).ready(function() {
  $('#table').bootstrapTable({
    pagination: true,
    pageSize: 5,
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: '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' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});

Search Functionality

This code adds a search box to the table, allowing users to filter the table data based on their input. The search property is set to true to enable this functionality.

$(document).ready(function() {
  $('#table').bootstrapTable({
    search: true,
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: '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' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});

Sorting

This code enables sorting for each column in the table. The sortable property is set to true for the table and each column, allowing users to sort the data by clicking on the column headers.

$(document).ready(function() {
  $('#table').bootstrapTable({
    sortable: true,
    columns: [{
      field: 'id',
      title: 'ID',
      sortable: true
    }, {
      field: 'name',
      title: 'Name',
      sortable: true
    }, {
      field: 'price',
      title: 'Price',
      sortable: true
    }],
    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' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});

Other packages similar to bootstrap-table

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It provides a flexible API for building complex tables with features like sorting, filtering, and pagination. Compared to bootstrap-table, react-table is more suited for React applications and offers a more modern and customizable approach.

ag-grid

ag-grid is a fully-featured and highly customizable JavaScript data grid. It supports a wide range of features including sorting, filtering, pagination, and more. ag-grid is known for its performance and is suitable for large datasets. Compared to bootstrap-table, ag-grid offers more advanced features and better performance for enterprise-level applications.

handsontable

handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It supports a wide range of functionalities such as data validation, sorting, filtering, and more. handsontable is ideal for applications that require a spreadsheet-like interface. Compared to bootstrap-table, handsontable provides a more interactive and Excel-like experience.

README

Bootstrap Table

An extended Bootstrap table with radio, checkbox, sort, pagination, extensions and other added features.

To get started, check out:

• Docs
• Examples
• Questions/Helps
• 问题/帮助

List of donators

LICENSE

NOTE: Bootstrap Table is licensed under the The MIT License. Completely free, you can arbitrarily use and modify this plugin. If this plugin is useful to you, you can Star this repo, your support is my biggest motive force, thanks.

Features

• Created for Bootstrap 3 (Bootstrap 2 supported)
• Responsive web design
• Scrollable Table with fixed headers
• Fully configurable
• Via data attributes
• Show/Hide columns
• Show/Hide headers
• Show/Hide footers
• Get data in JSON format using AJAX
• Simple column sorting with a click
• Format column
• Single or multiple row selection
• Powerful pagination
• Card view
• Detail view
• Localization
• Extensions

How to get it

Manual download

Use Releases page or the source.

Bower

bower install bootstrap-table

Npm

npm install bootstrap-table

CDN

You can source bootstrap-table directly from a CDN like CDNJS or bootcss or jsdelivr.

Contributing

For feature requests, bug reports or submitting pull requests, please ensure you first read CONTRIBUTING.md.

Reporting Issues

As stated above, please read CONTRIBUTING.md, especially Bug Reports

And as stated there, please provide jsFiddle when creating issues!

It's really saves much time.

You can also use these for templates:

jsFiddle Bootstrap Table

Your feedback is very appreciated!

Acknowledgements

Thanks to everyone who have given feedback and submitted pull requests. A list of all the contributors can be found here. This project exists thanks to all the people who contribute. [Contribute].

Release History

Look at the Change Log

Local build

To build bootstrap-table locally please run:

npm run build

Result will appear in dist directory.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Changelog

1.13.1

• feat(js): add theadClasses option to support bootstrap v4
• feat(js): fix #3727, icons update to font-awesome 5
• feat(locale): rewrite all locales to ES6
• feat(editable extension): rewrite bootstrap-table-editable to ES6
• feat(filter-control extension): rewrite bootstrap-table-filter-control to ES6
• feat(treegrid extension): add rootParentId option
• fix(js): fix #3653, getHiddenRows method bug
• fix(js): fix #4066, getOptions method remove data property
• fix(js): fix #4088, no matches display error
• fix(js): fix eslint warning and error
• fix(locale): fix #3999, improve es-ES locale
• fix(filter-control extension): fix #3474, multiple choice bug
• fix(filter-control extension): fix #4008, select all rows and keyup event error
• fix(export extension): fix #4086, export in cardView display error