0
# Built-in Types and Functions
1

2
React Table provides comprehensive built-in filter types, sort types, and aggregation functions that handle common data operations. These pre-built functions can be used directly or serve as examples for creating custom implementations.
3

4
## Capabilities
5

6
### Built-in Filter Types
7

8
Pre-built filter functions for common filtering scenarios. These can be referenced by string name in column definitions.
9

10
```javascript { .api }
11
interface FilterTypes {
12
  /** Case-insensitive text search - checks if filter value is included in cell value */
13
  text: (rows: Row[], columnId: string, filterValue: string) => Row[];
14
  
15
  /** Case-insensitive exact text match */
16
  exactText: (rows: Row[], columnId: string, filterValue: string) => Row[];
17
  
18
  /** Case-sensitive exact text match */
19
  exactTextCase: (rows: Row[], columnId: string, filterValue: string) => Row[];
20
  
21
  /** Array includes filter value */
22
  includes: (rows: Row[], columnId: string, filterValue: any) => Row[];
23
  
24
  /** Array includes all filter values */
25
  includesAll: (rows: Row[], columnId: string, filterValue: any[]) => Row[];
26
  
27
  /** Array includes some filter values */
28
  includesSome: (rows: Row[], columnId: string, filterValue: any[]) => Row[];
29
  
30
  /** Cell value is included in filter value array */
31
  includesValue: (rows: Row[], columnId: string, filterValue: any[]) => Row[];
32
  
33
  /** Strict equality match (===) */
34
  exact: (rows: Row[], columnId: string, filterValue: any) => Row[];
35
  
36
  /** Loose equality match (==) */
37
  equals: (rows: Row[], columnId: string, filterValue: any) => Row[];
38
  
39
  /** Numeric range filter - value between min and max */
40
  between: (rows: Row[], columnId: string, filterValue: [number, number]) => Row[];
41
}
42
```
43

44
**Usage Examples:**
45

46
```javascript
47
const columns = [
48
  {
49
    Header: 'Name',
50
    accessor: 'name',
51
    filter: 'text', // Case-insensitive text search
52
  },
53
  {
54
    Header: 'Status',
55
    accessor: 'status',
56
    filter: 'exactText', // Exact match for status values
57
  },
58
  {
59
    Header: 'Tags',
60
    accessor: 'tags',
61
    filter: 'includesAll', // All selected tags must be present
62
  },
63
  {
64
    Header: 'Category',
65
    accessor: 'category',
66
    filter: 'includesValue', // Category must be in selected list
67
  },
68
  {
69
    Header: 'Price',
70
    accessor: 'price',
71
    filter: 'between', // Price range filtering
72
  },
73
];
74

75
// Custom filter value examples
76
const filterExample = () => {
77
  const [filters, setFilters] = React.useState([
78
    { id: 'name', value: 'john' }, // Text search
79
    { id: 'status', value: 'Active' }, // Exact match
80
    { id: 'tags', value: ['urgent', 'featured'] }, // Include all tags
81
    { id: 'category', value: ['electronics', 'books'] }, // Category in list
82
    { id: 'price', value: [10, 100] }, // Price between 10 and 100
83
  ]);
84
  
85
  return { filters, setFilters };
86
};
87
```
88

89
### Built-in Sort Types
90

91
Pre-built sorting functions for different data types and sorting scenarios.
92

93
```javascript { .api }
94
interface SortTypes {
95
  /** 
96
   * Default alphanumeric sort - handles mixed strings and numbers intelligently
97
   * Sorts numbers numerically and strings alphabetically
98
   */
99
  alphanumeric: (rowA: Row, rowB: Row, columnId: string, desc?: boolean) => number;
100
  
101
  /** 
102
   * Date/time sorting - parses dates and sorts chronologically
103
   * Handles various date formats and ISO strings
104
   */
105
  datetime: (rowA: Row, rowB: Row, columnId: string, desc?: boolean) => number;
106
  
107
  /**
108
   * Basic comparison sort - uses simple comparison operators
109
   * Good for primitive values
110
   */
111
  basic: (rowA: Row, rowB: Row, columnId: string, desc?: boolean) => number;
112
  
113
  /**
114
   * String sort - case-insensitive string comparison
115
   * Converts values to strings before comparing
116
   */
117
  string: (rowA: Row, rowB: Row, columnId: string, desc?: boolean) => number;
118
  
119
  /**
120
   * Numeric sort - strips non-numeric characters and sorts numerically
121
   * Handles currency symbols, percentages, etc.
122
   */
123
  number: (rowA: Row, rowB: Row, columnId: string, desc?: boolean) => number;
124
}
125

126
/**
127
 * Default sorting function - alias for alphanumeric sort
128
 */
129
function defaultOrderByFn(
130
  rowA: Row,
131
  rowB: Row,
132
  columnId: string,
133
  desc?: boolean
134
): number;
135
```
136

137
**Usage Examples:**
138

139
```javascript
140
const columns = [
141
  {
142
    Header: 'Product Name',
143
    accessor: 'name',
144
    sortType: 'alphanumeric', // Mixed text and numbers
145
  },
146
  {
147
    Header: 'Created Date',
148
    accessor: 'createdAt',
149
    sortType: 'datetime', // Date sorting
150
  },
151
  {
152
    Header: 'Price',
153
    accessor: 'price',
154
    sortType: 'number', // Numeric sorting (handles $1,234.56)
155
  },
156
  {
157
    Header: 'Category',
158
    accessor: 'category',
159
    sortType: 'string', // Case-insensitive string sort
160
  },
161
  {
162
    Header: 'Rating',
163
    accessor: 'rating',
164
    sortType: 'basic', // Simple numeric comparison
165
  },
166
  {
167
    Header: 'SKU',
168
    accessor: 'sku',
169
    // Custom sort function
170
    sortType: (rowA, rowB, columnId) => {
171
      const a = rowA.values[columnId];
172
      const b = rowB.values[columnId];
173
      
174
      // Extract numeric part from SKU for sorting
175
      const numA = parseInt(a.replace(/[^0-9]/g, ''), 10);
176
      const numB = parseInt(b.replace(/[^0-9]/g, ''), 10);
177
      
178
      return numA > numB ? 1 : -1;
179
    },
180
  },
181
];
182

183
// Sorting with initial state
184
const table = useTable(
185
  {
186
    columns,
187
    data,
188
    initialState: {
189
      sortBy: [
190
        { id: 'createdAt', desc: true }, // Newest first
191
        { id: 'name', desc: false }, // Then alphabetical
192
      ],
193
    },
194
  },
195
  useSortBy
196
);
197
```
198

199
### Built-in Aggregation Functions
200

201
Pre-built aggregation functions for grouped data calculations.
202

203
```javascript { .api }
204
interface AggregationTypes {
205
  /**
206
   * Sum all numeric values
207
   * @param leafValues - Array of values to sum
208
   * @returns Sum of all values
209
   */
210
  sum: (leafValues: any[]) => number;
211
  
212
  /**
213
   * Find minimum value
214
   * @param leafValues - Array of values
215
   * @returns Minimum value
216
   */
217
  min: (leafValues: any[]) => any;
218
  
219
  /**
220
   * Find maximum value
221
   * @param leafValues - Array of values
222
   * @returns Maximum value
223
   */
224
  max: (leafValues: any[]) => any;
225
  
226
  /**
227
   * Create min-max range string
228
   * @param leafValues - Array of values
229
   * @returns String in format "min - max"
230
   */
231
  minMax: (leafValues: any[]) => string;
232
  
233
  /**
234
   * Calculate average of values
235
   * @param leafValues - Array of numeric values
236
   * @returns Average value
237
   */
238
  average: (leafValues: any[]) => number;
239
  
240
  /**
241
   * Calculate median value
242
   * @param leafValues - Array of numeric values
243
   * @returns Median value
244
   */
245
  median: (leafValues: any[]) => number;
246
  
247
  /**
248
   * Get array of unique values
249
   * @param leafValues - Array of values
250
   * @returns Array of unique values
251
   */
252
  unique: (leafValues: any[]) => any[];
253
  
254
  /**
255
   * Count unique values
256
   * @param leafValues - Array of values
257
   * @returns Number of unique values
258
   */
259
  uniqueCount: (leafValues: any[]) => number;
260
  
261
  /**
262
   * Count all values
263
   * @param leafValues - Array of values
264
   * @returns Total count of values
265
   */
266
  count: (leafValues: any[]) => number;
267
}
268
```
269

270
**Usage Examples:**
271

272
```javascript
273
import { useTable, useGroupBy } from 'react-table';
274

275
const columns = [
276
  {
277
    Header: 'Category',
278
    accessor: 'category',
279
  },
280
  {
281
    Header: 'Product',
282
    accessor: 'product',
283
  },
284
  {
285
    Header: 'Sales',
286
    accessor: 'sales',
287
    aggregate: 'sum', // Sum all sales in group
288
    Aggregated: ({ value }) => (
289
      <span style={{ fontWeight: 'bold' }}>
290
        Total: ${value.toLocaleString()}
291
      </span>
292
    ),
293
  },
294
  {
295
    Header: 'Quantity',
296
    accessor: 'quantity',
297
    aggregate: 'sum',
298
    Aggregated: ({ value }) => `${value} units`,
299
  },
300
  {
301
    Header: 'Price Range',
302
    accessor: 'price',
303
    aggregate: 'minMax', // Show price range
304
    Aggregated: ({ value }) => `$${value}`,
305
  },
306
  {
307
    Header: 'Avg Rating',
308
    accessor: 'rating',
309
    aggregate: 'average',
310
    Aggregated: ({ value }) => (
311
      <span>{Math.round(value * 10) / 10} ⭐</span>
312
    ),
313
  },
314
  {
315
    Header: 'Products',
316
    accessor: 'product',
317
    aggregate: 'uniqueCount', // Count unique products
318
    Aggregated: ({ value }) => `${value} products`,
319
  },
320
  {
321
    Header: 'Top Sellers',
322
    accessor: 'product',
323
    aggregate: 'unique', // List unique products
324
    Aggregated: ({ value }) => (
325
      <ul style={{ margin: 0, paddingLeft: '20px' }}>
326
        {value.slice(0, 3).map((product, i) => (
327
          <li key={i}>{product}</li>
328
        ))}
329
        {value.length > 3 && <li>+{value.length - 3} more</li>}
330
      </ul>
331
    ),
332
  },
333
  {
334
    Header: 'Custom Metric',
335
    accessor: 'sales',
336
    // Custom aggregation function
337
    aggregate: (leafValues, childRows) => {
338
      const total = leafValues.reduce((sum, val) => sum + val, 0);
339
      const count = leafValues.length;
340
      const avg = total / count;
341
      
342
      return {
343
        total,
344
        average: avg,
345
        count,
346
        efficiency: total / count > 1000 ? 'High' : 'Low',
347
      };
348
    },
349
    Aggregated: ({ value }) => (
350
      <div>
351
        <div>Total: ${value.total}</div>
352
        <div>Avg: ${Math.round(value.average)}</div>
353
        <div>Efficiency: {value.efficiency}</div>
354
      </div>
355
    ),
356
  },
357
];
358

359
// Usage with grouping
360
function GroupedSalesTable({ data }) {
361
  const table = useTable(
362
    {
363
      columns,
364
      data,
365
      initialState: {
366
        groupBy: ['category'], // Group by category
367
      },
368
    },
369
    useGroupBy
370
  );
371
  
372
  // Implementation...
373
}
374
```
375

376
### Custom Type Creation
377

378
Examples of creating custom filter types, sort types, and aggregation functions.
379

380
```javascript
381
// Custom filter type for date ranges
382
const dateRangeFilter = (rows, columnId, filterValue) => {
383
  const [startDate, endDate] = filterValue;
384
  
385
  return rows.filter(row => {
386
    const cellValue = row.values[columnId];
387
    const date = new Date(cellValue);
388
    
389
    return date >= startDate && date <= endDate;
390
  });
391
};
392

393
// Custom sort for version numbers (e.g., "1.2.3")
394
const versionSort = (rowA, rowB, columnId) => {
395
  const versionA = rowA.values[columnId];
396
  const versionB = rowB.values[columnId];
397
  
398
  const parseVersion = (version) => {
399
    return version.split('.').map(part => parseInt(part, 10));
400
  };
401
  
402
  const partsA = parseVersion(versionA);
403
  const partsB = parseVersion(versionB);
404
  
405
  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
406
    const a = partsA[i] || 0;
407
    const b = partsB[i] || 0;
408
    
409
    if (a !== b) {
410
      return a > b ? 1 : -1;
411
    }
412
  }
413
  
414
  return 0;
415
};
416

417
// Custom aggregation for weighted average
418
const weightedAverageAggregator = (leafValues, childRows) => {
419
  let totalValue = 0;
420
  let totalWeight = 0;
421
  
422
  childRows.forEach((row, index) => {
423
    const value = leafValues[index];
424
    const weight = row.original.weight || 1; // Default weight of 1
425
    
426
    totalValue += value * weight;
427
    totalWeight += weight;
428
  });
429
  
430
  return totalWeight > 0 ? totalValue / totalWeight : 0;
431
};
432

433
// Usage of custom types
434
const customColumns = [
435
  {
436
    Header: 'Release Date',
437
    accessor: 'releaseDate',
438
    filter: dateRangeFilter,
439
    Filter: ({ column }) => (
440
      <DateRangePicker
441
        startDate={column.filterValue?.[0]}
442
        endDate={column.filterValue?.[1]}
443
        onChange={([start, end]) => column.setFilter([start, end])}
444
      />
445
    ),
446
  },
447
  {
448
    Header: 'Version',
449
    accessor: 'version',
450
    sortType: versionSort,
451
  },
452
  {
453
    Header: 'Score',
454
    accessor: 'score',
455
    aggregate: weightedAverageAggregator,
456
    Aggregated: ({ value }) => `Weighted Avg: ${value.toFixed(2)}`,
457
  },
458
];
459
```
460

461
## Types
462

463
```javascript { .api }
464
// Filter function signature
465
type FilterFunction = (
466
  rows: Row[],
467
  columnId: string,
468
  filterValue: any,
469
  addMeta?: (meta: any) => void
470
) => Row[];
471

472
// Sort function signature  
473
type SortFunction = (
474
  rowA: Row,
475
  rowB: Row,
476
  columnId: string,
477
  desc?: boolean
478
) => number;
479

480
// Aggregation function signature
481
type AggregationFunction = (
482
  leafValues: any[],
483
  childRows: Row[]
484
) => any;
485

486
// Global filter function signature
487
type GlobalFilterFunction = (
488
  rows: Row[],
489
  columnIds: string[],
490
  filterValue: any,
491
  addMeta?: (meta: any) => void
492
) => Row[];
493

494
interface Column {
495
  /** Filter type or custom filter function */
496
  filter?: string | FilterFunction;
497
  /** Sort type or custom sort function */
498
  sortType?: string | SortFunction;
499
  /** Aggregation type or custom aggregation function */
500
  aggregate?: string | AggregationFunction;
501
  /** Whether values should be sorted in descending order first */
502
  sortDescFirst?: boolean;
503
  /** Whether to invert the sort direction */
504
  sortInverted?: boolean;
505
}
506
```