bootstrap-table
An extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
A JavaScript plugin that turns a plain HTML table into a sortable, paginated, searchable data grid. Works with Bootstrap, Bulma, Semantic UI, and other CSS frameworks, loads large datasets from a server via JSON without embedding all rows in the page.
Bootstrap Table is a JavaScript plugin that turns a standard HTML table into an interactive data grid. You add it to a web page that already uses a CSS framework such as Bootstrap, Semantic UI, Bulma, Material Design, or Foundation, and it adds sorting, pagination, row selection, and other features that plain HTML tables do not provide on their own.
The plugin can load table data from a server in JSON format using background requests, so large datasets do not need to be embedded directly in the page. Clicking a column header sorts the rows. You can configure the table to show checkboxes or radio buttons for selecting one or more rows, and then read those selections in your JavaScript code. Columns can be shown or hidden individually without reloading the page.
Other built-in options include a card view that turns each row into a stacked card layout for smaller screens, a detail view that expands a row to show additional information, fixed headers that stay visible while scrolling through long tables, and localization support for different languages. The behavior is configurable either through JavaScript options or through data attributes added directly to the HTML, so you can adjust things without writing much code.
The plugin is free under the MIT license and can be added to a project through npm, Yarn, or a CDN link. It was originally built for Twitter Bootstrap but has since been extended to work with several other CSS frameworks. An online editor is available for experimenting with settings and previewing the result before using it in a real project.
Where it fits
- Add sorting, pagination, and search to an existing HTML data table without rebuilding the page in a JavaScript framework.
- Load a large server-side dataset via a JSON API with server-side pagination so the browser never fetches all rows at once.
- Let users select rows with checkboxes and act on the selection with JavaScript callbacks for delete or bulk-edit operations.
- Show a mobile-friendly card view of table data on small screens by switching to the built-in card layout mode.