--- product: "AG Grid" title: "BigInt Filter" description: "BigInt Filters allow you to filter bigint data without precision loss." framework: angular version: "36.2.0" related: - title: "Text Filter" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-text/" - title: "Number Filter" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-number/" - title: "Date Filter" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-date/" - title: "Set Filter" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-set/" - title: "Multi Filter" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-multi/" - title: "Filter Conditions" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-conditions/" - title: "Applying Filters" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-applying/" - title: "Filter API" url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-api/" llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt" --- # BigInt Filter BigInt Filters allow you to filter `bigint` data without precision loss. #### BigInt Filter ```ts import { Component } from "@angular/core"; import { AgGridAngular } from "ag-grid-angular"; import { BigIntFilterModule, ClientSideRowModelModule, ColDef, ColGroupDef, GridApi, GridOptions, GridReadyEvent, ModuleRegistry, TextEditorModule, enableDevValidations, } from "ag-grid-community"; import { getData } from "./data"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableDevValidations(); } ModuleRegistry.registerModules([ ClientSideRowModelModule, TextEditorModule, BigIntFilterModule, ]); @Component({ selector: "my-app", standalone: true, imports: [AgGridAngular], template: ` `, }) export class AppComponent { columnDefs: ColDef[] = [ { field: "ledgerId", headerName: "Ledger ID (BigInt)", cellDataType: "bigint", filter: true, minWidth: 190, }, { field: "balance", headerName: "Balance (BigInt)", cellDataType: "bigint", filter: "agBigIntColumnFilter", minWidth: 190, }, { field: "account", minWidth: 150 }, ]; defaultColDef: ColDef = { flex: 1, minWidth: 140, editable: true, }; rowData: any[] | null = getData(); } ``` [Live example: BigInt Filter](https://www.ag-grid.com/archive/36.2.0/examples/filter-bigint/bigint-filter/angular/) ## Enabling BigInt Filters The BigInt Filter is the default filter used for columns with `cellDataType: 'bigint'` when the [Set Filter is Disabled by Default](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-set/#suppress-set-filter-by-default). It can also be configured explicitly as shown below: ```ts this.columnDefs = [ { field: 'totalBigInt', cellDataType: 'bigint', // BigInt Filter is used by default in Community version for bigInt columns filter: true, }, { field: 'ledgerId', // Explicitly configure column to use the BigInt Filter filter: 'agBigIntColumnFilter', }, ]; ``` ## BigInt Filter Parameters BigInt Filters are configured through the `filterParams` attribute of the column definition (`IBigIntFilterParams` interface): | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `allowedCharPattern` | `string` | | | | | `bigintFormatter` | `Function` | | | | | `bigintParser` | `Function` | | | | | `browserAutoComplete` | `boolean \| string` | | | | | `buttons` | `FilterAction[]` | | | | | `closeOnApply` | `boolean` | | | | | `debounceMs` | `number` | | | | | `defaultJoinOperator` | `JoinOperator` | | | | | `defaultOption` | `ScalarFilterOptionKey \| CustomFilterOptionKey` | | | | | `filterOptions` | `(IFilterOptionDef \| ScalarFilterOptionKey \| AdvancedFilterOnlyOptionKey)[]` | | | | | `filterPlaceholder` | `FilterPlaceholderFunction \| string` | | | | | `inRangeInclusive` | `boolean` | | | | | `includeBlanksInEquals` | `boolean` | | | | | `includeBlanksInGreaterThan` | `boolean` | | | | | `includeBlanksInLessThan` | `boolean` | | | | | `includeBlanksInNotEqual` | `boolean` | | | | | `includeBlanksInRange` | `boolean` | | | | | `maxNumConditions` | `number` | | | | | `numAlwaysVisibleConditions` | `number` | | | | | `readOnly` | `boolean` | | | | ## Input Parsing and Validation 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. ## Custom Parsing To accept other formats, such as hexadecimal, provide a `bigintParser` that converts the entered text to a `bigint` (return `null` for values it cannot parse). Pair it with `allowedCharPattern` so the extra characters can be typed into the filter input. The parsed value is what gets applied to filtering, and the same parser is used by the [Advanced Filter](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-advanced/) for `bigint` operands. Unless you also provide a `bigintFormatter`, have it accept a plain decimal too: without one, every input shows the stored value as a plain decimal and reads it back through this parser once edited. The filter model always stores the parsed value as a canonical decimal string, so provide a `bigintFormatter` — the inverse of the parser — to display stored values back in your own format. It is used by the filter inputs, by the [Floating Filter](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/floating-filters/) and by the [Advanced Filter](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-advanced/) when displaying an operand, which means an entered value is echoed back in the formatter's format rather than exactly as typed. ```ts this.columnDefs = [ { field: 'ledgerId', cellDataType: 'bigint', filter: 'agBigIntColumnFilter', filterParams: { allowedCharPattern: '\\dxXa-fA-F', bigintParser: (text) => { if (text == null || text.trim() === '') { return null; } try { return BigInt(text); } catch { // incomplete or invalid input (e.g. '0x') while typing return null; } }, }, }, ]; ``` The `bigintParser` and `bigintFormatter` are also passed the grid `api` and `context` as a second argument, along with the `column` and `colDef` they are working on. One callback set on `defaultColDef.filterParams` can therefore serve every column it applies to. The [Advanced Filter](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-advanced/) runs the same callbacks to read and write its operands; `params.source` is `'advancedFilter'` there and `'columnFilter'` here. ## BigInt Filter Model The Filter Model describes the current state of the applied BigInt Filter: | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `type` | `ScalarFilterOptionKey \| CustomFilterOptionKey \| null` | | | | | `filterType` | `'bigint'` | | | | | `filter` | `string \| null` | | | | | `filterTo` | `string \| null` | | | | ## BigInt Filter Options The BigInt Filter presents the same list of [Filter Options](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-conditions/#filter-options) as the Number Filter: | Option Name | Option Key | Included by Default | | --- | --- | --- | | Equals | `equals` | Yes | | Does not equal | `notEqual` | Yes | | Greater than | `greaterThan` | Yes | | Greater than or equal to | `greaterThanOrEqual` | Yes | | Less than | `lessThan` | Yes | | Less than or equal to | `lessThanOrEqual` | Yes | | Between | `inRange` | Yes | | Blank | `blank` | Yes | | Not blank | `notBlank` | Yes | | Choose one | `empty` | No | The default option for the BigInt Filter is `equals`. ## Applying the BigInt Filter Applying the BigInt Filter is described in more detail in the following sections: - [Apply, Clear, Reset and Cancel Buttons](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-applying/#apply-clear-reset-and-cancel-buttons) - [Applying the UI Model](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/filter-applying/#applying-the-ui-model)