Themes

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning

The Components You Know and Love

ZingGrid allows for custom column and cell types which enable you to add HTML inside of each cell - including bootstrap components and styles!

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.

Use the Bootstrap Theme with Ease

Our Bootstrap theme allows users to instantly use Bootstrap’s styling by applying the same classes that you are familiar with.

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" rossorigin="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. 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>
            

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