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.

Search Enabled Grid

Here is a complete grid with searching capabilities enabled:

External Input

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');

External Search Enabled Grid

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

Remove Column Search

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>

Search Removed on Certain Columns Grid

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

Related Resources

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

• Adding Features Guide
• API Search Methods List
• Attribute List