• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        :root {
          /* Define custom colors for build status */
          --build-success: #00c853;
          --build-failed: #d50000;
          --build: pending: #ffab00;
          --zg-caption-background: #3f51b5;
          --zg-caption-color: #fff;
          /* Modify ZG Display */
          --zing-grid-background: #fff;
        }
    
        /* ZingGrid Overrides
    ---------------------------------- */
    
        /* Hide grid's body 'header' cells */
    
        zg-head {
          display: none;
        }
    
        /* Turn off native row highlighting */
    
        zg-row:hover {
          background: inherit;
        }
    
        /* Remove native cell padding - we add our own to the custom row */
    
        zg-cell {
          padding: 0;
        }
    
        /* Allow full-width custom rows */
    
        [data-field-index] {
          width: 100%;
        }
    
        /* Custom Row Styling
    ---------------------------------- */
    
        .row-wrapper {
          padding: 1rem;
        }
    
        .row-container {
          background: #fff;
          border-radius: .5rem;
          cursor: pointer;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-bottom: .25rem;
          overflow: hidden;
          padding: 1rem;
        }
    
        .row-container:hover {
          box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
        }
    
        /* First Cell */
    
        .row-container .first-cell {
          display: flex;
          flex-wrap: wrap;
          flex-grow: 1;
          justify-content: space-between;
          align-items: center;
        }
    
        /* First Cell Child Elements */
    
        .flex-center {
          display: flex;
          align-items: center;
        }
    
        /* Add padding for mobile view */
    
        zing-grid[viewport="mobile"] .flex-center {
          margin: 1.0rem;
        }
    
        /* On all views EXCEPT zing-grid mobile view */
    
        zing-grid:not([viewport="mobile"]) .user-contents {
          min-width: 300px;
        }
    
        /* User Contents Cell */
    
        .user-contents span {
          margin-right: 1.5rem;
        }
    
        .user-contents img {
          height: 25px;
        }
    
        /* Font Awesome icon styling */
    
        .build-status {
          display: flex;
          flex-direction: row;
          align-items: center;
        }
    
        .build-status::before {
          font-family: FontAwesome;
          font-size: 3rem;
          margin-right: 1rem;
        }
    
        /* Content defined by Font-Awesome unicode characters */
    
        .build-success::before {
          content: '\f164';
          color: var(--build-success, green);
        }
    
        .build-failed::before {
          content: '\f165';
          color: var(--build-failed, red);
        }
    
        .build-pending::before {
          content: '\f017';
          color: var(--build-pending, orange);
        }
    
        zing-grid[loading] {
          height: 961px;
        }
      </style>
    </head>
    
    <body>
    
      <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
        <zg-data data='[
            {
              "status": "success",
              "branch": "dev",
              "username": "chocolateRainGuy",
              "commitId": "1582393",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "jennaMarbles",
              "commitId": "32532315",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "starWarsKid",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "pending",
              "branch": "ci-integration",
              "username": "dramticLookGopher",
              "commitId": "aaf1234s",
              "runTime": "1:23",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "dev-unit-tests",
              "username": "leeroyJenkins",
              "commitId": "2345623",
              "runTime": "0:09",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "britneySpears",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "numaNumaGuy",
              "commitId": "62562345",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            }
          ]'></zg-data>
        <zg-colgroup>
          <zg-column index=" " renderer="addChangeEvent">
            <!-- Template tag is preferred so that the content is never rendered -->
            <template>
                <div class="row-wrapper">
                  <div class="row-container">
                    <!-- First Cell -->
                    <div class="first-cell">
                      <div class="flex-center">
                        <!-- Dynamically inject class with templating -->
                        <div class="build-status build-[[record.status]]"></div>
                        <span>[[record.branch]]/[[record.commitId]]</span>
                      </div>
                      <div class="user-contents flex-center">
                        <span><img src="[[record.avatar]]" alt="N/A"></span>
                        <span>[[record.username]]</span>
                        <span>[[record.runTime]]</span>
                      </div>
                    </div>
                    <!-- Select Dropdown Cell -->
                    <div class="flex-center">
                      <select>
                        <option disabled selected>Please Select One</option>
                        <option value="1">Restart Build</option>
                        <option value="2">Reset Cache</option>
                      </select>
                    </div>
                  </div>
                </div>
              </template>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    
      <script>
        /**
         * @description This custom render function should return NOTHING. If you
         * return content here it will override your slotted contents.
         * NOTE: renderer NOT REQUIRED for slotted content.
         */
        function addChangeEvent(customIndex, cellRef, $cell) {
          // $cell.record gives us us direct information related to this row
          const record = $cell.record;
          // $cell.dom() gives us direct access to zg-cell DOM contents
          const selectRef = cellRef.querySelector('select');
          selectRef.addEventListener('change', e => {
            const changeValue = e.target.value;
            if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
            else alert('Resetting cache');
          });
        }
    
        // Init
        // ----------------------------------
        /* Get the ZG instance */
        const zgRef = document.querySelector('zing-grid')
        // Add click event listener, so you can drill into another page on row click
        zgRef.addEventListener('row:click', e => {
          console.log('row clicked', e.detail);
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    
    <body>
    
      <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
        <zg-data data='[
            {
              "status": "success",
              "branch": "dev",
              "username": "chocolateRainGuy",
              "commitId": "1582393",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "jennaMarbles",
              "commitId": "32532315",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "starWarsKid",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "pending",
              "branch": "ci-integration",
              "username": "dramticLookGopher",
              "commitId": "aaf1234s",
              "runTime": "1:23",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "dev-unit-tests",
              "username": "leeroyJenkins",
              "commitId": "2345623",
              "runTime": "0:09",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "britneySpears",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "numaNumaGuy",
              "commitId": "62562345",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            }
          ]'></zg-data>
        <zg-colgroup>
          <zg-column index=" " renderer="addChangeEvent">
            <!-- Template tag is preferred so that the content is never rendered -->
            <template>
                <div class="row-wrapper">
                  <div class="row-container">
                    <!-- First Cell -->
                    <div class="first-cell">
                      <div class="flex-center">
                        <!-- Dynamically inject class with templating -->
                        <div class="build-status build-[[record.status]]"></div>
                        <span>[[record.branch]]/[[record.commitId]]</span>
                      </div>
                      <div class="user-contents flex-center">
                        <span><img src="[[record.avatar]]" alt="N/A"></span>
                        <span>[[record.username]]</span>
                        <span>[[record.runTime]]</span>
                      </div>
                    </div>
                    <!-- Select Dropdown Cell -->
                    <div class="flex-center">
                      <select>
                        <option disabled selected>Please Select One</option>
                        <option value="1">Restart Build</option>
                        <option value="2">Reset Cache</option>
                      </select>
                    </div>
                  </div>
                </div>
              </template>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    
    </body>
    
    </html>
    :root {
      /* Define custom colors for build status */
      --build-success: #00c853;
      --build-failed: #d50000;
      --build: pending: #ffab00;
      --zg-caption-background: #3f51b5;
      --zg-caption-color: #fff;
      /* Modify ZG Display */
      --zing-grid-background: #fff;
    }
    
    /* ZingGrid Overrides
    ---------------------------------- */
    
    /* Hide grid's body 'header' cells */
    
    zg-head {
      display: none;
    }
    
    /* Turn off native row highlighting */
    
    zg-row:hover {
      background: inherit;
    }
    
    /* Remove native cell padding - we add our own to the custom row */
    
    zg-cell {
      padding: 0;
    }
    
    /* Allow full-width custom rows */
    
    [data-field-index] {
      width: 100%;
    }
    
    /* Custom Row Styling
    ---------------------------------- */
    
    .row-wrapper {
      padding: 1rem;
    }
    
    .row-container {
      background: #fff;
      border-radius: .5rem;
      cursor: pointer;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: .25rem;
      overflow: hidden;
      padding: 1rem;
    }
    
    .row-container:hover {
      box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
    }
    
    /* First Cell */
    
    .row-container .first-cell {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      justify-content: space-between;
      align-items: center;
    }
    
    /* First Cell Child Elements */
    
    .flex-center {
      display: flex;
      align-items: center;
    }
    
    /* Add padding for mobile view */
    
    zing-grid[viewport="mobile"] .flex-center {
      margin: 1.0rem;
    }
    
    /* On all views EXCEPT zing-grid mobile view */
    
    zing-grid:not([viewport="mobile"]) .user-contents {
      min-width: 300px;
    }
    
    /* User Contents Cell */
    
    .user-contents span {
      margin-right: 1.5rem;
    }
    
    .user-contents img {
      height: 25px;
    }
    
    /* Font Awesome icon styling */
    
    .build-status {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .build-status::before {
      font-family: FontAwesome;
      font-size: 3rem;
      margin-right: 1rem;
    }
    
    /* Content defined by Font-Awesome unicode characters */
    
    .build-success::before {
      content: '\f164';
      color: var(--build-success, green);
    }
    
    .build-failed::before {
      content: '\f165';
      color: var(--build-failed, red);
    }
    
    .build-pending::before {
      content: '\f017';
      color: var(--build-pending, orange);
    }
    /**
     * @description This custom render function should return NOTHING. If you
     * return content here it will override your slotted contents.
     * NOTE: renderer NOT REQUIRED for slotted content.
     */
    function addChangeEvent(customIndex, cellRef, $cell) {
      // $cell.record gives us us direct information related to this row
      const record = $cell.record;
      // $cell.dom() gives us direct access to zg-cell DOM contents
      const selectRef = cellRef.querySelector('select');
      selectRef.addEventListener('change', e => {
        const changeValue = e.target.value;
        if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
        else alert('Resetting cache');
      });
    }
    
    // Init
    // ----------------------------------
    /* Get the ZG instance */
    const zgRef = document.querySelector('zing-grid')
    // Add click event listener, so you can drill into another page on row click
    zgRef.addEventListener('row:click', e => {
      console.log('row clicked', e.detail);
    });