Docs

Filtering

Easily enable filtering on your grid by setting the filter attribute on your <zing-grid> tag.

Default Filter Settings

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

Default Filter Grid

Here is a complete grid with default filter settings:

Top

External Input

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

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

External Input Grid

Here is a complete grid with filtering from an external input enabled:

Top

Filter Type

Defining <zg-column> types will adjust the filter to the corresponding input type. For example, setting type="select" will create a dropdown list with filtering options:

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

Filter by Type Grid

Here is a complete grid with type="select" on <zg-column> to display a dropdown of filtering options:

Top

Remove Column Filter

You can remove a column filter by defining the filter="disabled" attribute on specific columns, like so:

<zg-column filter="disabled"></zg-column>

Filter Disabled on Specific Columns Grid

Here is a complete grid with filtering disabled on only two of the grid's three columns:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: filtering]