{"id":41879142,"url":"https://github.com/kakarotx10/ngx-column-filter","last_synced_at":"2026-01-26T18:01:15.866Z","repository":{"id":332148161,"uuid":"1132911427","full_name":"kakarotx10/ngx-column-filter","owner":"kakarotx10","description":"A powerful, reusable Angular column filter component with support for multiple field types, advanced filtering rules, and customizable match modes.","archived":false,"fork":false,"pushed_at":"2026-01-12T16:43:18.000Z","size":99,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-12T22:10:26.021Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kakarotx10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-12T16:11:06.000Z","updated_at":"2026-01-12T16:43:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kakarotx10/ngx-column-filter","commit_stats":null,"previous_names":["kakarotx10/ngx-column-filter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kakarotx10/ngx-column-filter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kakarotx10%2Fngx-column-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kakarotx10%2Fngx-column-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kakarotx10%2Fngx-column-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kakarotx10%2Fngx-column-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kakarotx10","download_url":"https://codeload.github.com/kakarotx10/ngx-column-filter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kakarotx10%2Fngx-column-filter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28784093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T13:55:28.044Z","status":"ssl_error","status_checked_at":"2026-01-26T13:55:26.068Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-25T13:00:20.522Z","updated_at":"2026-01-26T18:01:15.859Z","avatar_url":"https://github.com/kakarotx10.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"# Column Filter Library\n\nA powerful, reusable Angular column filter component with support for multiple field types, advanced filtering rules, and customizable match modes.\n\n[![npm version](https://badge.fury.io/js/ngx-column-filter-popup.svg)](https://www.npmjs.com/package/ngx-column-filter-popup)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![GitHub stars](https://img.shields.io/github/stars/kakarotx10/ngx-column-filter.svg?style=social\u0026label=Star)](https://github.com/kakarotx10/ngx-column-filter)\n[![GitHub forks](https://img.shields.io/github/forks/kakarotx10/ngx-column-filter.svg?style=social\u0026label=Fork)](https://github.com/kakarotx10/ngx-column-filter)\n\n## 🚀 Quick Links\n\n- 🎯 [Live Demo](https://ngx-column-filter.netlify.app/) - See it in action!\n- 📦 [NPM Package](https://www.npmjs.com/package/ngx-column-filter-popup)\n- 🏠 [GitHub Repository](https://github.com/kakarotx10/ngx-column-filter)\n\n## 📚 Documentation \u0026 Guides\n\n**New to this library?** Start here:\n\n- 📖 **[Getting Started Tutorial](./GETTING_STARTED.md)** ⭐ - **Complete step-by-step guide: How to install, import, and use**\n  - Installation steps\n  - TypeScript imports explained\n  - Basic and advanced examples\n  - All field types with code samples\n  - Data filtering implementation\n  - Troubleshooting guide\n\n**More Resources:**\n\n- 📘 [Complete Documentation](./DOCUMENTATION.md) - Full API reference, all features explained\n- 💡 [Usage Examples](./USAGE_EXAMPLES.md) - Advanced usage patterns and programmatic control\n- 🚀 [Deployment Guide](./DEPLOYMENT.md) - How to deploy your Angular app\n\n## 🐛 Support\n\n- 🐛 [Report Bug](https://github.com/kakarotx10/ngx-column-filter/issues)\n- 💬 [Request Feature](https://github.com/kakarotx10/ngx-column-filter/issues)\n\n## Features\n\n- ✅ **Multiple Filter Rules**: Add multiple filter conditions per column\n- ✅ **Multiple Field Types**: Specialized filters for different data types\n  - **Text** - Text fields (default)\n  - **Currency** - Currency values with symbol support\n  - **Age/Number** - Numeric values\n  - **Date** - Date values with date picker\n  - **Status** - Predefined status options dropdown\n- ✅ **Global Match Mode**: Choose how to combine multiple rules\n  - **Match All Rules** (AND Logic): All rules must match\n  - **Match Any Rule** (OR Logic): Any rule can match (default)\n- ✅ **Various Match Types**: Different matching options based on field type\n- ✅ **Visual Feedback**: Blinking red filter icon with X mark when active - clearly indicates applied filters\n- ✅ **Backend Mode**: Send filter payloads directly to your backend API instead of filtering locally\n- ✅ **Single/Multiple Rules**: Control whether users can add multiple filter rules with `allowMultipleRules` option\n- ✅ **Single Filter Open**: Only one filter dropdown can be open at a time\n- ✅ **ESC Key Support**: Press ESC to close the open filter\n- ✅ **Programmatic Control**: Clear filters programmatically using `clearFilter()` method\n- ✅ **Type-Safe**: Fully typed with TypeScript\n- ✅ **Standalone Component**: Works with Angular 14+ standalone components\n- ✅ **Fully Customizable**: Configurable inputs for customization\n- ✅ **Accessible**: ARIA labels and keyboard navigation support\n- ✅ **Data Adaptive**: Simply update `columnKey` and `columnName` when your data changes\n\n## Installation\n\n```bash\nnpm install ngx-column-filter-popup\n```\n\n**Note**: This package is published with TypeScript source files. Make sure your Angular project has TypeScript configured to compile these files.\n\n\u003e 💡 **New to this library?** Check out the **[Getting Started Tutorial](./GETTING_STARTED.md)** for a complete step-by-step guide with examples!\n\n## Quick Start\n\n### Standalone Component (Angular 14+)\n\n#### Basic Example:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ColumnFilterComponent } from 'ngx-column-filter-popup';\nimport { FilterConfig, applyColumnFilter } from 'ngx-column-filter-popup';\n\n@Component({\n  selector: 'app-example',\n  imports: [ColumnFilterComponent],\n  template: `\n    \u003clib-column-filter\n      columnName=\"first name\"\n      columnKey=\"firstName\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\u003e\n    \u003c/lib-column-filter\u003e\n  `\n})\nexport class ExampleComponent {\n  onFilterApplied(filterConfig: FilterConfig) {\n    console.log('Filter applied:', filterConfig);\n    // Apply filter to your data\n  }\n\n  onFilterCleared() {\n    console.log('Filter cleared');\n    // Clear filter from your data\n  }\n}\n```\n\n#### Complete Example with New Features (Backend Mode, allowMultipleRules):\n\n```typescript\nimport { Component, ViewChildren, QueryList } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ColumnFilterComponent } from 'ngx-column-filter-popup';\nimport { FilterConfig, applyColumnFilter } from 'ngx-column-filter-popup';\n\ninterface User {\n  id: number;\n  firstName: string;\n  lastName: string;\n  email: string;\n}\n\n@Component({\n  selector: 'app-example',\n  imports: [CommonModule, ColumnFilterComponent],\n  template: `\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003e\n            First Name\n            \u003clib-column-filter\n              columnName=\"first name\"\n              columnKey=\"firstName\"\n              [allowMultipleRules]=\"false\"\n              [backendMode]=\"isBackendMode('firstName')\"\n              (filterApplied)=\"onFilterApplied('firstName', $event)\"\n              (filterCleared)=\"onFilterCleared('firstName')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Last Name\n            \u003clib-column-filter\n              columnName=\"last name\"\n              columnKey=\"lastName\"\n              [allowMultipleRules]=\"true\"\n              [backendMode]=\"isBackendMode('lastName')\"\n              (filterApplied)=\"onFilterApplied('lastName', $event)\"\n              (filterCleared)=\"onFilterCleared('lastName')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Email\n            \u003clib-column-filter\n              columnName=\"email\"\n              columnKey=\"email\"\n              [backendMode]=\"isBackendMode('email')\"\n              (filterApplied)=\"onFilterApplied('email', $event)\"\n              (filterCleared)=\"onFilterCleared('email')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr *ngFor=\"let user of filteredUsers\"\u003e\n          \u003ctd\u003e{{ user.firstName }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.lastName }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.email }}\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n    \u003cbutton (click)=\"clearAllFilters()\"\u003eClear All Filters\u003c/button\u003e\n  `\n})\nexport class ExampleComponent {\n  originalData: User[] = [\n    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' }\n  ];\n  filteredData: User[] = [...this.originalData];\n\n  // ✅ Unified filter storage - single source of truth\n  filters = new Map\u003cstring, FilterConfig | null\u003e();\n\n  // ✅ Configuration: Which columns use backend mode\n  readonly backendModeColumns = new Set\u003cstring\u003e(['firstName', 'email']);\n\n  @ViewChildren(ColumnFilterComponent) filterComponents!: QueryList\u003cColumnFilterComponent\u003e;\n\n  // ✅ Generic filter handler - works for all columns\n  onFilterApplied(columnKey: string, filterConfig: FilterConfig) {\n    this.filters.set(columnKey, filterConfig);\n    \n    if (this.isBackendMode(columnKey)) {\n      this.sendAllBackendFiltersToBackend();\n    }\n    \n    this.applyAllFilters();\n  }\n\n  // ✅ Generic filter clear handler\n  onFilterCleared(columnKey: string) {\n    this.filters.set(columnKey, null);\n    \n    if (this.isBackendMode(columnKey)) {\n      this.sendAllBackendFiltersToBackend();\n    }\n    \n    this.applyAllFilters();\n  }\n\n  // ✅ Check if column uses backend mode\n  isBackendMode(columnKey: string): boolean {\n    return this.backendModeColumns.has(columnKey);\n  }\n\n  // ✅ Apply all filters - automatically skips backend mode columns\n  private applyAllFilters() {\n    let result = [...this.originalData];\n\n    this.filters.forEach((filterConfig, columnKey) =\u003e {\n      // Skip backend mode columns (handled by backend)\n      if (filterConfig \u0026\u0026 !this.isBackendMode(columnKey)) {\n        result = applyColumnFilter(result, columnKey, filterConfig);\n      }\n    });\n\n    this.filteredData = result;\n  }\n\n  // ✅ Clear all filters programmatically\n  clearAllFilters() {\n    this.filters.clear();\n    this.sendAllBackendFiltersToBackend();\n    this.filteredData = [...this.originalData];\n\n    // Clear UI state in all filter components (icons/inputs)\n    if (this.filterComponents) {\n      this.filterComponents.forEach((filter: ColumnFilterComponent) =\u003e {\n        filter.clearFilter();\n      });\n    }\n  }\n\n  // ✅ Send all backend filters to API\n  private sendAllBackendFiltersToBackend() {\n    const activeFilters: Array\u003c{\n      field: string;\n      matchType: string;\n      value: string;\n      fieldType: string;\n    }\u003e = [];\n\n    this.backendModeColumns.forEach(columnKey =\u003e {\n      const filterConfig = this.filters.get(columnKey);\n      if (filterConfig \u0026\u0026 filterConfig.rules.length \u003e 0) {\n        filterConfig.rules.forEach(rule =\u003e {\n          if (rule.value \u0026\u0026 rule.value.trim() !== '') {\n            activeFilters.push({\n              field: columnKey,\n              matchType: rule.matchType,\n              value: rule.value.trim(),\n              fieldType: filterConfig.fieldType || 'text'\n            });\n          }\n        });\n      }\n    });\n\n    const payload = { activeFilters, count: activeFilters.length };\n    // Send to your backend API\n    console.log('Backend payload:', payload);\n  }\n}\n```\n\n### Module-Based (Optional)\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { ColumnFilterModule } from 'ngx-column-filter-popup';\n\n@NgModule({\n  imports: [ColumnFilterModule],\n  // ...\n})\nexport class YourModule {}\n```\n\n## Field Types\n\n### Text Field (Default)\n\n```html\n\u003clib-column-filter\n  columnName=\"name\"\n  columnKey=\"name\"\n  fieldType=\"text\"\n  (filterApplied)=\"onFilterApplied('name', $event)\"\n  (filterCleared)=\"onFilterCleared('name')\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n### Currency Field\n\n```html\n\u003clib-column-filter\n  columnName=\"balance\"\n  columnKey=\"balance\"\n  fieldType=\"currency\"\n  currencySymbol=\"$\"\n  (filterApplied)=\"onFilterApplied('balance', $event)\"\n  (filterCleared)=\"onFilterCleared('balance')\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n### Age/Number Field\n\n```html\n\u003clib-column-filter\n  columnName=\"age\"\n  columnKey=\"age\"\n  fieldType=\"age\"\n  (filterApplied)=\"onFilterApplied('age', $event)\"\n  (filterCleared)=\"onFilterCleared('age')\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n### Date Field\n\n```html\n\u003clib-column-filter\n  columnName=\"date\"\n  columnKey=\"date\"\n  fieldType=\"date\"\n  (filterApplied)=\"onFilterApplied('date', $event)\"\n  (filterCleared)=\"onFilterCleared('date')\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n### Status Field\n\n```html\n\u003clib-column-filter\n  columnName=\"status\"\n  columnKey=\"status\"\n  fieldType=\"status\"\n  [statusOptions]=\"['qualified', 'unqualified', 'negotiation', 'new']\"\n  (filterApplied)=\"onFilterApplied('status', $event)\"\n  (filterCleared)=\"onFilterCleared('status')\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n\u003e 💡 **Note**: All examples use generic handlers `onFilterApplied(columnKey, $event)` and `onFilterCleared(columnKey)` - no need for separate functions per filter!\n\n## API Reference\n\n### ColumnFilterComponent\n\n#### Inputs\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `columnName` | `string` | `''` | Display name of the column (used in placeholder) |\n| `columnKey` | `string` | `''` | Property name to filter on |\n| `fieldType` | `FieldType` | `'text'` | Field type: 'text', 'currency', 'age', 'date', or 'status' |\n| `currencySymbol` | `string` | `'$'` | Currency symbol for currency field type (optional) |\n| `statusOptions` | `string[]` | `[]` | Array of status options for status field type (required for status) |\n| `initialFilter` | `FilterConfig?` | `undefined` | Initial filter configuration (optional) |\n| `placeholder` | `string?` | `undefined` | Custom placeholder text. Default: \"Search by {columnName}\" |\n| `availableMatchTypes` | `MatchType[]?` | `undefined` | Customize available match types (optional) |\n| `backendMode` | `boolean` | `false` | When true, component emits filter data for backend API instead of frontend filtering |\n| `allowMultipleRules` | `boolean` | `true` | When false, hides Add/Remove Rule buttons (single rule only) |\n\n#### Outputs\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `filterApplied` | `EventEmitter\u003cFilterConfig\u003e` | Emitted when filter is applied |\n| `filterCleared` | `EventEmitter\u003cvoid\u003e` | Emitted when filter is cleared |\n\n#### Public Methods\n\n| Method | Description |\n|--------|-------------|\n| `clearFilter()` | Programmatically clear all filter rules and reset the filter |\n\n### FilterConfig Interface\n\n```typescript\ntype FieldType = 'text' | 'currency' | 'age' | 'date' | 'status';\n\ninterface FilterConfig {\n  rules: FilterRule[];\n  globalMatchMode?: GlobalMatchMode; // 'match-all-rules' | 'match-any-rule'\n  fieldType?: FieldType;\n  statusOptions?: string[];\n}\n\ninterface FilterRule {\n  id: string;\n  matchType: MatchType;\n  value: string;\n}\n```\n\n### Utility Functions\n\n#### applyColumnFilter\n\nApply filter rules to a dataset:\n\n```typescript\nimport { applyColumnFilter } from 'ngx-column-filter-popup';\n\nconst filteredData = applyColumnFilter(\n  data,\n  'columnKey',\n  filterConfig\n);\n```\n\n#### itemMatchesFilter\n\nCheck if a single item matches filter rules:\n\n```typescript\nimport { itemMatchesFilter } from 'ngx-column-filter-popup';\n\nconst matches = itemMatchesFilter(\n  item,\n  'columnKey',\n  filterConfig\n);\n```\n\n## Backend Mode (Backend API Integration)\n\nWhen `backendMode` is enabled, the component collects filter data and emits it in a format ready for your backend API. No frontend filtering is applied.\n\n### Backend Mode Example:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ColumnFilterComponent } from 'ngx-column-filter-popup';\nimport { FilterConfig } from 'ngx-column-filter-popup';\n\n@Component({\n  selector: 'app-example',\n  imports: [ColumnFilterComponent],\n  template: `\n    \u003clib-column-filter\n      columnName=\"first name\"\n      columnKey=\"firstName\"\n      [backendMode]=\"true\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\u003e\n    \u003c/lib-column-filter\u003e\n  `\n})\nexport class ExampleComponent {\n  filters = new Map\u003cstring, FilterConfig | null\u003e();\n  readonly backendModeColumns = new Set\u003cstring\u003e(['firstName', 'email']);\n\n  onFilterApplied(columnKey: string, filterConfig: FilterConfig) {\n    this.filters.set(columnKey, filterConfig);\n    this.sendToBackend();\n  }\n\n  onFilterCleared(columnKey: string) {\n    this.filters.set(columnKey, null);\n    this.sendToBackend();\n  }\n\n  private sendToBackend() {\n    const activeFilters: Array\u003c{\n      field: string;\n      matchType: string;\n      value: string;\n      fieldType: string;\n    }\u003e = [];\n\n    this.backendModeColumns.forEach(columnKey =\u003e {\n      const filterConfig = this.filters.get(columnKey);\n      if (filterConfig \u0026\u0026 filterConfig.rules.length \u003e 0) {\n        filterConfig.rules.forEach(rule =\u003e {\n          if (rule.value \u0026\u0026 rule.value.trim() !== '') {\n            activeFilters.push({\n              field: columnKey,\n              matchType: rule.matchType,\n              value: rule.value.trim(),\n              fieldType: filterConfig.fieldType || 'text'\n            });\n          }\n        });\n      }\n    });\n\n    const payload = {\n      activeFilters: activeFilters,\n      count: activeFilters.length\n    };\n\n    // Send to your backend API\n    // this.httpClient.post('/api/filters', payload).subscribe(...);\n    console.log('Backend payload:', payload);\n  }\n}\n```\n\n### Backend Payload Format:\n\n```json\n{\n  \"activeFilters\": [\n    {\n      \"field\": \"firstName\",\n      \"matchType\": \"contains\",\n      \"value\": \"John\",\n      \"fieldType\": \"text\"\n    },\n    {\n      \"field\": \"email\",\n      \"matchType\": \"contains\",\n      \"value\": \"example\",\n      \"fieldType\": \"text\"\n    }\n  ],\n  \"count\": 2\n}\n```\n\n## Single Rule Mode (allowMultipleRules)\n\nControl whether users can add multiple filter rules:\n\n```html\n\u003c!-- Multiple rules allowed (default) --\u003e\n\u003clib-column-filter\n  columnName=\"name\"\n  columnKey=\"name\"\n  [allowMultipleRules]=\"true\"\u003e\n\u003c/lib-column-filter\u003e\n\n\u003c!-- Single rule only (Add/Remove buttons hidden) --\u003e\n\u003clib-column-filter\n  columnName=\"email\"\n  columnKey=\"email\"\n  [allowMultipleRules]=\"false\"\u003e\n\u003c/lib-column-filter\u003e\n```\n\n**When `allowMultipleRules=\"false\"`:**\n- ✅ Add Rule button is hidden\n- ✅ Remove Rule buttons are hidden\n- ✅ Global Match Mode toggle is hidden\n- ✅ Users can only use a single filter rule\n\n**When `allowMultipleRules=\"true\"` (default):**\n- ✅ All features work normally\n- ✅ Users can add multiple rules\n- ✅ Match All/Match Any toggle is available\n\n## Programmatic Control\n\n### Clearing Filters Programmatically\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { ColumnFilterComponent } from 'ngx-column-filter-popup';\n\n@Component({\n  template: `\n    \u003clib-column-filter\n      #nameFilter\n      columnName=\"name\"\n      columnKey=\"name\"\u003e\n    \u003c/lib-column-filter\u003e\n    \u003cbutton (click)=\"clearFilter()\"\u003eClear Filter\u003c/button\u003e\n  `\n})\nexport class ExampleComponent {\n  @ViewChild('nameFilter') filter!: ColumnFilterComponent;\n\n  clearFilter() {\n    this.filter.clearFilter(); // Programmatically clear the filter\n  }\n}\n```\n\n## Complete Example\n\n**✅ Modern Implementation using Generic Handlers (Recommended):**\n\n```typescript\nimport { Component, ViewChildren, QueryList } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ColumnFilterComponent } from 'ngx-column-filter-popup';\nimport { FilterConfig, applyColumnFilter } from 'ngx-column-filter-popup';\n\ninterface User {\n  id: number;\n  firstName: string;\n  lastName: string;\n  email: string;\n  age: number;\n  balance: number;\n  joinDate: string;\n  status: string;\n}\n\n@Component({\n  selector: 'app-user-list',\n  imports: [CommonModule, ColumnFilterComponent],\n  template: `\n    \u003cbutton (click)=\"clearAllFilters()\"\u003eClear All Filters\u003c/button\u003e\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003e\n            First Name\n            \u003clib-column-filter\n              columnName=\"first name\"\n              columnKey=\"firstName\"\n              [allowMultipleRules]=\"false\"\n              [backendMode]=\"isBackendMode('firstName')\"\n              (filterApplied)=\"onFilterApplied('firstName', $event)\"\n              (filterCleared)=\"onFilterCleared('firstName')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Last Name\n            \u003clib-column-filter\n              columnName=\"last name\"\n              columnKey=\"lastName\"\n              (filterApplied)=\"onFilterApplied('lastName', $event)\"\n              (filterCleared)=\"onFilterCleared('lastName')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Email\n            \u003clib-column-filter\n              columnName=\"email\"\n              columnKey=\"email\"\n              [backendMode]=\"isBackendMode('email')\"\n              (filterApplied)=\"onFilterApplied('email', $event)\"\n              (filterCleared)=\"onFilterCleared('email')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Age\n            \u003clib-column-filter\n              columnName=\"age\"\n              columnKey=\"age\"\n              fieldType=\"age\"\n              (filterApplied)=\"onFilterApplied('age', $event)\"\n              (filterCleared)=\"onFilterCleared('age')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Balance\n            \u003clib-column-filter\n              columnName=\"balance\"\n              columnKey=\"balance\"\n              fieldType=\"currency\"\n              currencySymbol=\"$\"\n              (filterApplied)=\"onFilterApplied('balance', $event)\"\n              (filterCleared)=\"onFilterCleared('balance')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Join Date\n            \u003clib-column-filter\n              columnName=\"join date\"\n              columnKey=\"joinDate\"\n              fieldType=\"date\"\n              (filterApplied)=\"onFilterApplied('joinDate', $event)\"\n              (filterCleared)=\"onFilterCleared('joinDate')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n          \u003cth\u003e\n            Status\n            \u003clib-column-filter\n              columnName=\"status\"\n              columnKey=\"status\"\n              fieldType=\"status\"\n              [statusOptions]=\"statusOptions\"\n              (filterApplied)=\"onFilterApplied('status', $event)\"\n              (filterCleared)=\"onFilterCleared('status')\"\u003e\n            \u003c/lib-column-filter\u003e\n          \u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr *ngFor=\"let user of filteredUsers\"\u003e\n          \u003ctd\u003e{{ user.firstName }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.lastName }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.email }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.age }}\u003c/td\u003e\n          \u003ctd\u003e${{ user.balance }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.joinDate }}\u003c/td\u003e\n          \u003ctd\u003e{{ user.status }}\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n  `\n})\nexport class UserListComponent {\n  users: User[] = [\n    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com', age: 30, balance: 50000, joinDate: '2020-01-15', status: 'active' }\n  ];\n  \n  filteredUsers: User[] = [...this.users];\n  statusOptions = ['active', 'inactive', 'on-leave'];\n\n  // ✅ Unified filter storage - single source of truth\n  filters = new Map\u003cstring, FilterConfig | null\u003e();\n\n  // ✅ Configuration: Which columns use backend mode\n  readonly backendModeColumns = new Set\u003cstring\u003e(['firstName', 'email']);\n\n  @ViewChildren(ColumnFilterComponent) filterComponents!: QueryList\u003cColumnFilterComponent\u003e;\n\n  // ✅ Generic filter handler - works for ALL columns (no separate functions needed!)\n  onFilterApplied(columnKey: string, filterConfig: FilterConfig): void {\n    this.filters.set(columnKey, filterConfig);\n    \n    if (this.isBackendMode(columnKey)) {\n      this.sendAllBackendFiltersToBackend();\n    }\n    \n    this.applyAllFilters();\n  }\n\n  // ✅ Generic filter clear handler - works for ALL columns\n  onFilterCleared(columnKey: string): void {\n    this.filters.set(columnKey, null);\n    \n    if (this.isBackendMode(columnKey)) {\n      this.sendAllBackendFiltersToBackend();\n    }\n    \n    this.applyAllFilters();\n  }\n\n  // ✅ Check if column uses backend mode\n  isBackendMode(columnKey: string): boolean {\n    return this.backendModeColumns.has(columnKey);\n  }\n\n  // ✅ Apply all filters - automatically skips backend mode columns\n  private applyAllFilters(): void {\n    let result = [...this.users];\n\n    this.filters.forEach((filterConfig, columnKey) =\u003e {\n      // Skip backend mode columns (handled by backend)\n      if (filterConfig \u0026\u0026 !this.isBackendMode(columnKey)) {\n        result = applyColumnFilter(result, columnKey, filterConfig);\n      }\n    });\n\n    this.filteredUsers = result;\n  }\n\n  // ✅ Clear all filters programmatically\n  clearAllFilters(): void {\n    this.filters.clear();\n    this.sendAllBackendFiltersToBackend();\n    this.filteredUsers = [...this.users];\n\n    // Clear UI state in all filter components (icons/inputs)\n    if (this.filterComponents) {\n      this.filterComponents.forEach((filter: ColumnFilterComponent) =\u003e {\n        filter.clearFilter();\n      });\n    }\n  }\n\n  // ✅ Send all backend filters to API\n  private sendAllBackendFiltersToBackend(): void {\n    const activeFilters: Array\u003c{\n      field: string;\n      matchType: string;\n      value: string;\n      fieldType: string;\n    }\u003e = [];\n\n    this.backendModeColumns.forEach(columnKey =\u003e {\n      const filterConfig = this.filters.get(columnKey);\n      if (filterConfig \u0026\u0026 filterConfig.rules.length \u003e 0) {\n        filterConfig.rules.forEach(rule =\u003e {\n          if (rule.value \u0026\u0026 rule.value.trim() !== '') {\n            activeFilters.push({\n              field: columnKey,\n              matchType: rule.matchType,\n              value: rule.value.trim(),\n              fieldType: filterConfig.fieldType || 'text'\n            });\n          }\n        });\n      }\n    });\n\n    const payload = { activeFilters, count: activeFilters.length };\n    // Send to your backend API\n    console.log('Backend payload:', payload);\n  }\n}\n```\n\n**✨ Key Benefits of This Approach:**\n- ✅ **No separate functions per filter** - One `onFilterApplied()` handles all columns\n- ✅ **Easy to add new filters** - Just add HTML, no new functions needed\n- ✅ **Clean and maintainable** - Map-based storage, generic handlers\n- ✅ **Backend mode support** - Configurable per column\n- ✅ **Single source of truth** - All filters in one Map\n\n## 📖 Documentation\n\n### For Beginners:\n- **[Getting Started Tutorial](./GETTING_STARTED.md)** - Step-by-step guide with examples\n  - What to import in TypeScript\n  - How to setup component\n  - Complete working examples\n  - Common patterns\n\n### For Advanced Users:\n- **[Complete Documentation](./DOCUMENTATION.md)** - Full API reference\n  - All inputs and outputs\n  - Utility functions\n  - Type definitions\n  - Match modes explained\n  - Data structure adaptation\n\n- **[Usage Examples](./USAGE_EXAMPLES.md)** - Advanced patterns\n  - Programmatic filter control\n  - Multiple filters management\n  - Custom configurations\n\n- **[Deployment Guide](./DEPLOYMENT.md)** - Deploy your Angular app\n  - GitHub Pages\n  - Vercel\n  - Netlify\n  - Firebase Hosting\n\n## Styling\n\nThe component uses SCSS and includes default styles. You can customize the appearance by overriding CSS classes:\n\n- `.column-filter-wrapper` - Main wrapper\n- `.filter-trigger` - Filter button\n- `.filter-dropdown` - Dropdown container\n- `.filter-rule` - Individual filter rule\n- `.btn-apply` - Apply button\n- `.btn-clear` - Clear button\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Requirements\n\n- Angular 14+\n- TypeScript 4.7+\n\n## License\n\nMIT\n\n## Author\n\nMade with ❤️ by Shivam Sharma\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkakarotx10%2Fngx-column-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkakarotx10%2Fngx-column-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkakarotx10%2Fngx-column-filter/lists"}