Angular Data Grid Filtering

import { Component } from '@angular/core'
import { DataGridComponent } from '@coreui/angular-data-grid'
import type { DataGridColumn, DataGridItem } from '@coreui/angular-data-grid'

const departments = ['Engineering', 'Design', 'Sales', 'Support']

@Component({
  selector: 'docs-data-grid-filter-menu-example',
  imports: [DataGridComponent],
  template: `
    <c-data-grid
      [columns]="columns"
      [items]="items"
      [columnFilters]="true"
      [columnMenu]="true"
      [pagination]="{ pageSize: 8 }"
      [sorting]="false"
      [virtualization]="false"
    />
  `
})
export class DataGridFilterMenuExample {
  readonly columns: DataGridColumn[] = [
    { key: 'name', label: 'Name' },
    { key: 'department', label: 'Department', filterType: 'select' },
    { key: 'salary', label: 'Salary', filterType: 'number' },
    { key: 'hired', label: 'Hired', filterType: 'date' }
  ]
readonly items: DataGridItem[] = Array.from({ length: 200 }, (_, i) => ({
    name: `Employee ${String(i + 1).padStart(3, '0')}`,
    department: departments[i % departments.length],
    salary: 40_000 + ((i * 977) % 60_000),
    hired: new Date(2020, i % 60, (i % 27) + 1).toISOString().slice(0, 10)
  }))
}

import { Component } from '@angular/core'
import { DataGridColumnFilterDirective, DataGridComponent } from '@coreui/angular-data-grid'
import type { Column, DataGridColumn, DataGridItem } from '@coreui/angular-data-grid'

const firstNames = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi', 'Ivan', 'Judy']
const lastNames = ['Smith', 'Jones', 'Brown', 'Taylor', 'Wilson', 'Davies', 'Evans', 'Thomas']
const roles = ['admin', 'editor', 'viewer']

@Component({
  selector: 'docs-data-grid-custom-filters-example',
  imports: [DataGridColumnFilterDirective, DataGridComponent],
  template: `
    <c-data-grid
      [columnFilters]="true"
      [columns]="columns"
      [items]="items"
      [itemKey]="itemKey"
      [pagination]="{ pageSize: 10 }"
    >
      <!-- Custom filter UI — a template receiving the headless column -->
      <ng-template cDataGridColumnFilter="role" let-column>
        <select class="form-select form-select-sm" (change)="onRoleFilterChange(column, $event)">
          <option value="" [selected]="!column.getFilterValue()">All</option>
          @for (value of roleOptions(column); track value) {
            <option [value]="value" [selected]="column.getFilterValue() === value">{{ value }}</option>
          }
        </select>
      </ng-template>
    </c-data-grid>
  `
})
export class DataGridCustomFiltersExample {
  readonly columns: DataGridColumn[] = [
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email', style: { width: '30%' } },
    {
      key: 'role',
      label: 'Role',
      width: 160,
      // Exact match - the default contains would also match partial values.
      filterFn: (value, filterValue) => value === filterValue
    },
    {
      key: 'score', label: 'Score', width: 140, filterType: 'number'
    }
  ]
readonly items: DataGridItem[] = Array.from({ length: 1000 }, (_, i) => {
    const name = `${firstNames[i % firstNames.length]} ${lastNames[i % lastNames.length]}`
    return {
      id: i + 1,
      name,
      email: `${name.toLowerCase().replace(' ', '.')}${i}@example.com`,
      role: roles[i % roles.length],
      score: (i * 37) % 1000
    }
  })
readonly itemKey = (item: DataGridItem) => String(item.id)

  roleOptions(column: Column<DataGridItem, unknown>): string[] {
    return [...column.getFacetedUniqueValues().keys()].map(String).toSorted()
  }

  onRoleFilterChange(column: Column<DataGridItem, unknown>, event: Event) {
    const { value } = event.target as HTMLSelectElement
    column.setFilterValue(value === '' ? undefined : value)
  }
}