bootstrap-table: an extended table plugin that follows your CSS framework

What bootstrap-table adds to a plain HTML table

A hand-written HTML table gives you markup and nothing else. Sorting, paging and row selection all have to be written and wired to your data source by hand. bootstrap-table takes the table element you already have and turns it into a stateful widget: the README lists radio and checkbox selection, sorting on click, pagination, show and hide for columns, headers and footers, AJAX-loaded JSON data, column formatting, card view, detail view, localization and extensions. The audience is narrow and identifiable. If your page is server-rendered or lightly scripted, and the CSS framework is already chosen, this plugin slots into the markup you have rather than asking you to restructure the page. The README states that it was created for Twitter Bootstrap and that all versions are supported, and package.json describes it as "An extended table to integration with some of the most widely used CSS frameworks", naming Bootstrap, Semantic UI, Bulma, Material Design and Foundation. The repository topics add Materialize and Vue to that list. That framework-agnostic positioning is the main thing separating it from table components that assume one styling system.

How the plugin initialises and where the data comes from

The mechanism is a jQuery-era plugin pattern that reads configuration from the element itself. The README lists "via data attributes" among the features, so options can be declared as attributes on the table tag instead of being passed in JavaScript. Data arrives in one of two ways. It can already be in the DOM as rows, in which case the plugin operates on what the browser parsed. Or it can be fetched as JSON over AJAX, which the README lists as a feature. In that second mode the plugin owns the request and the rendering, and column definitions in your configuration decide which JSON field maps to which column and how each cell is formatted. The extension system is the second half of the architecture. Pagination, selection and the rest are not all baked into one file; the build produces a dist directory and extensions are separate assets that you include alongside the core. That is why the install instructions matter more than they look: pulling in only bootstrap-table.min.js gives you the core table, not every feature named in the README. The repository also carries index.d.ts, so TypeScript consumers get declarations for the public surface. The documentation site under site/ is the reference for option names, and the README points to a separate examples repository rather than inlining examples.

Installing bootstrap-table and rendering a first table

The README gives three routes: a manual download from the Releases page or the source archive, a package manager, and a CDN. CDNJS, bootcss and jsdelivr are named. The package manager route is the shortest to reproduce:

npm install bootstrap-table

Yarn works the same way, with `yarn add bootstrap-table`. After that, package.json points `main` at `dist/bootstrap-table.min.js` and `style` at `dist/bootstrap-table.min.css`, so a bundler resolves both entries without extra configuration. For a first table, load the core script and stylesheet after your CSS framework, then initialise on a table element that already has the framework's table classes. The README does not print a full initialisation snippet, so take the exact option names from the documentation site rather than guessing them. What you should see is the same table you wrote, now with the behaviours you enabled: clicking a column header sorts, and if you included the pagination extension, the rows are split across pages. To work on the plugin itself rather than consume it, the README documents a local development flow:

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

The README says to then open http://localhost:8081/bootstrap-table-examples. Note the port: it is the one the README prints, and it depends on http-server's defaults rather than on anything bootstrap-table configures. Building the distributables is separate:

npm install
npm run build

The README states the result appears in the `dist` directory. The yarn equivalents are `yarn install` and `yarn build`.

Responsive layout, column width and the limits of the plugin

The README lists responsive web design and a scrollable table with fixed headers as features, and "bootstrap table responsive" is one of the phrases people search for around this project. Be precise about what that means here. The plugin does not invent a layout engine; it composes with the responsive utilities of whichever CSS framework you loaded. A wide table with many columns still needs a decision from you about what happens at narrow widths, whether that is horizontal scrolling, hiding columns, or switching to the card view the README lists. Column width behaves the same way: it is ultimately CSS, and the plugin's contribution is the ability to show and hide columns at runtime, not to compute widths. The sharper limitation is scale. The README describes AJAX-loaded JSON and powerful pagination, which together imply a server-side paging model: the browser holds one page of rows at a time. If you instead expect the plugin to hold a large dataset in the browser and scroll through it, the feature list gives you no virtual scrolling or windowing to lean on. This is not a defect in the plugin so much as a boundary of its design, and it is the boundary that matters most when choosing it. The second boundary is dependency shape. This is a plugin that expects a DOM table and, historically, jQuery, which makes it awkward inside a component framework where the framework wants to own the DOM subtree.

bootstrap-table compared with DataTables and with framework table components

The most common comparison is with DataTables, and the difference is not feature count so much as where each puts its weight. DataTables is a self-contained data grid with its own styling layer and its own ecosystem of plugins; you adopt its look and adapt your page to it. bootstrap-table inverts that. Its stated purpose is integration with the CSS framework you already use, which is why the same core supports Bootstrap, Semantic UI, Bulma, Material Design and Foundation. If your application's visual language is already fixed by one of those frameworks, bootstrap-table is the lower-friction choice because it does not bring a competing stylesheet. If you want the grid to define the look, DataTables is the more opinionated and therefore more consistent option. The second comparison is with table components inside component frameworks. React-bootstrap-table and react-bootstrap-table-next appear in the related searches around this project, and the naming is a useful warning: those are separate projects with their own APIs, not bindings for this one. The repository does list Vue among its topics and package.json lists @vitejs/plugin-vue and vue as devDependencies, but that is build tooling for the project's own site and tests, not a Vue component wrapper you can import. If your application is a Vue or React application, you are choosing between a DOM-manipulating plugin and a component that participates in your framework's render cycle. The component is usually the better fit, even when it offers fewer options.

Maintenance, licence and the cost of upgrading

The repository is not archived, and the last push was on 2026-09-19. Releases are frequent and small: 1.27.1 on 2026-03-28, 1.27.2 on 2026-04-15 and 1.27.3 on 2026-04-23, with package.json carrying 1.27.3. That cadence is the practical upgrade cost. A patch release can change an option's behaviour, so the CHANGELOG.md at the repository root is the file to read before bumping the version, and the README points to it as the release history. Because the plugin reads options from data attributes as well as JavaScript, an upgrade can break markup that no compiler will check. Budget for a visual pass over the tables that use the options you rely on. The licence is MIT. The README states that the plugin is "Completely free, you can arbitrarily use and modify this plugin". For most consumers that means the obligations are limited to keeping the licence notice with the distributed code; a legal review is still the right step if you vendor the source into a product, since MIT terms interact with how you ship and attribute third-party code. The repository also carries bower.json, composer.json and bootstrap-table.jquery.json, which tells you the project still publishes metadata for package managers beyond npm. Pulling from one of those registries is possible, but npm is the path the README documents first and the one that matches the version in package.json.

When bootstrap-table is the wrong tool

Three cases argue against it. The first is a large client-side dataset. If your requirement is to load thousands of rows once and scroll smoothly, the README's feature list offers AJAX and pagination, not virtualisation, and you will be fighting the design. The second is a component-framework application. If React or Vue owns the DOM, a plugin that mutates a table element underneath the framework's render cycle creates a coordination problem that grows with every interactive feature you add. Reach for the framework's own table component instead. The third is a page where the table is decoration. If you need a static, styled table with no sorting, paging or selection, the CSS framework alone already gives you that, and adding the plugin buys you a dependency and an upgrade path for nothing. Where the plugin does fit is the middle ground: an admin page, an internal report, a server-rendered listing where the data comes back as JSON from an endpoint and the team wants sorting, paging and column control without adopting a SPA. That is the shape the README's feature list describes, and it is a real and common shape.

Editorial conclusion

Adopt bootstrap-table when your pages are already Bootstrap, Semantic UI, Bulma, Material Design or Foundation markup and you need sorting, pagination, selection and column visibility without adding a component framework. Do not adopt it if your application is built around a reactive component library that already owns the table, or if you need a grid that renders tens of thousands of rows in the browser. Before committing, verify the responsive behaviour at your real breakpoints, confirm that the extension you need is present in the dist build you ship, and read CHANGELOG.md for the 1.27.x entries that touch the options you plan to use.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. wenzhixin/bootstrap-table on GitHub