React
Using ag-Grid with React: Filters
  •  

Text and Number Filters

Let's the learn the basics of 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.