Vue Data GridBigInt Filter

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

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");

export function getData() {
    return [
        { account: 'Alpha', ledgerId: 9007199254740993n, balance: 12000000000000000n },
        { account: 'Bravo', ledgerId: 9007199254740995n, balance: 8999999999999999n },
        { account: 'Charlie', ledgerId: 9007199254741001n, balance: 23000000000000000n },
        { account: 'Delta', ledgerId: 9007199254741023n, balance: 45000000000000000n },
        { account: 'Echo', ledgerId: 9223372036854775807n, balance: 100000000000000000n },
        { account: 'Foxtrot', ledgerId: 9223372036854775813n, balance: 110000000000000000n },
    ];
}

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:

<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 Copy Link

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

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.

Custom Parsing Copy Link

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 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 and by the Advanced Filter when displaying an operand, which means an entered value is echoed back in the formatter's format rather than exactly as typed.

<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 runs the same callbacks to read and write its operands; params.source is 'advancedFilter' there and 'columnFilter' here.

BigInt Filter Model Copy Link

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

BigInt Filter Options Copy Link

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

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:

• Apply, Clear, Reset and Cancel Buttons
• Applying the UI Model