Docs

Create Bootstrap Data Tables with ZingGrid

Quickly add data tables to your Bootstrap application with ZingGrid’s Bootstrap theme.

Applies Styles Instantly

Our Bootstrap theme allows users to instantly use Bootstrap’s styling by applying the same classes that you are familiar with. ZingGrid allows for custom column and cell types which enable you to add HTML inside of each cell - including bootstrap components and styles!

Feature Description
Pagination Utilize Bootstrap's number by page styling to navigate through multiple rows.
Alerts Create alerts based upon actions with the grid.
Icons Utilize Bootstrap's SVG icons directly in the grid.
Filtering Filter out row entries based upon what filtering is set on each column.
Progress Bars Integrate Bootstrap components directly, including progress bars, using custom column types.
Modals Need to create additional action modals? Bind Bootstrap modals directly to buttons and actions in the grid.
Top

Using the theme

  1. Include ZingGrid in your site along with Bootstrap CSS and JS. Jquery is required for some Bootstrap components, if you are using them.
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
  1. Include the ZingGrid markup on your page. Make sure to set the starter Bootstrap theme as this resets some defaults in ZingGrid and aids the Bootstrap theme to take over. Feel free to modify as necessary. The starter theme can be located here.
<zing-grid
  id="myFirstGrid"
  theme="/path/to/zg-bootstrap.css"
  caption="Users"
  data='[
    {
      "first": "Mark",
      "last": "Otto",
      "username": "@ZTfer",
      "category": "primary",
      "progress": "12"
    },
    {
      "first": "Jacob",
      "last": "Thorton",
      "username": "@jacobthorton",
      "category": "secondary",
      "progress": "62"
    },
    {
      "first": "Duncan",
      "last": "Mattheson",
      "username": "@dmattheson",
      "category": "danger",
      "progress": "84"
    }
  ]'
></zing-grid>
  1. Utilize custom column types to add any Bootstrap components! Here is an example using Bootstrap's progress bars:
<zing-grid
theme="zg-bootstrap.css">
<zg-column index="progress" renderer="progressBar">
<div class="progress">
  <div class="progress-bar progress-bar-striped"
    role="progressbar"
    style="width: [[index.progress]]%"
    aria-valuenow="[[index.progress]]"
    aria-valuemin="0"
    aria-valuemax="100">[[index.progress]]%</div>
  </div>
</zg-column>
></zing-grid>

And here is a custom render that modifies what color the progress bar should be, based upon the progress value:

window.progressBar = function(customIndex, domCell) {
    const progress = domCell.querySelector('.progress-bar');
    const value = progress.getAttribute('aria-valuenow');
    let color;
    if(value >= 80) {
      color = 'success';
    } else if (value >= 60) {
      color = 'info';
    } else if (value >= 40) {
      color = 'warning';
    } else {
      color = 'danger';
    }
    progress.classList.add('bg-' + color);
  }

Ready to get started? Get the Bootstrap Theme

Top

[integrations: bootstrap]