ZingGrid: Adding Custom Filter Functionality

External Filter Input(s)

Adding an external filtering is easy. You just need two two things.

1. An external input field. This could be text or a checkbox for on/off. We use data-filter-index to define the column index to target and data-filter  to set the filter value we want to apply to that column.

<label for="filterEarth">Filter By Origin (Earth): </label>
<input type="checkbox" id="filterEarth" data-filter-index="origin" data-filter="earth">
<br>
<label for="filterByAlien">Filter By Species (Alien): </label>
<input type="checkbox" id="filterByAlien" data-filter-index="species" data-filter="alien">
<br>
<label for="filterByGender">Filter By Gender (Female): </label>
<input type="checkbox" id="filterByGender" data-filter-index="gender" data-filter="female">

2) Our API method filterColumn('columnIndex', 'filterString') hooked up to that input field. 

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

Demo link here 🔗 

Apply Filter to Subset of Columns

You can apply search to a column subset by adding the filter="false" attribute to each zg-column . You must define the columns you do not want filter enabled on.

<!-- excluded columns from filter -->
<zg-column index="name" filter="disabled"></zg-column>
<zg-column index="job" filter="disabled"></zg-column>
<zg-column index="origin"></zg-column>
<zg-column index="species"></zg-column>
<zg-column index="gender"></zg-column>

Demo link here 🔗 

Coming Soon: Apply Custom Filter Function

Coming Soon: Apply Filter to Nested Grid

Related Resources

1. Api method filterColumn  - https://www.zinggrid.com/docs/api-methods#Column

2. Filter features - https://www.zinggrid.com/docs/features/filtering