---
product: "AG Grid"
title: "BigInt Filter"
description: "BigInt Filters allow you to filter bigint data without precision loss."
framework: vue
version: "36.2.0"
related:
    - title: "Text Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-text/"
    - title: "Number Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-number/"
    - title: "Date Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-date/"
    - title: "Set Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-set/"
    - title: "Multi Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-multi/"
    - title: "Filter Conditions"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-conditions/"
    - title: "Applying Filters"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-applying/"
    - title: "Filter API"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<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 },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 140,
      editable: true,
    });
    const rowData = ref<any[] | null>(getData());

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: BigInt Filter](https://www.ag-grid.com/archive/36.2.0/examples/filter-bigint/bigint-filter/vue3/)

## 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/vue-data-grid/filter-set/#suppress-set-filter-by-default). It can also be configured explicitly as shown below:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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/vue-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/vue-data-grid/floating-filters/) and by the [Advanced Filter](https://www.ag-grid.com/archive/36.2.0/vue-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
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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/vue-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/vue-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/vue-data-grid/filter-applying/#apply-clear-reset-and-cancel-buttons)
- [Applying the UI Model](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/filter-applying/#applying-the-ui-model)