This sample illustrates the Grid's filtering bar feature, utilizing custom components in the filter cells
through the filterTemplate feature. This functionality allows users to filter records based on specified
criteria, displaying a reduced set of data. To enable filtering, set the allowFiltering property to true,
which renders a filter bar row next to the header. Users can then filter data by entering text into the cells of
this row.
The filterTemplate feature in the Syncfusion® EJ2 React Grid allows customization of the controls in
the filter bar. By default, a text box appears in the filter bar cell. In this demo, the Grid showcases various
custom input components: a custom input component for the ID, Name and Price columns, and a Syncfusion®
DropDownList for the Discontinued column, all achieved through
the filter template feature. You can customize the filter components in the filter cells by setting the filterTemplate property for each column. The Unit Stock column uses the default filter bar cell with
operator functionality.
Injecting Module:
Grid features are divided into individual modules. To utilize the filtering feature, inject the Filter module into the services. For more details on configuring filters, refer to the
relevant
documentation section.