Global Filtering Guide

Client-Side vs. Server-Side Filtering

Server-side filtering becomes necessary when datasets are too large to load into the client browser efficiently.

Client-side filtering handles approximately 100,000 rows with acceptable performance for filtering, sorting, pagination, and grouping. See Pagination Guide for detailed performance considerations.

Performance depends on table complexity, column count, and data size. Consider these constraints:

1. Server query time and cost
2. Fetch payload size
3. Client memory consumption

Client-side filtering is sufficient for most tables. Switch to server-side filtering when performance degrades.

Manual Server-Side Global Filtering

Pass pre-filtered data to the table. The getFilteredRowModel option is not needed. Set manualFiltering: true to disable client-side filtering.

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    data: this.data(),
    columns,
    manualFiltering: true,
  }))
}

Client-Side Global Filtering

Pass getFilteredRowModel to the table options:

import {createAngularTable} from "@qualcomm-ui/angular/table"
import {getCoreRowModel, getFilteredRowModel} from "@qualcomm-ui/core/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
  }))
}

Global Filter Function

The globalFilterFn option specifies the filter function for global filtering. Pass a built-in filter function name, a custom filter function name from tableOptions.filterFns, or a custom filter function.

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    data: this.data(),
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    globalFilterFn: "text",
  }))
}

10 built-in filter functions:

• includesString - Case-insensitive string inclusion
• includesStringSensitive - Case-sensitive string inclusion
• equalsString - Case-insensitive string equality
• equalsStringSensitive - Case-sensitive string equality
• arrIncludes - Item inclusion within an array
• arrIncludesAll - All items included in an array
• arrIncludesSome - Some items included in an array
• equals - Object/referential equality (Object.is/===)
• weakEquals - Weak object/referential equality (==)
• inNumberRange - Number range inclusion

Pass custom filter functions directly to globalFilterFn.

Global Filter State

Access the global filter state via table.getState().globalFilter. Manage state externally using Angular signals and the state.globalFilter and onGlobalFilterChange options.

import {signal} from "@angular/core"

// ...
export class ExampleComponent {
  globalFilter = signal<string>("")

  table = createAngularTable(() => ({
    state: {
      globalFilter: this.globalFilter(),
    },
    onGlobalFilterChange: (updaterOrValue) => {
      const newFilter =
        typeof updaterOrValue === "function"
          ? updaterOrValue(this.globalFilter())
          : updaterOrValue
      this.globalFilter.set(newFilter)
    },
  }))
}

Global filter state type:

interface GlobalFilter {
  globalFilter: any
}

Adding Global Filter Input to UI

The table does not render a global filter input. Add an input element to your template using the QUI TextInputModule:

<q-text-input
  placeholder="Search..."
  startIcon="Search"
  [(ngModel)]="globalFilter"
/>

Custom Global Filter Function

Pass a custom filter function to the globalFilterFn option.

const customFilterFn = (rows, columnId, filterValue) => {
  return rows.filter((row) => {
    // custom filter logic
  })
}

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    globalFilterFn: customFilterFn,
  }))
}

Initial Global Filter State

Set initial state using initialState.globalFilter or by initializing the signal:

// ...
export class ExampleComponent {
  globalFilter = signal("search term")

  table = createAngularTable(() => ({
    initialState: {
      globalFilter: "search term",
    },
    state: {
      globalFilter: this.globalFilter(),
    },
  }))
}

Disable Global Filtering

Global filtering is enabled by default. Disable it per-column or for all columns using enableGlobalFilter. Set enableFilters: false to disable both column and global filtering.

When disabled, column.getCanGlobalFilter() returns false.

const columns = [
  {
    header: () => "Id",
    accessorKey: "id",
    enableGlobalFilter: false,
  },
]

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    columns,
    enableGlobalFilter: false,
  }))
}