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:

Top

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:

Top

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:

Top

Server Search

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

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

Server Search Grid

Here is a complete grid with server search enabled:

Top

Related Resources

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