A nice and intuitive Bootstrap grid control – jQuery bootgrid

Tables in web project? Try jQuery bootgrid – a lightweight Bootstrap grid control, implemented as jQuery plugin.

Bootstrap grid control in action

Nice and intuitive. A grid control especially designed for bootstrap. This UI component written for jQuery and Bootstrap (Bootstrap isn’t necessarily required), has rich, interesting features.

jQuery Bootgrid is a powerful table extender. It extends your table with nice and helpful features, like:

– Responsive web design and accessability support

– Server-side data loading (async) – load data via AJAX

– Dynamic Manipulation

– Easy Navigation and flexible design

– Highly configurable

– Data API

– Single & multiple row selection support

– Localization support

… and more! It’s lightweight and Cross Browser.

Bootgrid - jQuery and Bootstrap grid control
Bootgrid – jQuery and Bootstrap grid control


Include jQuery, jQuery Bootgrid and Bootstrap libraries:

<link href="bootstrap.css" rel="stylesheet">
<link href="jquery.bootgrid.css" rel="stylesheet">
<script src="jquery.js"></script> 
<script src="jquery.bootgrid.js"></script>

Then define the table layout and your data columns by adding the data-column-id attribute. Specify data URL used to fill the table via AJAX:

<table id="grid" data-toggle="bootgrid" data-ajax="true" 
  class="table table-condensed table-hover table-striped">
      <th data-column-id="id">ID</th>
      <th data-column-id="name">Sender</th>

That’s it. Many interesting examples and documentation you can find at project website.

License: MIT

Demos & docs:




See also:

JavaScript Excel tables library

A nice, editable jQuery table plugin with Bootstrap

jQuery table filter with multiple criteria – multifilter