Wijgrid provides built-in filtering features that do not require you to write a lot of code. To enable data filtering at runtime, set the showFilter option to true. (The default value is false.) When set to true, a filter row appears under the column header row.

To filter data at run time, click the drop-down arrow to the right of the filter box on the column that you want to filter, and select the type of filter you want to use, then enter the value against which to filter. To clear the filter, click the drop-down arrow again and select No filter.

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
             showFilter: true,
                data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
</script>

Set filter values using the filterValue option. If you do not explicitly set a value, it uses the default value of the column's data type.

Set filter operators using the filterOperator option. The default operator is Contains, but you can also use any of the operators in the following table.

You can also localize or customize the filterType text. See Custom Grid Strings for more information.