Top
DataGrid - Filtering
DataGrid
The <DataGrid /> supports filtering, applied both locally or remotely. To display filters, you can use the uncontrolled defaultFilterValue or its controlled alternative, filterValue. Filtering is applied locally if the dataSource is local and remotely if the grid is configured with a remote/async dataSource. See Using a data source for more details on local vs remote data.
Starting with version 2.0.0, the filter editors have to be explicitly imported and specified in the columns.filterEditor property. If a filterEditor is not specified for a filterable column, the StringFilter is used.
This change makes the <DataGrid /> bundle ligther for people not using filtering or not using all the available filter types.
defaultFilterValue (and filterValue) should be an array with objects that each have the following keys:
  • name - the name or the id of the column for which the filter is applied. Mandatory.
  • type - the filter type. This determines the operators available for the specified filter. Mandatory.
  • operator - the current operator to apply. For example, for numbers, it can be any of the following: 'gt', 'gte', 'lt', 'lte', 'eq', 'neq'. Mandatory.
  • value - the current value for filtering. Optional - but most of the times it should be used.
  • active - a boolean flag whether the current filter should be active/applied or not. If not false, the filter will be applied. Optional.
Only the columns that have a matching object in the filter value are actually filterable. All other columns have filtering disabled.
If you have specified the uncontrolled defaultFilterValue and still want to disable filtering, you can explicitly provide enableFiltering=false to disable grid filtering.
We recommend you first use uncontrolled filtering via defaultFilterValue. Once you get a feel of how it works, and if you need controlled filtering, you can move on to using filterValue in combination with onFilterValueChange.
When using controlled filtering, make sure you update the filterValue by using the onFilterValueChange(filterValue) callback prop.
By default, the <DataGrid /> is scrolled to the top when filtering. To disable this behaviour, set scrollTopOnFilter=false.
Here's a list of the types the grid currently supports for filtering:
  • "string" - string/text filter. The following operators are supported:
    • "contains" - contains. Will filter the dataSource to only include items that for the current column have a value that contains the filter value.
    • "notContains" - not contains. Will filter the dataSource to only include items that for the current column have a value that does not contain the filter value.
    • "eq" - equals. Will filter the dataSource to only include items that for the current column have a value equal to the filter value.
    • "neq" - not equals. Will filter the dataSource to only include items that for the current column have a value not equal to the filter value.
    • "empty" - empty. Will filter the dataSource to only include items that for the current column have an empty value.
    • "notEmpty" - not empty. Will filter the dataSource to only include items that for the current column have a non empty value.
    • "startsWith" - starts with. Will filter the dataSource to only include items that for the current column have a value that starts with the filter value.
    • "endsWith" - ends with. Will filter the dataSource to only include items that for the current column have a value that ends with the filter value.
  • "number" - number filter. The following operators are supported:
    • "eq" - equals. Will filter the dataSource to only include items that for the current column have a value equal to the filter value.
    • "neq" - not equals. Will filter the dataSource to only include items that for the current column have a value not equal to the filter value.
    • "gt" - greater than. Will filter the dataSource to only include items that for the current column have a value greater than the filter value.
    • "gte" - greater than or equal. Will filter the dataSource to only include items that for the current column have a value greater than or equal to the filter value.
    • "lt" - less than. Will filter the dataSource to only include items that for the current column have a value less than the filter value.
    • "lte" - less than or equal. Will filter the dataSource to only include items that for the current column have a value less than or equal to the filter value.
  • "boolean" - boolean filter. The following operators are supported:
    • "eq" - equals. Will filter the dataSource to only include items that for the current column have a value equal to the filter value.
    • "neq" - not equals. Will filter the dataSource to only include items that for the current column have a value not equal to the filter value.
  • "select" - select filter. The following operators are supported:
    • "eq" - equals. Will filter the dataSource to only include items that for the current column have a value equal to the filter value.
    • "neq" - not equals. Will filter the dataSource to only include items that for the current column have a value not equal to the filter value.
You can specify one of the above types for each item in the filterValue array. Make sure you specify an operator supported by the filter type of your choice.
You can specify other filter types and operators as well. The above are just the default supported filter types & operators, which can either be enhanced or replaced altogether. See filterTypes for additional details.
Basically, the default filterTypes is just an object with keys being the name of the filter types and values being an object describing the filter types.
DataGrid.defaultProps.filterTypes = {
  string: {
    type: 'string',
    emptyValue: '',
    operators: [
      {
        'contains',
        fn: ({ value, filterValue, data }) => {
          return !filterValue ?
            true :
            value.indexOf(filterValue) != -1;
        }
      },
      {
        name: 'eq', fn: ({ value, filterValue }) => value === filterValue
      },
      ... other operators
    ]
  },
  boolean: {
    type: 'boolean',
    operators: [...]
  }
  ... other filter types
}
Filtering is performed remotely just by specifying a remote dataSource.
See Using a data source for more details on local vs remote data.
Using a function as a dataSource allows the developer to send the filtering information to the remote server in various ways - eg: appended to the query string; inside the request body, etc. In addition to the filtering information, when pagination is used, pagination data will also need to be sent to the remote endpoint, as well as any sorting data that may apply.
By supporting a function returning a Promise as a dataSource value, the <DataGrid /> offers all the flexibility one needs to make an async request to an endpoint in order to fetch data. Be it GraphQL, REST, jsonp calls, or any other form of async data fetching, you can use whatever you want and send the filtering info in any format to the server, as long as you return a Promise which is resolved to an array (or to an object that contains data: Array, count: Number).
Another neat feature of the DataGrid is that it allows you to specify a custom filter editor for each filterable column. See column.filterEditor for more details.
Below you can find an example of a custom filterType with a bool editor. For implementing a custom editor, use the filterEditor column property to specify a custom React.Component.