Filtering

You can easily filter your grid by setting the filter attribute on your <zing-grid> tag.

Default

Once you add the filter attribute, filter fields will appear under each head cell to make each column filterable.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

External Input

You can use an external input and use our API method filterColumn('...') to dynamically search the grid from an external input.
CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.filterColumn('columnIndex', 'columnFilterValue');

You can find documentation on column API methods here.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Type

Defining <zg-column> types will adjust the filter to the corresponding input type.
CloseCopy Copied
<zg-colgroup>
  <!-- default type is text -->
  <zg-column index="title"></zg-column>
  <!-- define a select dropdown as a filter -->
  <zg-column
    index="genre"
    type="select"
    type-select-options="Crime, Drama, Romance, Sci-Fi, Western, Mystery, Thriller">
  </zg-column>
</zg-colgroup>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Remove Column Filter

You can remove a column filter by defining the filter="false" attribute on your columns.
CloseCopy Copied
<zg-column filter="false"></zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading