v0.6.0
GitHub

Filtering Example

The filtering feature in Svelte Reactive Table provides powerful data filtering capabilities with an intuitive API. This example demonstrates various filtering patterns including text search, range filters, and multi-select options.

Interactive Filtering Example

This example shows comprehensive filtering functionality:

  • Text search with case-insensitive substring matching
  • Age range filtering using the range helper
  • Multi-select city filtering (array/IN operation)
  • Multi-select status filtering
  • Real-time filter state display
  • Clear all filters functionality
  • “No results” message when filters exclude all data
Filters

Filter the data by multiple criteria

to
Heroes & Villains

Showing 10 of 10 results

IDNameAgeCityStatus
1Bruce Wayne35Gotham Cityactive
2Clark Kent33Metropolisactive
3Diana Prince5000Themysciraactive
4Barry Allen28Central Cityinactive
5Hal Jordan32Coast Citypending
6Arthur Curry35Atlantisactive
7Victor Stone25Jump Cityinactive
8Selina Kyle32Gotham Citypending
9Harley Quinn27Gotham Cityactive
10Joker40Gotham Cityinactive

Key Features Demonstrated

Text Search

The name filter uses substring matching (contains) with case-insensitive comparison by default:

			filtering.setFilter('name', nameSearch.trim());
// Matches "alice" in "Alice Johnson"

Range Filtering

The age filter uses the range helper for numeric range filtering:

			filtering.setFilter('age', filterHelpers.range(minAge, maxAge));
// Filters ages between minAge and maxAge (inclusive)

Array Filtering (IN Operation)

City and status filters use arrays for “IN” style filtering:

			filtering.setFilter('city', selectedCities);
// Matches any city in the array

Multiple Filters (AND Logic)

All filters are combined with AND logic - rows must match all active filters:

			filtering.setFilters({
	name: 'john',
	city: ['New York', 'Chicago'],
	age: filterHelpers.range(25, 35)
});
// Only rows matching ALL conditions appear

Reactive State

The filtering plugin provides reactive properties to monitor filter state:

			filtering.count; // Number of active filters
filtering.hasActiveFilters; // Boolean indicating if any filters are active
filtering.filters; // Read-only copy of all current filters

Empty Value Handling

Filters are automatically removed when set to empty values:

			filtering.setFilter('city', ''); // Removes filter
filtering.setFilter('city', []); // Removes filter
filtering.setFilter('city', undefined); // Removes filter