How to add filter in ag-grid Angular?

Question

I want to implement a filter with a text box(like a search). I am trying to implement it as follows,

 this.columnDefs = [
  {
    field: 'athlete',
    filter: 'agSetColumnFilter',
  }]

The type of the field is string.

But this giving me something like this,

but I want like below where I can type and search.

Can any one pls suggest me help.Thanks.

Answer 1

You're using the agSetColumnFilter filter which allows you to select from a list of values to filter by. You need to use the agTextColumnFilter filter (see Here ).

Change your code to:

  this.columnDefs = [
  {
    field: 'athlete',
    floatingFilter: true
    filter: 'agSetColumnFilter',
  }]

Demo .