Docs

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.

Top

External Input

You can use an external input and use our API method filterColumn('...') to dynamically search the grid from an external input.

const zgRef = document.querySelector('zing-grid');
zgRef.filterColumn('columnIndex', 'columnFilterValue');

You can find documentation on column API methods here.

Top

Type

Defining <zg-column> types will adjust the filter to the corresponding input type.

<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>
Top

Remove Column Filter

You can remove a column filter by defining the filter="false" attribute on your columns.

<zg-column filter="false"></zg-column>
Top