External Filter Input(s)
Adding an external filtering is easy. You just need two two things.
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 anddata-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
Api method
filterColumn
- https://www.zinggrid.com/docs/api-methods#ColumnFilter features - https://www.zinggrid.com/features/filter