Filtering by External Input

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body .controls--container {
      padding: 1rem;
    }


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

<body class="zg-body">
  <div class="inner--container">
    <!-- toggle controls -->
    <div class="controls--container">
      <div>
        <label for="filter1">Filter By Genre (Crime): </label>
        <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
        <br>
        <label for="filter2">Filter By Year (1994): </label>
        <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
      </div>
    </div>
    <zing-grid caption="HTML filter Ex" filter viewport-stop>
      <zg-data data=' [{
          "title": "The Shawshank Redemption", 
          "year": "1994", 
          "genre": "Crime, Drama"
        }, {
          "title": "The Godfather", 
          "year": "1972", 
          "genre": "Crime, Drama"
        }, {
          "title": "Forest Gump", 
          "year": "1994", 
          "genre": "Comedy, Drama, Romance"
        }, {
          "title": "The Matrix", 
          "year": "1999", 
          "genre": "Action, Sci-Fi"
        }, {
          "title": "Inception", 
          "year": "2010", 
          "genre": "Action, Adventure, Sci-Fi"
        }, {
          "title": "Pulp Fiction", 
          "year": "1994", 
          "genre": "Crime, Drama"
        }, {
          "title": "Django Unchained", 
          "year": "2012", 
          "genre": "Drama, Western"
        }, {
          "title": "The Prestige", 
          "year": "2006", 
          "genre": "Drama, Mystery, Sci-Fi"
        }, {
          "title": "Memento", 
          "year": "2000", 
          "genre": "Mystery, Thriller"
        }, {
          "title": "Gone Girl", 
          "year": "2014", 
          "genre":"Crime, Drama, Mystery"
        }]'>
      </zg-data>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // element references
    const filterInputs = document.querySelectorAll('input[type="checkbox"]');
    const zgRef = document.querySelector('zing-grid');

    // function declarations
    function _filterGrid(e) {
      let columnIndex = e.target.getAttribute('data-filter-index');
      let columnFilterValue = e.target.getAttribute('data-filter');
      let filterOn = e.target.checked;

      // if checked off, make sure to turn off filter 
      if (!filterOn) columnFilterValue = '';

      // API method to actually filter
      zgRef.filterColumn(columnIndex, columnFilterValue);
    }

    // add event listeners
    [...filterInputs].forEach(filterInput => {
      filterInput.addEventListener('change', _filterGrid);
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <div class="inner--container">
    <!-- toggle controls -->
    <div class="controls--container">
      <div>
        <label for="filter1">Filter By Genre (Crime): </label>
        <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
        <br>
        <label for="filter2">Filter By Year (1994): </label>
        <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
      </div>
    </div>
    <zing-grid caption="HTML filter Ex" filter viewport-stop>
      <zg-data data=' [{
          "title": "The Shawshank Redemption", 
          "year": "1994", 
          "genre": "Crime, Drama"
        }, {
          "title": "The Godfather", 
          "year": "1972", 
          "genre": "Crime, Drama"
        }, {
          "title": "Forest Gump", 
          "year": "1994", 
          "genre": "Comedy, Drama, Romance"
        }, {
          "title": "The Matrix", 
          "year": "1999", 
          "genre": "Action, Sci-Fi"
        }, {
          "title": "Inception", 
          "year": "2010", 
          "genre": "Action, Adventure, Sci-Fi"
        }, {
          "title": "Pulp Fiction", 
          "year": "1994", 
          "genre": "Crime, Drama"
        }, {
          "title": "Django Unchained", 
          "year": "2012", 
          "genre": "Drama, Western"
        }, {
          "title": "The Prestige", 
          "year": "2006", 
          "genre": "Drama, Mystery, Sci-Fi"
        }, {
          "title": "Memento", 
          "year": "2000", 
          "genre": "Mystery, Thriller"
        }, {
          "title": "Gone Girl", 
          "year": "2014", 
          "genre":"Crime, Drama, Mystery"
        }]'>
      </zg-data>
    </zing-grid>
  </div>
</body>

</html>

.zg-body .controls--container {
  padding: 1rem;
}

// element references
const filterInputs = document.querySelectorAll('input[type="checkbox"]');
const zgRef = document.querySelector('zing-grid');

// function declarations
function _filterGrid(e) {
  let columnIndex = e.target.getAttribute('data-filter-index');
  let columnFilterValue = e.target.getAttribute('data-filter');
  let filterOn = e.target.checked;

  // if checked off, make sure to turn off filter 
  if (!filterOn) columnFilterValue = '';

  // API method to actually filter
  zgRef.filterColumn(columnIndex, columnFilterValue);
}

// add event listeners
[...filterInputs].forEach(filterInput => {
  filterInput.addEventListener('change', _filterGrid);
});