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 Set pager-type="button-arrows" to utilize Bootstrap's number by page styling.
Alerts Hook into ZingGrid events and generate Bootstrap style alerts on ZingGrid actions.
Icons Add Bootstrap Icons directly within your columns.
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>

  2. 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. Get the Bootstrap theme.

    <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>

  3. 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: javascript 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]