Search

Easily add searching capabilities to your grid by setting the search attribute on your <zing-grid> tag.

Default Search

Once you add the search attribute, a search icon will appear in the upper right hand corner of the grid.

Here is a complete grid with searching capabilities enabled:

Top

You can use an external input and our searchGrid('...') API method to dynamically search the grid from an external input, like so:

const zgRef = document.querySelector('zing-grid');
zgRef.searchGrid('stringToSearchGrid');

Here is a complete grid with external search enabled via the searchGrid('...') method:

Top

Search only a subset of columns by defining the [search="disabled"] attribute on columns you do not want to show up in search, like so:

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

Here is a complete grid with searching disabled on the "Img" column:

Top

Use the searchKey parameter to enable server search, like so:

<zg-param name="searchKey" value="search"></zg-param>

Here is a complete grid with server search enabled:

Top

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

[features: search]