• Edit
  • Download
  • <!DOCTYPE html>
    <html class="zg-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Blank Grid</title>
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
      <script nonce="undefined" src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
      <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
      <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        * {
          --md-red: #f44336;
          --md-orange: #ff9800;
          --md-yellow: #ffeb3b;
          --md-green: #4caf50;
          --md-blue: #2196f3;
          --md-purple: #673ab7;
          --md-indigo: #3f51b5;
          --md-black: #000;
          --md-white: #FFF;
          font-family: 'Roboto', sans-serif;
          /* BOOTSTRAP COLORS*/
          /* Bootstrap 4 has some css variables exposes, mostly colors. */
          /* RE-USABLE ZINGGRID VARS
      ----------------------------------------------------- */
          /* BACKGROUND */
          --theme-background-color: var(--mdc-theme-background);
          --theme-background-zebra: var(--light);
          /* BORDER */
          --theme-border-color_alt: var(--light);
          --theme-border-color_alt2: var(--secondary);
          --zg-button-focus: var(--light);
          /* COLOR */
          --theme-color-primary: var(--md-indigo);
          /* FONT */
          --zg-caption-color: var(--md-black);
          --theme-font-family: initial;
          --theme-padding_x: 2rem;
          --theme-padding_y: 0.75rem;
          /* -------------------------------------------------- */
          /* ZG-GRID
      ----------------------------------------------------- */
          /* padding: var(--theme-padding_x) var(--theme-padding_y); */
          /* box-sizing: border-box; */
          --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
          /* ZG-BODY
      ----------------------------------------------------- */
          --zg-body-background: var(--white);
          --zg-body-card-background: transparent;
          /* Hover */
          --zg-row-body-color_even_hover: var(--zg-row-body-color);
          --zg-row-body-color_odd_hover: var(--zg-row-body-color);
          /* ZG-BUTTON
      ----------------------------------------------------- */
          --zg-button-opacity_disabled: .5;
          /* ZG-BUTTON-CUSTOM
      ----------------------------------------------------- */
          --zg-button-background_custom: var(--theme-color-primary);
          --zg-button-color: var(--white);
          --zg-button-border_custom: none;
          --zg-button-box-shadow_custom: none;
          --zg-button-border_custom_hover: none;
          --zg-button-background_custom_hover: #0069d9;
          /* ZG-CAPTION
      ----------------------------------------------------- */
          --zg-caption-background: var(--md-white);
          --zg-caption-border-bottom: 0;
          --zg-caption-color: var(--md-black);
          --zg-caption-icon-color: var(--md-black);
          /* ZG-CELL
      ----------------------------------------------------- */
          --zg-cell-background_sorted: rgba(62, 117, 167, .2);
          /* ZG-CONTROL-BAR
      ----------------------------------------------------- */
          --zg-control-bar-background: var(--md-white);
          --zg-control-bar-border-bottom: 0;
          /* ZG-EDITOR_ROW
      ----------------------------------------------------- */
          --zg-editor-row-input-background: var(--md-white);
          --zg-editor-row-input-color: var(--md-white);
          --zg-editor-row-input-background_focus: #00203d;
          --zg-editor-row-input-box-shadow_focus: none;
          /* ZG-FILTER
      ----------------------------------------------------- */
          --zg-filter-background: var(--light);
          --zg-filter-background_sorted: rgba(62, 117, 167, .2);
          --zg-filter-border: none;
          /* Input */
          --zg-filter-input-height: calc(1.5em + .75rem + 2px);
          --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
          --zg-filter-input-border-radius: .25rem;
          --zg-filter-input-border: 1px solid #ced4da;
          --zg-filter-input-background: var(--md-white);
          --zg-filter-input-border-width: 1px;
          --zg-filter-input-margin: .375rem;
          /* ZG-FOCUS
      ----------------------------------------------------- */
          --zg-focus-border: 1px solid #80bdff;
          --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
          --zg-focus-outline: 0;
          --zg-focus-bottom-transform: translateY(1px);
          --zg-focus-right-transform: translateX(1px);
          /* ZG-HEAD
      ----------------------------------------------------- */
          --zg-head-background: var(--md-white);
          /* ZG-MENUITEM
      ----------------------------------------------------- */
          --zg-menu-background: var(--md-black);
          /* ZG-INPUT
      ----------------------------------------------------- */
          --zg-input-color: #00549c;
          ;
          --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
          --zg-input-border-left: 1px solid var(--theme-border-color_alt);
          --zg-input-border-right: 1px solid var(--theme-border-color_alt);
          --zg-input-border-top: 1px solid var(--theme-border-color_alt);
          /* ZG-PAGER
      ----------------------------------------------------- */
          --zg-pager-background: transparent;
          --zg-pager-border-top: 0;
          --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
          --zg-pager-color: var(--zg-head-cell-color);
          /* ZG-ROW
      ----------------------------------------------------- */
          --zg-row-border: 1px solid var(--grey);
          /* Card */
          --zg-row-card-background: var(--zg-body-background);
          /* ZG-SOURCE
      ----------------------------------------------------- */
          --zg-source-background: #fbfbfb;
          --zg-source-border-bottom_top: 1px solid #f4f4f4;
          --zg-source-border-top_top: 1px solid #f4f4f4;
          --zg-source-border-top_bottom: 1px solid #f4f4f4;
          --zg-source-color: var(--theme-color-primary);
          /* ZG-WATERMARK
      ----------------------------------------------------- */
          --zg-watermark-background: transparent;
          --zg-watermark-border-bottom: 0;
          --zg-watermark-border-left: 0;
          --zg-watermark-border-right: 0;
          --zg-watermark-border-top: 0;
          --zg-watermark-font-size: 10px;
          --zg-watermark-padding: 0 var(--theme-padding_x);
        }
    
        .chip-primary {
          background: var(--md-indigo);
        }
    
        .chip-secondary {
          background: var(--md-gray);
        }
    
        .chip-success {
          background: var(--md-green);
        }
    
        .chip-danger {
          background: var(--md-red);
        }
    
        .chip-warning {
          background: var(--md-yellow);
        }
    
        .progress-wrapper {
          width: 200px;
        }
    
        zing-grid[loading] {
          height: 472px;
        }
      </style>
    </head>
    
    <body class="zg-body">
      <!-- Most features can be toggled on the toplevel zing-grid tag -->
      <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">
            <div class="mdc-chip chip-[[index.category]]" role="row">
              <div class="mdc-chip__ripple"></div>
              <span role="gridcell">
                  <span role="button" tabindex="0" class="mdc-chip__primary-action">
                    <span class="mdc-chip__text">[[index.category]]</span>
              </span>
              </span>
            </div>
          </zg-column>
          <zg-column index="progress" renderer="progressBar">
            <div class="progress-wrapper">
              <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
                <div class="mdc-linear-progress__buffer">
                  <div class="mdc-linear-progress__buffer-bar"></div>
                  <div class="mdc-linear-progress__buffer-dots"></div>
                </div>
                <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                  <span class="mdc-linear-progress__bar-inner"></span>
                </div>
                <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar" style="visibility: visible; width: [[index.progress]]%">
                  <span class="mdc-linear-progress__bar-inner"></span>
                </div>
              </div>
            </div>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    
      <script>
        window.progressBar = function(customIndex, domCell) {
          const progress = domCell.querySelector('.mdc-linear-progress');
          console.log(progress)
          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 class="zg-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Blank Grid</title>
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
      <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
      <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body class="zg-body">
      <!-- Most features can be toggled on the toplevel zing-grid tag -->
      <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">
            <div class="mdc-chip chip-[[index.category]]" role="row">
              <div class="mdc-chip__ripple"></div>
              <span role="gridcell">
                  <span role="button" tabindex="0" class="mdc-chip__primary-action">
                    <span class="mdc-chip__text">[[index.category]]</span>
              </span>
              </span>
            </div>
          </zg-column>
          <zg-column index="progress" renderer="progressBar">
            <div class="progress-wrapper">
              <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
                <div class="mdc-linear-progress__buffer">
                  <div class="mdc-linear-progress__buffer-bar"></div>
                  <div class="mdc-linear-progress__buffer-dots"></div>
                </div>
                <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                  <span class="mdc-linear-progress__bar-inner"></span>
                </div>
                <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar" style="visibility: visible; width: [[index.progress]]%">
                  <span class="mdc-linear-progress__bar-inner"></span>
                </div>
              </div>
            </div>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    
    </body>
    
    </html>
    * {
      --md-red: #f44336;
      --md-orange: #ff9800;
      --md-yellow: #ffeb3b;
      --md-green: #4caf50;
      --md-blue: #2196f3;
      --md-purple: #673ab7;
      --md-indigo: #3f51b5;
      --md-black: #000;
      --md-white: #FFF;
      font-family: 'Roboto', sans-serif;
      /* BOOTSTRAP COLORS*/
      /* Bootstrap 4 has some css variables exposes, mostly colors. */
      /* RE-USABLE ZINGGRID VARS
      ----------------------------------------------------- */
      /* BACKGROUND */
      --theme-background-color: var(--mdc-theme-background);
      --theme-background-zebra: var(--light);
      /* BORDER */
      --theme-border-color_alt: var(--light);
      --theme-border-color_alt2: var(--secondary);
      --zg-button-focus: var(--light);
      /* COLOR */
      --theme-color-primary: var(--md-indigo);
      /* FONT */
      --zg-caption-color: var(--md-black);
      --theme-font-family: initial;
      --theme-padding_x: 2rem;
      --theme-padding_y: 0.75rem;
      /* -------------------------------------------------- */
      /* ZG-GRID
      ----------------------------------------------------- */
      /* padding: var(--theme-padding_x) var(--theme-padding_y); */
      /* box-sizing: border-box; */
      --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
      /* ZG-BODY
      ----------------------------------------------------- */
      --zg-body-background: var(--white);
      --zg-body-card-background: transparent;
      /* Hover */
      --zg-row-body-color_even_hover: var(--zg-row-body-color);
      --zg-row-body-color_odd_hover: var(--zg-row-body-color);
      /* ZG-BUTTON
      ----------------------------------------------------- */
      --zg-button-opacity_disabled: .5;
      /* ZG-BUTTON-CUSTOM
      ----------------------------------------------------- */
      --zg-button-background_custom: var(--theme-color-primary);
      --zg-button-color: var(--white);
      --zg-button-border_custom: none;
      --zg-button-box-shadow_custom: none;
      --zg-button-border_custom_hover: none;
      --zg-button-background_custom_hover: #0069d9;
      /* ZG-CAPTION
      ----------------------------------------------------- */
      --zg-caption-background: var(--md-white);
      --zg-caption-border-bottom: 0;
      --zg-caption-color: var(--md-black);
      --zg-caption-icon-color: var(--md-black);
      /* ZG-CELL
      ----------------------------------------------------- */
      --zg-cell-background_sorted: rgba(62, 117, 167, .2);
      /* ZG-CONTROL-BAR
      ----------------------------------------------------- */
      --zg-control-bar-background: var(--md-white);
      --zg-control-bar-border-bottom: 0;
      /* ZG-EDITOR_ROW
      ----------------------------------------------------- */
      --zg-editor-row-input-background: var(--md-white);
      --zg-editor-row-input-color: var(--md-white);
      --zg-editor-row-input-background_focus: #00203d;
      --zg-editor-row-input-box-shadow_focus: none;
      /* ZG-FILTER
      ----------------------------------------------------- */
      --zg-filter-background: var(--light);
      --zg-filter-background_sorted: rgba(62, 117, 167, .2);
      --zg-filter-border: none;
      /* Input */
      --zg-filter-input-height: calc(1.5em + .75rem + 2px);
      --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
      --zg-filter-input-border-radius: .25rem;
      --zg-filter-input-border: 1px solid #ced4da;
      --zg-filter-input-background: var(--md-white);
      --zg-filter-input-border-width: 1px;
      --zg-filter-input-margin: .375rem;
      /* ZG-FOCUS
      ----------------------------------------------------- */
      --zg-focus-border: 1px solid #80bdff;
      --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
      --zg-focus-outline: 0;
      --zg-focus-bottom-transform: translateY(1px);
      --zg-focus-right-transform: translateX(1px);
      /* ZG-HEAD
      ----------------------------------------------------- */
      --zg-head-background: var(--md-white);
      /* ZG-MENUITEM
      ----------------------------------------------------- */
      --zg-menu-background: var(--md-black);
      /* ZG-INPUT
      ----------------------------------------------------- */
      --zg-input-color: #00549c;
      ;
      --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
      --zg-input-border-left: 1px solid var(--theme-border-color_alt);
      --zg-input-border-right: 1px solid var(--theme-border-color_alt);
      --zg-input-border-top: 1px solid var(--theme-border-color_alt);
      /* ZG-PAGER
      ----------------------------------------------------- */
      --zg-pager-background: transparent;
      --zg-pager-border-top: 0;
      --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
      --zg-pager-color: var(--zg-head-cell-color);
      /* ZG-ROW
      ----------------------------------------------------- */
      --zg-row-border: 1px solid var(--grey);
      /* Card */
      --zg-row-card-background: var(--zg-body-background);
      /* ZG-SOURCE
      ----------------------------------------------------- */
      --zg-source-background: #fbfbfb;
      --zg-source-border-bottom_top: 1px solid #f4f4f4;
      --zg-source-border-top_top: 1px solid #f4f4f4;
      --zg-source-border-top_bottom: 1px solid #f4f4f4;
      --zg-source-color: var(--theme-color-primary);
      /* ZG-WATERMARK
      ----------------------------------------------------- */
      --zg-watermark-background: transparent;
      --zg-watermark-border-bottom: 0;
      --zg-watermark-border-left: 0;
      --zg-watermark-border-right: 0;
      --zg-watermark-border-top: 0;
      --zg-watermark-font-size: 10px;
      --zg-watermark-padding: 0 var(--theme-padding_x);
    }
    
    .chip-primary {
      background: var(--md-indigo);
    }
    
    .chip-secondary {
      background: var(--md-gray);
    }
    
    .chip-success {
      background: var(--md-green);
    }
    
    .chip-danger {
      background: var(--md-red);
    }
    
    .chip-warning {
      background: var(--md-yellow);
    }
    
    .progress-wrapper {
      width: 200px;
    }
          window.progressBar = function(customIndex, domCell) {
            const progress = domCell.querySelector('.mdc-linear-progress');
            console.log(progress)
            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);
          }