Text and Number Filters

In this video, we learn the basics of column filters, starting with text and number filters.

We start by adding a column to the last name column definition in App.js:

// src/App.js
{
    headerName: "Last",
    field: "lastName",
    sortable: true,
    filter: "agTextColumnFilter",
},

Run npm start and navigate to localhost:3000. You should see a basic text filter on the last name column. Try it out!

We can also manipulate this filter and hide certain options:

// src/App.js
{
   headerName: "Last",
   field: "lastName",
   sortable: true,
   filter: "agTextColumnFilter",
   filterParams: {
      filterOptions: ["contains", "notContains"],
        suppressAndOrCondition: true
  }
},

The filter options array lets us control which options show, while suppressAndOrCondition hides that second filter parameter.

Next, we add a number filter to the amount column definition:

// src/App.js
{
  headerName: "Amount",
  field: "amount",
  filter: "agNumberColumnFilter",
  sortable: true,
  valueFormatter: function(params) {
    // Add a trailing zero
    return params.value.toFixed(2);
   }
}

We can add similar filter options to the number filter; feel free to experiment!

Up next, we'll learn about date filters.