Advanced Filtering
You can see the code by clicking the blue rectangular Show Editor View button above, and also edit the example in the code editor directly.
Overview
The above example makes use of some of the built in column filters provided in the react-data-grid-addons
package.
Available Editors
- Numeric filter - Used here in the ID column to filter columns of numberic values.
- Autocomplete Filter - Used here in the First and Last Name columns. Used to quickly search from the possible values of the rows
- Multi-Select Filter - Used here in the Job Title column. Can be used to easily filter multiple values.
- Single-Select Filter - Used here in the Job Area column. Allows filtering by only a single value.
Configuring the column
To make a given column filterable, set column.filterable = true
.
To configure which component to use as the column filterer set column.filterRenderer
property.
For example
{
key: "id",
name: "ID",
filterRenderer: NumericFilter
}
Configuring the autocomplete filter results
This function determines the values that will be displayed in the editors that display a list eg. the Autocomplete Editor.
/**
* @param string columnKey - Key property of the column being filtered
* @returns Array with list of valid filter values
*/
function getValidFilterValues(columnKey)