<ReactDataGrid /> 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.StringFilter is used.<ReactDataGrid /> bundle lighter 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.defaultFilterValue and still want to disable filtering, you can explicitly provide enableFiltering=false to disable grid filtering.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.filterValue by using the onFilterValueChange(filterValue) callback prop.<ReactDataGrid /> is scrolled to the top when filtering. To disable this behavior, set scrollTopOnFilter=false.enableColumnFilterContextMenu prop, as you can see in the example bellow."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."inrange" - in range. Will filter the dataSource to only include items that for the current column have a number value that is inside the range specified by the filter value."notinrange" - in range. Will filter the dataSource to only include items that for the current column have a number value that is outside the range specified by 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."inlist" - in list. Will filter the dataSource to only include items that for the current column have a value that is in the list of items described by the filter value."notinlist" - not in list. Will filter the dataSource to only include items that for the current column have a value that is NOT in the list of items described by the filter value."date" - date filter. The following operators are supported:"after" - after. Will filter the dataSource to only include items that for the current column have a date value that is after the filter value date."afterOrOn" - after or on. Will filter the dataSource to only include items that for the current column have a date value that is after the filter value date or in the same day."before" - before. Will filter the dataSource to only include items that for the current column have a date value that is before the filter value date."beforeOrOn" - before or on. Will filter the dataSource to only include items that for the current column have a date value that is before the filter value date or in the same day."eq" - equals. Will filter the dataSource to only include items that for the current column have a date value that is in the same day as the filter value."neq" - not equals. Will filter the dataSource to only include items that for the current column have a date value that is NOT in the same day as the filter value."inrange" - in range. Will filter the dataSource to only include items that for the current column have a date value that is inside the range specified by the filter value dates."notinrange" - in range. Will filter the dataSource to only include items that for the current column have a date value that is outside the range specified by the filter value dates.filterValue array. Make sure you specify an operator supported by the filter type of your choice.filterTypes for additional details.filterTypes is just an object with keys being the name of the filter types and values being an object describing the filter types.ReactDataGrid.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
}dataSource.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.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).column.filterEditor for more details.filterEditor column property to specify a custom React.Component.<ReactDataGrid />.window.moment (See momentjs) available. This is in order to keep the <ReactDataGrid /> lighter in terms of code size for people who don't need date filtering.dateFormat: string prop, which will be used for parsing and comparing dates with momentjs.moment property on the window objectimport moment from 'moment';
window.moment = moment<ReactDataGrid /> also supports range operators in case of date and number filters filters: inrange and notinrange.filterEditor for each column, you can have a filterEditorProps to control the behavior of the editor.filterEditorProps can be a function, which should return a an object to be used as the props for the filter editor. This is especially useful when implementing dynamic functionality or configuring the props for inrange/notinrange editors.type="select" filters, with inlist and notinlist operators.multiple=true in order to allow multiple selections and wrapMultiple=false in order to not wrap selected values on a newline.filterEditorProps prop.