0
# Filtering and Search
1

2
Advanced filtering system with multiple filter types, header filters, and search capabilities for precise data visibility control.
3

4
## Capabilities
5

6
### Table Filters
7

8
Programmatic filtering with support for multiple simultaneous filters and complex filtering logic.
9

10
```javascript { .api }
11
/**
12
 * Set table filters, replacing any existing filters
13
 * @param filters - Single filter or array of filter objects
14
 */
15
setFilter(filters: FilterParams | FilterParams[]): void;
16

17
/**
18
 * Add new filter to existing filters
19
 * @param field - Field name to filter on
20
 * @param type - Filter comparison type
21
 * @param value - Value to filter against
22
 * @param params - Additional filter parameters
23
 */
24
addFilter(field: string, type: FilterType, value: any, params?: any): void;
25

26
/**
27
 * Get all currently active filters
28
 * @param all - Include inactive filters if true
29
 * @returns Array of active filter objects
30
 */
31
getFilters(all?: boolean): FilterParams[];
32

33
/**
34
 * Remove specific filter
35
 * @param field - Field name of filter to remove
36
 * @param type - Filter type to remove
37
 * @param value - Filter value to remove
38
 */
39
removeFilter(field: string, type: FilterType, value: any): void;
40

41
/**
42
 * Clear filters from table
43
 * @param all - If true, clear header filters too
44
 */
45
clearFilter(all?: boolean): void;
46
```
47

48
**Usage Examples:**
49

50
```javascript
51
// Single filter
52
table.setFilter("department", "=", "Engineering");
53

54
// Multiple filters
55
table.setFilter([
56
  { field: "age", type: ">=", value: 18 },
57
  { field: "status", type: "=", value: "active" },
58
  { field: "name", type: "like", value: "John" }
59
]);
60

61
// Add filter to existing ones
62
table.addFilter("salary", ">", 50000);
63

64
// Complex filter with parameters
65
table.addFilter("date", ">=", "2023-01-01", { format: "YYYY-MM-DD" });
66

67
// Remove specific filter
68
table.removeFilter("age", ">=", 18);
69

70
// Clear all filters
71
table.clearFilter(true); // Including header filters
72
```
73

74
### Header Filters
75

76
Interactive filtering controls built into column headers for user-driven filtering.
77

78
```javascript { .api }
79
/**
80
 * Set value of specific header filter
81
 * @param field - Column field name
82
 * @param value - Value to set in header filter
83
 */
84
setHeaderFilterValue(field: string, value: any): void;
85

86
/**
87
 * Get current value of header filter
88
 * @param field - Column field name
89
 * @returns Current header filter value
90
 */
91
getHeaderFilterValue(field: string): any;
92

93
/**
94
 * Clear all header filter values
95
 */
96
clearHeaderFilter(): void;
97
```
98

99
### Data Search
100

101
Search functionality for finding specific data within the table.
102

103
```javascript { .api }
104
/**
105
 * Search table data and return matching data objects
106
 * @param field - Field name to search in
107
 * @param type - Search comparison type
108
 * @param value - Value to search for
109
 * @returns Array of matching data objects
110
 */
111
searchData(field: string, type: FilterType, value: any): any[];
112

113
/**
114
 * Search table and return matching row components
115
 * @param field - Field name to search in
116
 * @param type - Search comparison type  
117
 * @param value - Value to search for
118
 * @returns Array of matching RowComponents
119
 */
120
searchRows(field: string, type: FilterType, value: any): RowComponent[];
121
```
122

123
**Usage Examples:**
124

125
```javascript
126
// Header filter manipulation
127
table.setHeaderFilterValue("name", "Alice");
128
const currentFilter = table.getHeaderFilterValue("department");
129
table.clearHeaderFilter();
130

131
// Data search
132
const matches = table.searchData("email", "like", "@company.com");
133
const matchingRows = table.searchRows("status", "=", "pending");
134

135
// Process search results
136
matchingRows.forEach(row => {
137
  row.getElement().style.backgroundColor = "yellow";
138
});
139
```
140

141
## Filter Types and Parameters
142

143
### Standard Filter Types
144

145
```javascript { .api }
146
type FilterType = 
147
  | "=" | "!=" | "like" | "not like" 
148
  | "<" | "<=" | ">" | ">="
149
  | "in" | "not in"
150
  | "regex" | "starts" | "ends"
151
  | "keywords";
152

153
interface FilterParams {
154
  /** Field name to filter */
155
  field: string;
156
  /** Filter comparison type */
157
  type: FilterType;
158
  /** Value to filter against */
159
  value: any;
160
  /** Additional filter parameters */
161
  params?: FilterParamsConfig;
162
}
163

164
interface FilterParamsConfig {
165
  /** Separator for 'in' filters */
166
  separator?: string;
167
  /** Case sensitivity for string filters */
168
  matchAll?: boolean;
169
  /** Custom filter function */
170
  filterFunc?: Function;
171
}
172
```
173

174
### Custom Filter Functions
175

176
```javascript { .api }
177
interface CustomFilterConfig {
178
  /** Custom filter logic */
179
  filterFunc: (headerValue: any, rowValue: any, rowData: any, filterParams: any) => boolean;
180
  /** Filter parameters */
181
  filterParams?: any;
182
}
183
```
184

185
**Usage Examples:**
186

187
```javascript
188
// Standard filter types
189
table.setFilter([
190
  { field: "name", type: "like", value: "john" },
191
  { field: "age", type: ">=", value: 21 },
192
  { field: "department", type: "in", value: "sales,marketing", params: { separator: "," } },
193
  { field: "email", type: "regex", value: ".*@company\\.com$" },
194
  { field: "title", type: "starts", value: "Senior" }
195
]);
196

197
// Custom filter function
198
table.setFilter([{
199
  field: "score",
200
  type: "=",
201
  value: null,
202
  params: {
203
    filterFunc: function(headerValue, rowValue, rowData, filterParams) {
204
      return rowValue >= 80 && rowData.attempts < 3;
205
    }
206
  }
207
}]);
208
```
209

210
## Header Filter Configuration
211

212
### Header Filter Types
213

214
Header filters can be configured per column to provide interactive filtering controls.
215

216
```javascript { .api }
217
interface HeaderFilterOptions {
218
  /** Filter input type */
219
  headerFilter?: "input" | "number" | "select" | "tickCross" | "date" | "dateTime" | Function | boolean;
220
  /** Filter parameters */
221
  headerFilterParams?: {
222
    /** Placeholder text */
223
    placeholder?: string;
224
    /** Options for select filters */
225
    values?: any[] | { [key: string]: string };
226
    /** Multiple selection */
227
    multiselect?: boolean;
228
    /** Allow empty option */
229
    clearable?: boolean;
230
    /** Tristate for tickCross */
231
    tristate?: boolean;
232
  };
233
  /** Filter comparison function */
234
  headerFilterFunc?: FilterType | Function;
235
  /** Parameters for filter function */
236
  headerFilterFuncParams?: any;
237
  /** Enable live filtering */
238
  headerFilterLiveFilter?: boolean;
239
  /** Live filter delay (ms) */
240
  headerFilterLiveFilterDelay?: number;
241
  /** Empty value check */
242
  headerFilterEmptyCheck?: (value: any) => boolean;
243
}
244
```
245

246
**Usage Examples:**
247

248
```javascript
249
// Column definitions with header filters
250
const columnsWithFilters = [
251
  {
252
    title: "Name",
253
    field: "name", 
254
    headerFilter: "input",
255
    headerFilterParams: { placeholder: "Search names..." },
256
    headerFilterFunc: "like"
257
  },
258
  {
259
    title: "Department",
260
    field: "department",
261
    headerFilter: "select",
262
    headerFilterParams: {
263
      values: {
264
        "": "All Departments",
265
        "engineering": "Engineering", 
266
        "sales": "Sales",
267
        "marketing": "Marketing"
268
      },
269
      clearable: true
270
    }
271
  },
272
  {
273
    title: "Active",
274
    field: "active",
275
    headerFilter: "tickCross",
276
    headerFilterParams: { tristate: true },
277
    formatter: "tickCross"
278
  },
279
  {
280
    title: "Salary",
281
    field: "salary",
282
    headerFilter: "number",
283
    headerFilterParams: { placeholder: "Min salary..." },
284
    headerFilterFunc: ">="
285
  },
286
  {
287
    title: "Hire Date",
288
    field: "hireDate",
289
    headerFilter: "date",
290
    headerFilterParams: { format: "YYYY-MM-DD" },
291
    headerFilterFunc: ">="
292
  }
293
];
294

295
table.setColumns(columnsWithFilters);
296
```
297

298
## Advanced Filtering Patterns
299

300
### Conditional Filtering
301

302
```javascript { .api }
303
// Complex multi-condition filters
304
table.setFilter([
305
  [
306
    { field: "age", type: ">=", value: 18 },
307
    { field: "age", type: "<=", value: 65 }
308
  ],
309
  { field: "status", type: "=", value: "active" }
310
]);
311

312
// Custom filter with complex logic
313
table.addFilter("custom", "=", null, {
314
  filterFunc: function(headerValue, rowValue, rowData, filterParams) {
315
    const experience = new Date().getFullYear() - new Date(rowData.startDate).getFullYear();
316
    return experience >= 5 && rowData.certifications.length > 0;
317
  }
318
});
319
```
320

321
### Filter Events and Callbacks
322

323
```javascript { .api }
324
// Listen for filter changes
325
table.on("dataFiltered", function(filters, rows) {
326
  console.log(`${rows.length} rows visible after filtering`);
327
  console.log("Active filters:", filters);
328
});
329

330
// Pre-filter data processing
331
table.on("dataFiltering", function(filters) {
332
  console.log("About to apply filters:", filters);
333
});
334
```
335

336
### Performance Optimization
337

338
```javascript { .api }
339
// Efficient filtering for large datasets
340
const efficientTable = new Tabulator("#large-table", {
341
  data: largeDataset,
342
  filterMode: "local", // or "remote" for server-side
343
  headerFilterLiveFilterDelay: 600, // Debounce rapid typing
344
  pagination: true, // Reduce DOM elements
345
  paginationSize: 100,
346
  virtualDom: true // Virtual scrolling
347
});
348
```