Bootstrap Grid

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script nonce="undefined" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script nonce="undefined" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      padding: 1rem;
    }

    div[data-field-index="progress"] {
      width: 100%;
    }
  </style>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 428px;
    }
  </style>
</head>

<body>
  <div>

    <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting 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"
        },
        {
          "first": "David",
          "last": "Jose Perez",
          "username": "@djp",
          "category": "info",
          "progress": "45"
        },
        {
          "first": "Dave",
          "last": "Phillipson",
          "username": "@phillipson",
          "category": "warning",
          "progress": "30"
        }
      ]'>
      <zg-colgroup>
        <zg-column index="first">[[index.first]]</zg-column>
        <zg-column index="last">[[index.last]]</zg-column>
        <zg-column index="username">[[index.username]]</zg-column>
        <zg-column index="category">
          <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
        </zg-column>
        <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>
      </zg-colgroup>
    </zing-grid>
  </div>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    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);
    }
  </script>
</body>

</html>

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      padding: 1rem;
    }

    div[data-field-index="progress"] {
      width: 100%;
    }
  </style>
</head>

<body>
  <div>

    <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting 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"
        },
        {
          "first": "David",
          "last": "Jose Perez",
          "username": "@djp",
          "category": "info",
          "progress": "45"
        },
        {
          "first": "Dave",
          "last": "Phillipson",
          "username": "@phillipson",
          "category": "warning",
          "progress": "30"
        }
      ]'>
      <zg-colgroup>
        <zg-column index="first">[[index.first]]</zg-column>
        <zg-column index="last">[[index.last]]</zg-column>
        <zg-column index="username">[[index.username]]</zg-column>
        <zg-column index="category">
          <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
        </zg-column>
        <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>
      </zg-colgroup>
    </zing-grid>
  </div>

</body>

</html>

.zg-body {
  background: #e6e6e6;
}

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);
}