Advanced Features

React Data GridBigInt Filter

BigInt Filters allow you to filter bigint data without precision loss.

Enabling BigInt Filters Copy Link

The BigInt Filter is the default filter used for columns with cellDataType: 'bigint' when the Set Filter is Disabled by Default. It can also be configured explicitly as shown below:

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'totalBigInt',
        cellDataType: 'bigint',
        filter: true,
    },
    {
        field: 'ledgerId',
        filter: 'agBigIntColumnFilter',
    },
]);

<AgGridReact columnDefs={columnDefs} />

BigInt Filter Parameters Copy Link

BigInt Filters are configured through the filterParams attribute of the column definition (IBigIntFilterParams interface):

allowedCharPatternCopy Link
string
When specified, the input field will be of type text, and this will be used as a regex of all the characters that are allowed to be typed. This will be compared against any typed character and prevent the character from appearing in the input if it does not match.
bigintFormatterCopy Link
Function
Typically used alongside allowedCharPattern, this provides a custom formatter to convert the bigint value in the filter model into a string to be used in the filter input. This is the inverse of the bigintParser.
bigintParserCopy Link
Function
Typically used alongside allowedCharPattern, this provides a custom parser to convert the value entered in the filter inputs into a bigint that can be used for comparisons.
buttonsCopy Link
FilterAction[]
Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are:
  • 'apply': If the Apply button is present, the filter is only applied after the user hits the Apply button.
  • 'clear': The Clear button will clear the (form) details of the filter without removing any active filters on the column.
  • 'reset': The Reset button will clear the details of the filter and any active filters on that column.
  • 'cancel': The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model.
  • closeOnApplyCopy Link
    boolean
    default: false
    If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to true.
    debounceMsCopy Link
    number
    Overrides the default debounce time in milliseconds for the filter. Defaults are:
  • TextFilter and NumberFilter: 500ms. (These filters have text field inputs, so a short delay before the input is formatted and the filtering applied is usually appropriate).
  • DateFilter and SetFilter: 0ms
  • defaultJoinOperatorCopy Link
    JoinOperator
    By default, the two conditions are combined using AND. You can change this default by setting this property. Options: AND, OR
    defaultOptionCopy Link
    string
    The default filter option to be selected.
    filterOptionsCopy Link
    (IFilterOptionDef | ISimpleFilterModelType)[]
    Array of filter options to present to the user.
    filterPlaceholderCopy Link
    FilterPlaceholderFunction | string
    Placeholder text for the filter textbox.
    inRangeInclusiveCopy Link
    boolean
    If true, the 'inRange' filter option will include values equal to the start and end of the range.
    includeBlanksInEqualsCopy Link
    boolean
    If true, blank (null or undefined) values will pass the 'equals' filter option.
    includeBlanksInGreaterThanCopy Link
    boolean
    If true, blank (null or undefined) values will pass the 'greaterThan' and 'greaterThanOrEqual' filter options.
    includeBlanksInLessThanCopy Link
    boolean
    If true, blank (null or undefined) values will pass the 'lessThan' and 'lessThanOrEqual' filter options.
    includeBlanksInNotEqualCopy Link
    boolean
    If true, blank (null or undefined) values will pass the 'notEqual' filter option.
    includeBlanksInRangeCopy Link
    boolean
    If true, blank (null or undefined) values will pass the 'inRange' filter option.
    maxNumConditionsCopy Link
    number
    default: 2
    Maximum number of conditions allowed in the filter.
    numAlwaysVisibleConditionsCopy Link
    number
    default: 1
    By default only one condition is shown, and additional conditions are made visible when the previous conditions are entered (up to maxNumConditions). To have more conditions shown by default, set this to the number required. Conditions will be disabled until the previous conditions have been entered. Note that this cannot be greater than maxNumConditions - anything larger will be ignored.
    readOnlyCopy Link
    boolean
    default: false
    If set to true, disables controls in the filter to mutate its state. Normally this would be used in conjunction with the Filter API.

    Input Parsing and Validation Copy Link

    The BigInt Filter accepts decimal integer syntax only:

    • 500 and 500n are both accepted and parse to 500n.
    • Hex, binary, decimals and scientific notation are rejected.
    • Invalid input is handled via standard validation and does not crash the grid.

    BigInt Filter Model Copy Link

    The Filter Model describes the current state of the applied BigInt Filter:

    filterTypeCopy Link
    'bigint'
    Filter type is always 'bigint'
    filterCopy Link
    string | null
    The bigint value(s) associated with the filter. Custom filters can have no values (hence both are optional). Range filter has two values (from and to), where filter acts as a from value.
    filterToCopy Link
    string | null
    Range filter to value.
    ISimpleFilterModelType | null
    One of the filter options, e.g. 'equals'

    BigInt Filter Options Copy Link

    The BigInt Filter presents the same list of Filter Options as the Number Filter:

    Option NameOption KeyIncluded by Default
    EqualsequalsYes
    Does not equalnotEqualYes
    Greater thangreaterThanYes
    Greater than or equal togreaterThanOrEqualYes
    Less thanlessThanYes
    Less than or equal tolessThanOrEqualYes
    BetweeninRangeYes
    BlankblankYes
    Not blanknotBlankYes
    Choose oneemptyNo

    The default option for the BigInt Filter is equals.

    Applying the BigInt Filter Copy Link

    Applying the BigInt Filter is described in more detail in the following sections:

    Next Up Copy Link

    Continue to the next section to learn about Date Filters.