features
Menu
Menu

Filtering

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

On This Page

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

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

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading