{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/filter-conditions/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section describes the Filter Conditions shared by the three Simple Filters provided by the grid - "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-text/"},"children":[{"type":"text","value":"Text Filter"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-number/"},"children":[{"type":"text","value":"Number Filter"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-date/"},"children":[{"type":"text","value":"Date Filter"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each Simple Filter follows the same layout. The filter consists of one or more Filter Conditions separated by zero or more Join Operators."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only layout difference is the type of input field presented to the user: a text field for Text Filters, a number field for Number Filters, and a date picker field for Date Filters."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-conditions/resources/filter-panel-components.png","alt":"Filter Panel Component","width":"40rem","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filter-options","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filter-options","ariaLabel":"filter options permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Filter Options"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each filter provides a dropdown list of filter options to select from. Each filter option represents a filtering strategy, e.g. 'equals', 'not equals', etc."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each filter's default filter options can be found on their respective pages:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-text/#text-filter-options"},"children":[{"type":"text","value":"Text Filter Options"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-number/#number-filter-options"},"children":[{"type":"text","value":"Number Filter Options"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-date/#date-filter-options"},"children":[{"type":"text","value":"Date Filter Options"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Information on defining "},{"type":"element","tagName":"a","properties":{"href":"#custom-filter-options"},"children":[{"type":"text","value":"Custom Filter Options"}]},{"type":"text","value":" can be found below."}]},{"type":"element","tagName":"h2","properties":{"id":"filter-value","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filter-value","ariaLabel":"filter value permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Filter Value"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each filter option takes zero (a possibility with custom options), one (for most) or two (for 'in range') values. The value type depends on the filter type, e.g. the Date Filter takes Date values."}]},{"type":"element","tagName":"h2","properties":{"id":"number-of-conditions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#number-of-conditions","ariaLabel":"number of conditions permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Number of Conditions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default each filter initially only displays one Filter Condition. When the user completes all the visible Filter Conditions, another Filter Condition becomes visible. When the user clears the last completed Filter Condition, any empty Filter Conditions on either side are hidden if required. Additionally, when the filter is closed, any empty Filter Conditions not at the end are removed if required."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The maximum number of Filter Conditions can be controlled by setting the Filter Parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxNumConditions"}]},{"type":"text","value":" (the default value is two)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to always display a certain number of Filter Conditions by setting the Filter Parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numAlwaysVisibleConditions"}]},{"type":"text","value":". In this case, Filter Conditions at the end will be disabled until the previous Filter Condition has been completed."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ISimpleFilterParams","config":"{\"description\":\"\"}","names":"[\"maxNumConditions\", \"numAlwaysVisibleConditions\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"join-operator","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#join-operator","ariaLabel":"join operator permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Join Operator"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Join Operator decides how the Filter Conditions are joined, using either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AND"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"OR"}]},{"type":"text","value":". All Join Operators have the same value, with only the first one being editable when there are multiple."}]},{"type":"element","tagName":"h2","properties":{"id":"example-simple-filter-conditions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-simple-filter-conditions","ariaLabel":"example simple filter conditions permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Simple Filter Conditions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates Filter Condition configuration that can be applied to any Simple Filter."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column shows a Text Filter with default behaviour for all options."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column shows a Text Filter with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterOptions"}]},{"type":"text","value":" set to show a different list of available options, and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultOption"}]},{"type":"text","value":" set to change the default option selected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" column shows a Text Filter with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxNumConditions"}]},{"type":"text","value":" set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"10"}]},{"type":"text","value":" so that up to ten conditions can be entered."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" column has a Number Filter with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numAlwaysVisibleConditions"}]},{"type":"text","value":" set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2"}]},{"type":"text","value":" so that two conditions are always shown. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultJoinOperator"}]},{"type":"text","value":" is also set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'OR'"}]},{"type":"text","value":" rather than the default ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'AND'"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column has a Date Filter with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxNumConditions"}]},{"type":"text","value":" set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":", so that only the first condition is shown."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple Filter Conditions","name":"simple-filter-options","type":"generated","options":"{ \"exampleHeight\": 560 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-filter-options","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-filter-options","ariaLabel":"custom filter options permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Filter Options"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For applications that have bespoke filtering requirements, it is also possible to add new custom filtering options to the number, text and date filters. For example, a 'Not Equal (with Nulls)' filter option could be included alongside the built in 'Not Equal' option."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Custom filter options are supplied to the grid via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.filterOptions"}]},{"type":"text","value":" and must conform to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"IFilterOptionDef"}]},{"type":"text","value":" interface:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IFilterOptionDef"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"displayKey"}]},{"type":"text","value":" should contain a unique key value that doesn't clash with the built-in filter keys. A default "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"displayName"}]},{"type":"text","value":" should also be provided but can be replaced by a locale-specific value using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/localisation/#locale-callback"},"children":[{"type":"text","value":"getLocaleText"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The custom filter logic is implemented through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"predicate"}]},{"type":"text","value":" function, which receives the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValues"}]},{"type":"text","value":" typed by the user along with the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellValue"}]},{"type":"text","value":" from the grid, and returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The number of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValues"}]},{"type":"text","value":" and corresponding inputs is controlled by the optional property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numberOfInputs"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"  all inputs are hidden, and an empty array of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValues"}]},{"type":"text","value":" is provided to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"predicate"}]},{"type":"text","value":" function."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If unspecified or set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" a single input is displayed, and one-element array of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValues"}]},{"type":"text","value":" are provided to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"predicate"}]},{"type":"text","value":" function."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2"}]},{"type":"text","value":" two inputs are displayed, and a two-element array of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValues"}]},{"type":"text","value":" is provided to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"predicate"}]},{"type":"text","value":" function."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"FilterOptionDef"}]},{"type":"text","value":"s can be supplied alongside the built-in filter option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" keys as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    columnDefs: [\n|        {\n|            field: 'age',\n|            filter: 'agNumberColumnFilter',\n|            filterParams: {\n|                filterOptions: [\n|                    'lessThan',\n|                    {\n|                        displayKey: 'lessThanWithNulls',\n|                        displayName: 'Less Than with Nulls',\n|                        predicate: ([filterValue], cellValue) => cellValue == null || cellValue < filterValue,\n|                    },\n|                    'greaterThan',\n|                    {\n|                        displayKey: 'greaterThanWithNulls',\n|                        displayName: 'Greater Than with Nulls',\n|                        predicate: ([filterValue], cellValue) => cellValue == null || cellValue > filterValue,\n|                    },\n|                    {\n|                        displayKey: 'betweenExclusive',\n|                        displayName: 'Between (Exclusive)',\n|                        predicate: ([fv1, fv2], cellValue) => cellValue == null || fv1 < cellValue && fv2 > cellValue,\n|                        numberOfInputs: 2,\n|                    }\n|                ]\n|            }\n|        }\n|    ]\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates several custom filter options:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column contains four custom filter options managed by a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-text/"},"children":[{"type":"text","value":"Text Filter"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Starts with \"A\""}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Starts with \"N\""}]},{"type":"text","value":" have no inputs; their predicate function is provided zero values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Regular Expression"}]},{"type":"text","value":" has one input; its predicate function is provided one value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Between (Exclusive)"}]},{"type":"text","value":" has two inputs; its predicate function is provided two values."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" column contains five custom filter options managed by a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-number/"},"children":[{"type":"text","value":"Number Filter"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Even Numbers"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Odd Numbers"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Blanks"}]},{"type":"text","value":" have no inputs; their predicate function is provided zero values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Age 5 Years Ago"}]},{"type":"text","value":" has one input; its predicate function is provided one value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Between (Exclusive)"}]},{"type":"text","value":" has two inputs; its predicate function is provided two values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Choose One"}]},{"type":"text","value":" is a built-in option and acts as an inactive filter option."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxNumConditions=1"}]},{"type":"text","value":" option is used to only display one Filter Condition."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column contains three custom filter options managed by a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-date/"},"children":[{"type":"text","value":"Date Filter"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Equals (with Nulls)"}]},{"type":"text","value":" has one inputs; its predicate function is provided one value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Leap Year"}]},{"type":"text","value":" has no inputs; its predicate function is provided zero values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Between (Exclusive)"}]},{"type":"text","value":" has two inputs; its predicate function is provided two values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"NOTE: a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" is still required for the built-in date filter options, i.e. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"equals"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column includes:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"* Not Equals (No Nulls) *"}]},{"type":"text","value":" filter which also removes null values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"it also demonstrates how localisation can be achieved via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.getLocaleText(params)"}]},{"type":"text","value":" callback function, where the default value is replaced for the filter option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'notEqualNoNulls'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Saving and restoring custom filter options via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getFilterModel()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.setFilterModel()"}]},{"type":"text","value":" can be tested using the provided buttons."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Filter Options","name":"custom-filter-options","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"customising-filter-placeholder-text","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customising-filter-placeholder-text","ariaLabel":"customising filter placeholder text permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Customising Filter Placeholder Text"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Filter placeholder text can be customised on a per column basis using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.filterPlaceholder"}]},{"type":"text","value":" within the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":". The placeholder can be either a string or a function as shown in the snippet below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'age',\n            filter: 'agNumberColumnFilter',\n            filterParams: {\n                filterPlaceholder: 'Age...'\n            }\n        },\n        {\n            field: 'total',\n            filter: 'agNumberColumnFilter',\n            filterParams: {\n                filterPlaceholder: (params) => {\n                    const { filterOption, placeholder } = params;\n                    return `${filterOption} ${placeholder}`;\n                }\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterPlaceholder"}]},{"type":"text","value":" is a function, the parameters are made up of the following:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IFilterPlaceholderFunctionParams","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows the various ways of specifying filter placeholders. Click on the filter menu for the different columns in the header row to see the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column shows the default placeholder of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Filter..."}]},{"type":"text","value":" with no configuration"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column shows the string "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Country..."}]},{"type":"text","value":" for all filter options"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" column shows the filter option key with the default placeholder eg, for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Contains"}]},{"type":"text","value":" filter option, it shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"contains - Filter..."}]},{"type":"text","value":". The "},{"type":"element","tagName":"a","properties":{"href":"#simple-filter-options"},"children":[{"type":"text","value":"filter option keys"}]},{"type":"text","value":" are listed in the table above."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Total"}]},{"type":"text","value":" column shows the filter option name with the suffix "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"total"}]},{"type":"text","value":" eg, for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Equals"}]},{"type":"text","value":" filter option, it shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Equals total"}]},{"type":"text","value":". The "},{"type":"element","tagName":"a","properties":{"href":"#simple-filter-options"},"children":[{"type":"text","value":"filter option names"}]},{"type":"text","value":" are listed in the table above."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter Placeholder Text","name":"filter-placeholder-text","type":"generated","options":"{ \"exampleHeight\": 560 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/filter-applying/"},"children":[{"type":"text","value":"Applying Filters"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Filter Conditions","version":null,"enterprise":null,"description":null},"headings":[{"id":"filter-options","depth":2,"value":"Filter Options"},{"id":"filter-value","depth":2,"value":"Filter Value"},{"id":"number-of-conditions","depth":2,"value":"Number of Conditions"},{"id":"join-operator","depth":2,"value":"Join Operator"},{"id":"example-simple-filter-conditions","depth":2,"value":"Example: Simple Filter Conditions"},{"id":"custom-filter-options","depth":2,"value":"Custom Filter Options"},{"id":"customising-filter-placeholder-text","depth":2,"value":"Customising Filter Placeholder Text"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/filter-conditions","pageName":"filter-conditions"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}